setState

setState(updater, [callback])

• 参数1： updater: 更新数据 （函数/对象）
• 参数2callback: 更新成功后的回调 FUNCTION

  changeName=()=>{
        this.setState({
          name: "大王"
        });
  }

• 异步:react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能
• 浅合并 Object.assign()

组件间通信

在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。

• 父级向子级通信 把数据添加子组件的属性中，然后子组件中从props属性中，获取父级传递过来的数据

父组件向子组件传参

render(){
    return (<div><Child 
                  name = {this.state.name}  //把数据添加子组件的属性中
                  changeName = {this.changeName}
                  >
                </Child></div>)
  }

//接收父组件的传参   
      let {name,changeName} = this.props

• 子级向父级通信 在父级中定义相关的数据操作方法(或其他回调), 把该方法传递给子级，在子级中调用该方法父级传递消息

跨组件通信 context

React.createContext(defaultValue);{ Consumer, Provider } =
createContext(defaultValue)

• Context.Provider 在父组件调用 Provider 传递数据
  value 要传递的数据
• 接收数据

class.contextType = Context;
static contextType = Context;
this.context;
Context.Consumer <Consumer> {(props)=>{ console.log(props); return <div></div>
}} </Consumer>

注意在使用不熟练时，最好不要再项目中使用 context，context一般给第 三方库使用

组件的生命周期

所谓的生命周期就是指某个事物从开始到结束的各个阶段，当然在 React.js 中指的是组件从创建到销毁的过程，React.js 在这个过程中的不同阶段调用的函数，通过这些函数，我们可以更加精确的对组件进行控制，前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数

生命周期函数详解

挂载阶段

constructor(props)
类的构造函数，也是组件初始化函数，一般情况下，我们会在这个阶段做一些初始化的工作

• 1.初始化 state
• 2.处理事件绑定函数的 this

类式组件中定义constructor，一定要接收props，调用super()进行继承

// constructor：构造函数
    constructor(props){
        super(props);
        this.state = {
            age:16,
            name: "王"
        }
        console.log("构造函数");
     }

• static getDerivedStateFromProps(props, state)

  • props：父组件传递过来的参数
  • state：自身组件的参数

  该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变化时更新 state

static getDerivedStateFromProps(props, state){
        console.log("即将要挂载",props, state);
        return state;
      }

• render()
  render 方法是 Class 组件必须实现的方法

• componentDidMount()

  在组件挂载后（render 的内容插入 DOM 树中）调用。通常在这个阶段，我们可以：

  • 操作 DOM 节点
  • 发送请求

 //组件挂载完成
      componentDidMount(){
        console.log("组件挂载完成");
      }

更新阶段

父组件更新引起组件更新

• static getDerivedStateFromProps(props, state)

• shouldComponentUpdate(nextProps, nextState)

  发生在更新阶段，getDerivedStateFromProps 之后，render 之前，该函数会返回一个布尔值，决定了后续是否执行 render，首次渲染不会调用该函数

 // 组件的state或者props 改变
    shouldComponentUpdate(nextProps, nextState){
        console.log(1);
        // 注意这个返回值决定是否重新渲染DOM，true 重新渲染DOM 生命周期会继续向下走，
        // false不渲染DOM，更新结束
        return true; 
    }

• componentWillUpdate()

 // 即将更新组件
    componentWillUpdate(nextProps, nextState){
        console.log("即将更新组件");
    }

• getSnapshotBeforeUpdate(prevProps, prevState)

  该方法在 render() 之后，但是在输出到 DOM 之前执行，用来获取渲染之前的快照。当我们想在当前一次更新前获取上次的 DOM 状态，可以在这里进行处理，该函数的返回值将作参数传递给下个生命周期函数

• componentDidUpdate

  该函数并不常用。

• componentDidUpdate()

  该函数会在 DOM 更新后立即调用，首次渲染不会调用该方法。我们可以在这个函数中对渲染后的 DOM 进行操作

 // 完成渲染即将被挂载在DOM中, 这会已经生成了新的DOM节点了，    
    getSnapshotBeforeUpdate(prevProps, prevState){ 
        console.log("完成渲染即将被挂载在DOM中");
        return 11;// 不过还有修改文档，你可以在这里去获取更新之前的文档
    }

组件自身更新

• shouldComponentUpdate()
• componentWillUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

卸载阶段

• componentWillUnmount()

  该方法会在组件卸载及销毁前调用，我们可以在这里做一些清理工作，如：组件内的定时器、未完成的请求等

componentWillUnmount(){
    console.log("组件即将卸载");
}

• 错误处理
  当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法

static getDerivedStateFromError()
componentDidCatch()