react

1，二种声明方式，修改数据方式，props，state

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
    
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>
  </head>
  <body>
	<div id='app'></div>
	<script type="text/babel">
      console.log(ReactDOM);
      //第一种函数组件
      function Object1(props){
        return <div style={{color:"red"}}>{props.children} ---- {props.data}</div>
      }
      //第二种类组件
      class ObjectClass extends React.Component{
        render(){
          return <h1 style={{color:"blue"}}>{this.props.children}</h1>
        }
      }
      //修改数据刷新
      class ObjectClass2 extends React.Component{
        constructor(props){
          super(props);
          this.state = {
            number:1
          };
          setInterval(() => {
            this.setState({
              number: this.state.number+1,
            });
          }, 1000);
        }
        render(){
          return <h1 style={{color:"blue"}}>{this.state.number}</h1>
        }
      }
      //挂载dom
    	ReactDOM.render(
      	<div>
            <div>hello world</div>
            <Object1 data={"data"}>hello Object1</Object1>
            <ObjectClass>hello ObjectClass</ObjectClass>
            <ObjectClass2/>
        </div>,
      	document.getElementById("app")
      );
    </script>
  </body>
</html>

2，生命周期

  • class 生命周期

    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
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Add React in One Minute</title>
        
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>
      </head>
      <body>
    	<div id='app'></div>
    	<script type="text/babel">
          console.log(ReactDOM);
     
          class Object1 extends React.Component{
            constructor(props){
              console.log('constructor');
              super(props);
              this.state = {
                a:10,
              };
            }
            static getDerivedStateFromProps(props, state){
              //渲染之前修改state数值
              console.log("getDerivedStateFromProps",props, state);
              return null;//不修改数据直接返回null，
            }
            render(){
              console.log('render',this.props,this.state);
              return <div>{this.state.a}</div>
            }
            componentDidMount(){
              console.log("componentDidMount");

              //加载完成后进行其他操作
              this.setState({
                a: 20,
              });
            }

            shouldComponentUpdate(newProps, newState){
              console.log("shouldComponentUpdate", newProps, newState);
              return newProps != this.props || newState != this.state;
            }

            getSnapshotBeforeUpdate(prevProps, prevState){
              console.log("getSnapshotBeforeUpdate", prevProps,prevState);
              return null;
            }

            componentDidUpdate()
            {
              console.log("componentDidUpdate",this.props,this.state);
            }

        

          }
          //挂载dom
        	ReactDOM.render(
          	<div>
                <Object1 >hello Object1</Object1>
            </div>,
          	document.getElementById("app")
          );
        </script>
      </body>
    </html>

  • 结构图

3，父子组件通信

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
57
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
    
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>
  </head>
  <body>
	<div id='app'></div>
	<script type="text/babel">
      console.log(ReactDOM);

      class Child extends React.Component{
        
        handleCount(){
          this.props.onCount();
        }
        render(){
          return <div>
            <div>{this.props.count}</div>
            <button onClick={this.handleCount.bind(this)}>click +1</button>
          </div>
        }
      }

      class Father extends React.Component{
        constructor(props){
          super(props);
          this.state = {
            count:1
          };
        }
        onCount(){
          this.setState({
            count: this.state.count+1,
          })
        }
        render(){
          return <div>
            <Child count ={this.state.count} onCount={this.onCount.bind(this)}/>
          </div>
        }
      }

      //挂载dom
    	ReactDOM.render(
        <div>
          <Father ></Father>
        </div>,
      	document.getElementById("app")
      );
    </script>
  </body>
</html>