react学习总结

网址收藏: React官网 (opens new window)React的Github (opens new window)React的中文文档 (opens new window)

# 1.react是什么

React起源于Facebook的内部项目,因为该公司对市场上所有的Javascript MVC框架都不满意,决定自己写一套,用来架设Instargm的网站。做完以后,发现很好用,就在2013年5月开源。

# 2.安装react

  • 全局安装react脚手架工具npm install create-react-app -g
  • 安装阮一峰老师的教程 git clone git@github.com:ruanyf/react-demos.git下载下来

# 3.react特性

重点:组件,状态 核心: 状态

# 4.语法

# 4.1 html模板

<!DOCTYPE html>
<html>
  <head>
    <!-- 这是核心js -->
    <script src="../build/react.js"></script>
    <!-- 这是处理虚拟dom相关的js -->
    <script src="../build/react-dom.js"></script>
    <!-- 这是把JSX语法转换为js语法 (注意:JSX就是可以把html写在js里面。) -->
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <!-- 这里加type就是告诉游览器,这里使用的是JSX语法模板。 -->
    <script type="text/babel">
      //这里写
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 4.2 ReactDOM.render()

React最基本的方法,用于把模板转换成html语言,并且插入指定的节点。

例如

ReactDOM.render(
    <h2>Welcome to React World!</h2>,
    document.getElementById('myapp')
)
1
2
3
4

# 4.3 JSX语法

JSX是可以在js中写html,遇到html标签(例如:<)就用html解析,遇到代码块(例如:{)就用javascript规则解析。

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <div id="food"></div>
    <script type="text/babel">
      var names = ['Alice', 'Emily', 'Kate'];
      var foods = ['meal','sala','milk'];

      ReactDOM.render(
        <div>
        {
          names.map(function (name, index) {
            return <div key={index}>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
      );
      ReactDOM.render(
        <div>
        {
          foods.map(function (food, index) {
              return <div key={index}>I like eat {food}!</div>
          })
        }
        </div>,
        document.getElementById('food')
      )
    </script>
  </body>
</html>
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

# 4.4 组件 React.createClass()

React允许将代码封装成组件(component),然后把它当成html标签插入到网页中。React.createClass()就是可以创建一个组建类。

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
      var LikeFood = React.createClass({  //创建组件类
        render: function() {
          return <p>I like eat <mark>{this.props.name}</mark></p>;
        }
      });

      ReactDOM.render(
        <LikeFood name="Apple"/>,
        document.getElementById('foods')
      )
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 4.5 this.props.children

this.props对象的属性与组件的属性基本上是一致的,特殊在于this.props.children属性,它表示组件的所有子节点。

注意: this.props.children有三个可能,如果当前组件没有子节点,就是显示undefined;如果有一个子节点,数据类型就是object;如果有多个子节点,就是array,所以要小心。 但React提供了一个方法遍历所有子节点,React.Children,通过this.props.children来遍历。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
        var FoodList = React.createClass({
            render: function() {
            return (
                <ul>
                {
                    React.Children.map(this.props.children,function (child) {
                    return <li>{child}</li>;
                    })
                }
                </ul>
            )
            }
        })

        ReactDOM.render(
            <FoodList>
            <span>Hello,</span>
            <span>I like eat</span>
            <span>Apple!</span>
            </FoodList>,
            document.getElementById('foods')
        )
    </script>
  </body>
</html>
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

# 4.6 PropTypes

组件的属性可以接受任何值,如字符串,数字,数组,对象,函数,但是需要一种机制来验证使用组件提供的参数是否符合要求,PropTypes就是用来验证这个的。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
      var str = 123;
      var MyNum = React.createClass({
        propTypes: {
          num: React.PropTypes.number.isRequired,
        },

        render: function() {
          return <h2>{this.props.num}</h2>
        }
      });

      ReactDOM.render(
        <MyNum num={str} />,
        document.getElementById('foods')
      )
    </script>
  </body>
</html>
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

补充: 还可以添加默认值。'

getDefaultProps: function() {
    return {
    num: 1818
    }
}
1
2
3
4
5

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
      var str;
      var MyNum = React.createClass({
        getDefaultProps: function() {
            return {
                num: 1818
            }
        }
        propTypes: {
          num: React.PropTypes.number.isRequired,
        },

        render: function() {
          return <h2>{this.props.num}</h2>
        }
      });

      ReactDOM.render(
        <MyNum num={str} />,
        document.getElementById('foods')
      )
    </script>
  </body>
</html>
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

# 4.7 获取真实的DOM节点

组件并不是真的dom节点,只是存在内存中的数据结构,叫做虚拟DOM(virtual)。当它插入到文档以后,才会变成真实的DOM。

所有的DOM变动,先是在虚拟DOM上发生变动,然后再在实际发生变动的部分,反映在真实的DOM,这种叫做DOM diff,它可以极大提高网页的性能表现。

有时需要从组件获取真实的DOM的节点,这个时候就要用到ref属性。

注意: React还支持许多事件,更多请访问事件 (opens new window)

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
        var MyFoods = React.createClass({
          showContent: function() {
            this.refs.myFoodInput.focus();
          },
          render: function() {
            return (
              <div>
                <input type="text" ref="myFoodInput" />
                <input type="button" value="自动聚焦" onClick={this.showContent} />
              </div>
            )
          }
        })

        ReactDOM.render(
          <MyFoods />,
          document.getElementById('foods')
        )

    </script>
  </body>
</html>
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

# 4.8 this.state 状态管理

组件免不了要和用户互动,React的一大创新就是把组件看成是一个状态机,一开始有个初始状态,然后用户互动,导致状态变化,从而重新出发渲染UI。

注意getInitialState 方法用于定义初始状态,但同时它是一个对象,这个可以通过this.state属性读取。

当用户点击组件,导致状态发生变化,this.setState 方法就会修改状态值,每次修改完,会自动调用this.render方法,再次渲染组件。

this.propsthis.state都是描述组件的特性,但是不同的是this.props是指一旦定义好了,就不再发生变化的特性,而this.state是会随着用户互动而产生变化的特性。

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
      var FoodButton = React.createClass({
        getInitialState: function() {
          return {food: false};
        },
        callClick: function(event) {
          this.setState({food: !this.state.food});
        },
        render: function() {
          var text1 = this.state.food ? 'like eat apple' : 'hate eat apple';
          return (
            <p onClick={this.callClick}>
              You {text1}!  
            </p>
          );
        }
      });

      ReactDOM.render(
        <FoodButton />,
        document.getElementById('foods')
      )
    </script>
  </body>
</html>
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

# 4.9 表单

用户在表单填入的内容,属于用户和组件之间的互动,所以不能用this.state,而要定义一个onChange事件的回调函数,通过event.target.value读取用户的值。

注意:textarea,select,radio都属于这种情况。

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="food"></div>
    <script type="text/babel">

      var Food = React.createClass({
        getInitialState: function() {
          return {val: 'Welcome to React!'};
        },
        hanChange: function(event) {
          this.setState({val:event.target.value});
        },
        render: function() {
          var val = this.state.val;
          return (
            <div>
              <input type="text" value={val} onChange={this.hanChange} />
              <p>{val}</p>  
            </div>
          );
        }
      })
      ReactDOM.render(<Food />,document.getElementById('food'))
    </script>
  </body>
</html>
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

# 4.10 组件的生命周期

React中组件的生命周期分为三个状态,Mounting是已经插入真实DOM,Updating是正在被重新渲染,Unmounting是已移出真实DOM。

每个状态都有两种处理函数,will函数是进入状态之前,did函数是进入状态之后,三种状态共计五种函数。

注意:组件的样式style不能写成

<div style={opacity: this.state.opacity}>
1

,要写成

<div style={{opacity: this.state.opacity}}>`。
1

因为React组件样式是个对象,所以第一个大括号表示Javascript语法,第二个大括号表示样式对象。

# 五种函数

  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps, object nextState)
  • componentWillUpdate(object prevState, object prevState)
  • componentWillUnMount()

例如:第二种,在已插入真实DOM之后触发。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="food"></div>
    <script type="text/babel">
      var Food = React.createClass({
        getInitialState: function() {
          return {
            opacity: 0
          }
        },
        componentDidMount: function() {
          this.timer = setInterval(function() {
            var opacity = this.state.opacity;
            opacity += .05;
            if (opacity > 1) {
              opacity = 0;
            }
            this.setState({
              opacity: opacity
            })
          }.bind(this),100);
        },

        render: function() {
          return (
            <div style={{opacity: this.state.opacity}}>
              Hello, {this.props.title}
            </div>
          );
        }
      });

      ReactDOM.render(
        <Food title="apple"/>,
        document.getElementById('food')
      )
    </script>
  </body>
</html>
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

# 4.11 Ajax的使用

组件的数据来源一般都是通过Ajax请求从服务器获取,可以使用componentDidMount()方法设置Ajax请求,等到请求成功,再用this.setState方法重新渲染UI。

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <div id="food"></div>
    <script type="text/babel">
      var ClientGits = React.createClass({
        getInitialState: function() {
          return {
            id: '',
            addr: ''
          };
        },
        componentDidMount: function() {
          $.get(this.props.source,function (result) {
            var gits = result[0];
            this.setState({
              id: gits.id,
              addr: gits.git_pull_url
            });
          }.bind(this));
        },

        render: function() {
          return (
            <div>
              UserId is <a href='#userId'>{this.state.id}</a>, Git Address is <a href={this.state.addr}>{this.state.addr}</a>!
            </div>
          );
        }
      });

      ReactDOM.render(
        <ClientGits source="https://api.github.com/users/octocat/gists" />,
        document.getElementById('food')
      )
    </script>
  </body>
</html>
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

注意: 上面采用了jquery的Ajax,还可以采用其他的库。我们甚至可以把Promise对象传入组件。

例如:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <div id="projects"></div>
    <script type="text/babel">
        var Projects = React.createClass({
          getInitialState: function() {
            return {
              loading: true,
              error: null,
              data: null
            };
          },

          componentDidMount() {
            this.props.promise.then(
              value => this.setState({loading: false, data: value}),
              error => this.setState({loading: false, error: error})
            )
          },

          render: function() {
            if (this.state.loading) {
              return <span>Loading...</span>;
            } else if (this.state.error != null) {
              return <span>Error:{this.state.error.message}</span>;
            } else {
              var res = this.state.data.items;
              var resList = res.map(function (res,index) {
                return (
                  <li key={index}><a href={res.html_url} target="_blank">{res.name}</a>({res.stargazers_count} stars)<br/>{res.description}</li>
                );
              });
              return (
                <main>
                  <h1>Github上最受欢迎的JS项目</h1>
                  <ul>{resList}</ul>
                </main>
              );
            }
          }
        });

        ReactDOM.render(
          <Projects promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
          document.getElementById('projects')
        )
    </script>
  </body>
</html>
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
52
53
54
55
56

以后还会总结一些有关react的知识点。

分享至:

  • qq
  • qq空间
  • 微博
  • 豆瓣
  • 贴吧