react-10-钩子函数-生命周期
2021-07-24 本文已影响0人
云高风轻
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 不更新
// 哪些需要更新 哪些不需要 权限公开了
//参数1: 变化后的 props
//参数2: 变化后的 state
shouldComponentUpdate(newProps, newState) {
console.log("1 should Component Update-----应该更新",newState);
if(newState.n%2 === 0) return true
return false;
}
// 更新函数
// 我们点击的时候已经set了 但是其实this.state还没有变,因为没有走 render
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，取消网络请求
5.7 componentWillReceiveProps
1.组件将要接收属性的时候 ,初次加载相当于初始化
props,所以初次嘉爱不调用,
- 只有在props变化的时候调用
- 参数是 props对象
6. 钩子的更新
react18之后不支持旧钩子的写法了换成新的写法了- UNSAFE_componentWillMount
- UNSAFE_componentWillReceiveProps
- UNSAFE_componentWillUpdate
7. 图示
钩子
2.生命周期
