1. 组件挂载
触发时机：React 组件构建，将 DOM 元素插入页面。
hooks行为：1. 组件根据val的值执行useState(val)的初始化；2. 执行一次useEffect的内容
触发渲染的三种情形之1
2.1 组件更新 -?调用setState方法触发时机：组件本身调用setState方法
hooks行为：1. 更新state状态；2. 根据useEffect的依赖项决定是否执行一次useEffect
另外，如果 class 组件 this.setState(null)，传入null不会触发组件更新
触发渲染的三种情形之2
2.2 组件更新 - 父组件重新渲染触发时机：父组件重新渲染
只要父组件重新渲染了，即使传入子组件的?props?未发生变化，那么子组件也会重新渲染，进而触发?render。是触发渲染的三种情形之3
Demo：当点击按钮的时候，Child?组件的?props?并没有发生变化，但是也触发了?render?方法：?
const Child = () => { console.log("child render"); return<div>child</div>; }; class App extends React.Component { state = { a: 1 }; render() { console.log("render"); return ( <React.Fragement> <p>{this.state.a}</p> <button onClick={() => { this.setState({ a: 1 }); }} > Click me </button> <button onClick={() => this.setState(null)}>setState null</button> <Child /> </React.Fragement> ); } } 3. 组件卸载触发时机：当组件从 DOM 中移除时。
hooks行为：卸载事件会触发 class 组件的 componentWillUnmount() 方法，或函数组件的 useEffect Hook 的返回方法。
???
参考内容：
原文：性能！！让你的 React 组件跑得再快一点，作者：天泽，来源：政采云前端团队
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
