1. 前言
前文
state的文章已经用到了 生命周期函数,但是还没有详细讲解,这节课,详细的分析下理清楚他们什么时候调用,也就清楚这些钩子有什么用了
2. 计数器 demo
通过计数器
demo来 分析 钩子
- 定义
state用来计数render布局- 点击 事件
this修改方式 箭头函数用法setState()的回调函数用法- 构造函数 和 渲染函数里面 有 打印 ,用来标记 执行顺序
class Numbers extends React.Component { state = { n: 0 }; constructor(){ super(); console.log("1 constructor"); } render() { console.log("3 render"); return ( <div> <p>{this.state.n}</p> <button onClick={() => { this.setState(oldState => { return { n: oldState.n + 1 }; }); }} > 点击累加 </button> </div> ); } } ReactDOM.render(<Numbers />, box);
3. 钩子核心
这个需要 自己 写一遍 ,看看打印 ,大概了解顺序 ,在看具体的解析
// 不在这里发请求 布局还没好太早了 // render都没走,肯定获取不到DOM componentWillMount() { console.log("2 Component WILL MOUNT!----- DOM没有创建完"); } componentDidMount() { console.log("4 Component DID MOUNT!----DOM创建完了, 可以发请求"); } componentWillReceiveProps(newProps) { console.log("5 Component WILL RECEIVE PROPS!"); } // 状态修改了, 组件是否要更新数据?/render走不走 // true 更新 // false 不更新 // 深入的时候 哪些需要更新 哪些不需要 优化 shouldComponentUpdate(newProps, newState) { console.log("1 should Component Update-----应该更新",newState); if(newState.n%2 === 0) return true return false; } // 更新函数 // 其实我们点击的时候已经set了 但是其实this.state还没有变 componentWillUpdate(nextProps, nextState) { console.log("2 Component WILL UPDATE!----将要更新",nextState,this.state); // this.state还没有变 // 3 render } componentDidUpdate(prevProps, prevState) { console.log("4 Component DID UPDATE!------已经更新"); } componentWillUnmount() { console.log("Component WILL UNMOUNT!----将要卸载"); }
4. 总结 执行顺序
这个还是建议 自己跑一遭 ,印象更深
4.1 首次加载
- constructor
- Component WILL MOUNT
- render
- Component DID MOUNT
4.2 状态更新 比如点击了 按钮计数器增加
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
5. 钩子功能介绍
5.0 constructor:
组件的构造函数，组件更新到界面上之前会先调用
1.用于初始化内部状态,很少使用
2.唯一可以直接修改 state 的地方
5.1 componentWillMount
组件
will将要 加载 ,那就是还没加载 所以 还没有走render,自然没有DOM
5.2 componentDidMount
组件已经加载 ,
DOM已经存在 ,通常在这里发请求1.UI 渲染完成后调用
2.只执行一次
3.典型场景:获取外部资源
5.3 shouldComponentUpdate(nextProps, nextState)
告诉组件是否需要重新渲染，用于性能优化，比如判定指定 props 发生改变，组件才进行重新渲染
should应该更新吗???返回 true代表可以更新 ,false代表不更新
例如上边代码中的例子 偶数更新,奇数不更新
1.决定虚拟
DOM是否需要重绘2.一般可以由
PureComponent自动实现3.典型场景:性能优化
也就是说,你想优化渲染效率,可以在这里面进行操作,当然一般情况下是用不到的,用到了就不是一般情况
5.4 componentWillUpdate
这个
wil是将要更新 ,也就是还没有更新,虽然说你点击的时候 已经走了
setState()方法,但这个和vue一样是不会立刻更新DOM的
5.5 componentDidUpdate(prevProps, prevState)
1.每次 UI 更新时被调用
2.典型场景:页面需要根据 props 变化重新获取数据
5.6 componentWillUnmount
做些资源释放，卸载副作用的事情
删除组件或者 切换界面 的时候调用
清理操作，例如，清除 timer，取消网络请求
