React生命周期, setState、props改变触发的钩子函数

Posted 2023-03-16

参考技术A 在接受父组件改变后的props需要重新渲染组件时用到的比较多。将nextProps的state为当前组件的state,从而渲染组件

可用于性能优化（部分更新） 在setState后, state发生变化, return false时可以阻止组件更新。
父组件的重新渲染会导致子组件也重新渲染, 这个时候如果我们不需要所有子组件都跟着重新渲染, 可以在子组件的该生命周期中做判断

shouldComponentUpdate返回true,则进入改流程

组件的每次更新都会执行此钩子函数, 通过参数可以拿到更新前的props和state

render函数会插入jsx生成dom结构。react会生成一份虚拟DOM树,在每次组件更新时通过diff算法将虚拟DOM与旧虚拟DOM比较,找到最小有差异的DOM节点,重新渲染

react 生命周期钩子函数

实例化

• construtor//构造函数
• componentWillMount//挂载之前，可修改setState
• render//渲染真实dom
• componentDidMount//第一次render后，仅一次，可setState

存在期

• componentWillReceiveProps//父组件render时props更新时，不管props是否变化
• shouldComponentUpdate//修改state后自动调用，默认返回true，false跳过后面的，少用
• componentWillUpdate//修改state的render之前自动调用，相似于CWM
• render
• componentDidUpdate//render后调用，万不得已不要修改state死循环

销毁期

• componentWillUnmount//销毁前