React

发表于 | 分类于

#

##whats

创建可复用的web组件
只提供mvc中的v层

why

组件化，无需 模板
比较容易理解（js逻辑和html紧密连接,可以在js中写html，无需以字符串或者url）
单项数据流：数据一旦更新，重新直接渲染整个app！

##react渲染方式（单项数据流）：
用户输入–>从api获得数据–>传输数据给顶层组件–>react渲染组件（依次下传）

##虚拟dom树
重建dom树
查找差异
计算需要更新的部分
批量更新

JSX

基于js的XML语法扩展？？

实践

官方主页：
https://reactjs.org

安装node.js （win环境）
https://nodejs.org/en

可参考
http://blog.csdn.net/xxmeng2012/article/details/51492149
http://www.runoob.com/nodejs/nodejs-http-server.html

本次实践，不追求详解。

安装完之后，通过cmd，查看安装状态
node -v
npm -v
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

1
2
3
4
5
C:\Users\chen>node -v
v8.10.0

C:\Users\chen>npm -v
5.6.0

开发环境，webstorm+chrome

由于npm的国外速度很慢，切换成淘宝的

1
2
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

以后 使用
cnpm install [name]
支持主页：http://npm.taobao.org/

快速构建react环境

1
2
3
4
5
6
cnpm install -g create-react-app

cd C:\Users\chen\WebstormProjects\first
create-react-app my-app
cd my-app/
npm start

尝试修改 app.js，效果如下

image.png-19.4kB

React JSX:React 使用 JSX 来替代常规的 JavaScript。

###WHY JSX:
1.执行更快
2.编译可以发现错误
3.编写模板更快

简单学习：（缺少html的知识~）

推荐使用 内联样式表：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
//内联样式表
var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
class App extends Component {
  render() {
    return (
        <h1 style = {myStyle}>HELLO</h1>
    );
  }
}

export default App;

###内嵌数组：数组会自动展开所有成员,也可以指定使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
var arr = [
    <h1>11111</h1>,
    <h2>22222</h2>,
];

class App extends Component {
  render() {
    return (
        <div>{arr}</div>
    );
  }
}

export default App;

React,可以渲染 HTML标签或 React组件
区别就在于，变量名大小写，例子如下
var myDivElement =

;
var MyComponent = React.createClass({/…/});

###ps 注意：嵌套多个 HTML 标签，需要使用一个标签元素包裹它

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 render() {
    return (
        <section>
            <h1>这是正确的例子</h1>
            <span>假设这里是标题下面的内容</span>
        </section>
    );
  }

render() {
    return (
        <h1>这是错误的例子</h1>,
        <span>假设这里是标题下面的内容</span>
    );
  }

###！！编写react 组件 新版 及其调用：不推荐 require

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';

//!!!!!!
class HelloMessage extends Component {
    render(){
        return <h1>Hello World！</h1>;
    }
}

class App extends Component {
  render() {
    return (
        <HelloMessage/>//!!!!!!!!!
    );
  }
}

export default App;

###A EXAMPLE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import React, {Component} from 'react';
// import logo from './logo.svg';
import './App.css';


class Timer extends Component {
    //构造器
    constructor(props) {
        super(props);
        this.state = {seconds: 0};
    }

    tick() {
        this.setState(prevState => ({
            seconds: prevState.seconds + 1
        }));
    }
    //组件加载时，触发的事件
    componentDidMount() {
        this.interval = setInterval(() => this.tick(), 1000);
    }
    //事件：组件注销，清除定时器
    componentWillUnmount() {
        clearInterval(this.interval);
    }

    render() {
        return (
            <div>
                Seconds: {this.state.seconds}
            </div>
        );
    }
}


class App extends Component {
    render() {
        return (
            <Timer/>
        );
    }
}

export default App;

###外部参数模式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, {Component} from 'react';
// import logo from './logo.svg';
import './App.css';


class HelloMessage extends Component {
    render() {
        return <h1>Hello {this.props.name}</h1>;
    }
}


class App extends Component {
    render() {
        return (
            <HelloMessage name="Runoob"/>
        );
    }
}

export default App;

###复合组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import React, {Component} from 'react';
// import logo from './logo.svg';
import './App.css';


class WebSite extends Component {
    render() {
        return (
            <div>
                <Name name={this.props.name}/>
                <Link site={this.props.site}/>
            </div>);
    }
}


class Name extends Component {
    render() {
        return (
            <h1>{this.props.name}</h1>
        );
    }
}

class Link extends Component {
    render() {
        return (
            <a href={this.props.site}>
                {this.props.site}
            </a>
        );
    }
}


class App extends Component {
    render() {
        return (
            <WebSite name="少儿编程" site=" http://www.helloworldroom.com"/>
        );
    }
}

export default App;

React State(状态)
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import React, {Component} from 'react';
// import logo from './logo.svg';
import './App.css';


class LikeButton extends Component {

    //构造器
    constructor(props) {
        super(props);
        this.state = {liked: false};

        // ！！！！这个绑定是必要的，要不然该事件中的this就会是当前实例！！！！！！
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick (){
        console.log(111)
        this.setState(prevState => ({
            liked: !prevState.liked
        }));
    }

    //或者使用箭头函数
    // handleClick= () =>{
    //     console.log(111)
    //     this.setState(prevState => ({
    //         liked: !prevState.liked
    //     }));
    // }

    render() {
        var text = this.state.liked ? '喜欢' : '不喜欢';
        return (
            <p onClick={this.handleClick}>
                你<b>{text}</b>我。点我切换状态。
            </p>
        );
    }
}

class App extends Component {
    render() {
        return (
            <LikeButton />
        );
    }
}

export default App;

###State 和 Props 混用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import React, {Component} from 'react';
// import logo from './logo.svg';
import './App.css';

class WebSite extends Component {

    constructor(props) {
        super(props);
        this.state = {
            name: "菜鸟教程",
            site: "http://www.runoob.com"
        };

    }

    render() {
        return (
            <div>
                <Name name={this.state.name} />
                <Link site={this.state.site} />
            </div>
        );
    }
}
class Name  extends Component {
    render() {
        return (
            <h1>{this.props.name}</h1>
        );
    }
}

class Link extends Component {
    render() {
        return (
            <a href={this.props.site}>
                {this.props.site}
            </a>
        );
    }
}

class App extends Component {
    render() {
        return (
            <WebSite />
        );
    }
}

export default App;