React的Class组件

Props外部数据

• 传入props给B组件

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "Jack" };
  }
  onClick = () => {};
  render() {
    return (
      <B name={this.state.name} onClick={this.onClick}>
        hi
      </B>
    );
  }
}
//外部数据被包装为一个对象
//{name:'Jack',onClick:...,children:'hi'}
//此处的onClick是一个回调。onClick={this.onClick}: 这this.onClick函数传给onClick属性，把this.onClick这个函数的地址传过去，对象只会拷贝地址

• 读取

class B extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div onClick={this.props.onClick}>
        {this.props.name}
        <div>{this.props.children}</div>
      </div>
    );
  }
}

Props的作用

1. 接受外部数据

• 只能读不能写
• 外部数据由父组件传递

2. 接受外部函数

• 在恰当的时机，调用该函数
• 该函数一般是父组件的函数

State 内部数据

this.setState(newState,fn)

• 注意：setState不会立刻改变this.state，会在当前代码运行完后，再去更新this.state，从而触发UI更新
• fn会在写入成功后执行
• setState会自动将新state与旧state进行一级合并

import React from "react";
import ReactDOM from "react-dom";
//PureComponent发现对象不一样，但里面值是一样的,都是一样的就不render
//PureComponent在render之前，对新旧state进行对比，对比只对比一层，最外面那一层，不会递归
class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      n: 1,
      array: [1,2,3]
    };
  }
  onClick = () => {
    // this.setState((state) => {
    //   return {
    //     n: state.n - 1,
    //   };
    // });
    this.setState((state) => ({
      n: state.n + 1,
    }));
  };
  //PureComponent发现对象不一样，但里面值是一样的,都是一样的就不render
  // shouldComponentUpdate(newProps, newState) {
  //   if(newState.n === this.state.n) {
  //     return false;
  //   } else {
  //     return true;
  //   }
  // }
  render() {
    // console.log('render了一次')
    // return (
    //   <div>
    //     App
    //     <div>
    //       {this.state.n}
    //       <button onClick={this.onClick}>+1</button>
    //     </div>
    //   </div>
    // );
    // let message;
    // if (this.state.n % 2 === 0) {
    //   message = <div>偶数</div>;
    // } else {
    //   message = <span>奇数</span>;
    // }
    // return (
      // <React.Fragment>
      //   {/* {message} */}
      //   {this.state.n % 2 === 0 ? <div>偶数</div> : <span>奇数</span>}
      //   <button onClick={this.onClick}>+1</button>
      // </React.Fragment>
    // );

    //推荐写法
    return this.state.array.map(n=><span key={n}>{n}</span>)

    // let result = []
    // for(let i = 0;i<this.state.array.length; i++) {
    //   result.push(this.state.array[i])
    // }
    // return result
  }
}

生命周期

1. constructor() - 在这里初始化props, state
2. static getDerivedStateFromProps()
3. shouldComponentUpdate() - return false 阻止UI更新, reture ture 不阻止UI更新
4. render() - 创建虚拟DOM，用于展示视图。如果有两个根元素，用<React.Fragment>包起来，<React.Fragment />可以缩写成 <></>
5. getSnapshotBeforeUpdate()
6. componentDidMount() - 组件已出现在页面。在元素插入页面后执行代码，这些代码依赖DOM，比如想获取div的高度，就最好在这里写；此处可以发起加载数据的AJAX请求；首次渲染会执行此钩子
7. componentDidUpdate() - 组件已更新。在视图更新后执行代码；此处也可以发起AJAX请求，用于更新数据；首次渲染不会执行此钩子。若shouldComponentUpdate返回false，则不会触发此钩子
8. componentWillUnmount() - 组件将死。组件将要被移出页面然后被销毁时执行代码；unmount过的组件不会再次mount。
9. static getDerivedStateFromError()
10. componentDidCatch()

参考资料：饥人谷