useEffect

useEffect(() => { 
  //相当于执行componentDidMount()和componentDidUpdate()的操作 第一次挂载和数据更新时执行
  
  return () => { // 在组件卸载前执行
    // 在此做一些收尾工作, 比如清除定时器/取消订阅等
  }
  
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行 若不为空则是监测的数据，数据改变后执行回调函数

PureComponent

如果子组件没用用到父组件的数据，但是父组件更新时会连带子组件一起更新，所以可以通过判断组件中的state和props是否发生改变，重写shouldComponentUpdate方法去确定是否更新

//接收两个参数，第一个是更新后的props，第二个是更新后的state
shouldComponentUpdate(nextProps,nextState){
    //判断更新前与更新后是否改变 改变返回true 组件会更新
    ...
}

如果state很多，手动判断很麻烦，这时候可以引入PureComponent，它会自动对比从而确定组件是否更新

import { PureComponent } from 'react'

export defatlt class Student extends PureComponent{

}

renderProps

如何向组件内部动态传入带内容的结构?

childrenProps

<A>
  <B>小明</B>
</A>
//在B组件拿数据
{this.props.children} //小明

renderProps

<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(A组件的state数据)}
C组件: 读取A组件传入的数据{this.props.data}