东莞网络营销师培训学校,如何进行搜索引擎优化?,外贸soho虚拟公司做网站,wordpress的模板目录在哪里概述
生命周期就是一个组件从诞生到销毁的全过程(包含错误捕获#xff0c;这里暂且不聊这个)react 在组件的生命周期中注册了一系列的钩子函数支持开发者在其中嵌入代码#xff0c;并在适当的时机运行生命周期本质上就是组件中的钩子函数#xff0c;主要有三个主要的钩子 挂…概述
生命周期就是一个组件从诞生到销毁的全过程(包含错误捕获这里暂且不聊这个)react 在组件的生命周期中注册了一系列的钩子函数支持开发者在其中嵌入代码并在适当的时机运行生命周期本质上就是组件中的钩子函数主要有三个主要的钩子 挂载更新卸载
首次挂载 1 初始化 constructor 同一个类组件对象只会运行一次所以经常来做一些初始化的操作同一个组件对象被多次创建它们的 constructor 互不干扰注意 在 constructor 中尽量避免(禁止) 使用 setStatesetState会造成页面的重新渲染但是在 初始化 阶段页面都还没有将真实dom挂载到页面上是没有任何重新渲染的意义的除异步情况比如 setInterval 中使用 setState 是没问题的因为在执行的时候页面早已渲染完成但也最好不要使用容易引起奇怪的问题参考constructor(props) {super(props);this.state {num: 1}// 不可以直接warningthis.setState({num: this.state.num 1});// 可以使用但不建议setInterval(() {this.setState({num: this.state.num 1});}, 1000);
}2 获取最新的属性和状态 static getDerivedStateFromProps 该方法是一个静态属性静态属性就是为了不让使用 this 和 setState在16版本之前不存在在新版生命周期中主要用于取代 componentWillMount 和 comonentWillReceiveProps因为这两个老生命周期方法在协议开发者不规范的使用下极易产生一些反模式的 bug因为是静态方法所以你在其中根本拿不到 this, 更不可能调用 setState该方法在挂载阶段和更新阶段都会运行它有两个参数 props 和 state 当前的属性值和状态它的返回值会合并掉当前的状态 (state) 如果返回了非 Object 的值那么它啥都不会做如果返回的是 Object, 那它将会跟当前的状态合并可以理解为 Object.assign, 通常情况下几乎不怎么使用该方法/*** 静态方法首次挂载和更新渲染都会运行该方法
* props 当前属性
* state 当前状态
*/
static getDerivedStateFromProps(props, state) {// return 1; // 没用return {num: 999, // 合并到当前 state 对象}
}3 创建 vDOM render 最重要的生命周期没有之一用来生成虚拟节点vDom树该方法只要遇到需要重新渲染都会运行同样在 render 中也严禁使用 setState, 因为会导致无限递归重新渲染导致 爆栈render() {// 严禁使用this.setState({num: 1})return ((this.state.num)/)
}4 挂载到页面渲染成真实Dom componentDidMount 该方法只会运行一次在 首次渲染 时页面将 真实 dom 挂载完毕之后运行通常在这里做一些异步操作比如开启定时器发起网络请求获取真实DOM等在该方法中可以大胆使用 setState, 因为页面已经渲染完成执行完该钩子函数后组件正式进入到 活跃 状态componentDidMount() {// 初始化或异步代码this.setState({})setInterval(() {}); // 简单模拟document.querySelectorAll(div);
}更新阶段 更新阶段会更新 state 或 更新 props 1 获取最新的属性和状态 static getDerivedStateFromProps 2 是否重新渲染 shouldComponentUpdate 在执行完 static getDerivedStateFromProps 后会执行该钩子函数该方法通常用来做 性能优化它的返回值 (boolean) 决定了是否要进行 渲染 更新该方法有两个参数 nextProps 和 nextState 表示此次更新(下一次)的属性和状态通常我们会将当前值与此次要更新的值做比较来决定是否要进行重新渲染在react 中官方提供了一个基础版的优化组件 PureComponent 就是一个 HOC 高阶组件内部实现就是帮我们用 shouldComponentUpdate 做了浅比较注意继承了 PureComponent 后, 不需要再使用 SCU 进行优化/*** 决定是否要重新进行渲染* nextProps 此次更新的属性* nextState 此次更新的状态* returns boolean*/
shouldComponentUpdate(nextProps, nextState) {// 伪代码如果当前的值和下一次的值相等那么就没有更新渲染的必要了if (this.props nextProps this.state nextState) {return false;}return true;
}3 更新vDOM render 4 获取更新之前的状态 getSnapshotBeforeUpdate 如果 shouldComponentUpdate 返回是 true,那么就会运行 render 重新生成虚拟 DOM 树来进行对比更新该方法运行在 render 之后表示 真实 DOM 已经构建完成但还没有渲染到页面中可以理解为更新前的 快照通常用来做一些附加的DOM操作比如突然想针对某个 class 的真实元素做一些事情那么就可以在此方法中获取元素并修改该函数有两个参数 prevProps 和 prevState 表示此次更新前的属性和状态该函数的返回值 snapshot会作为 componentDidUpdate 的第三个参数/*** 获取更新前的快照通常用来做一些附加的DOM操作* prevProps 更新前的属性* prevState 更新前的状态*/
getSnapshotBeforeUpdate(prevProps, prevState) {// 获取真实DOM在渲染到页面前作一些附加操作...document.querySelectorAll(div).forEach(it it.innerHTML 123)return componentDidUpdate的第三个参数
}5 更新后挂载成真实DOM componentDidUpdate 该方法是 更新阶段 最后运行的 钩子函数跟 getSnapshotBeforeUpdate 不同的是它运行时间点是在 真实DOM 挂载到页面后通常也会使用该方法来操作一些真实的DOM它有三个参数分别为: prevProps, prevState, snapshot, 跟 Snapshot 钩子函数一样表示更新前的属性状态Snapshot 钩子函数的返回值/*** prevProps 更新前的属性* prevState 更新前的状态* snapshot getSnapshotBeforeUpdate 的返回值*/
componentDidUpdate(prevProps, prevState, snapshot) {document.querySelectorAll(div).forEach(it it.innerHTML snapshot)
}卸载阶段
组件被卸载 componentWillUnMount 该 钩子函数 属于卸载阶段中唯一的方法如果组件在渲染的过程中被卸载了React会报出 Warning: Can’t perform a React state update on an unmounted component 的警告所以通常爱组件被卸载时做清除副作用的操作componentWillUnmount() {// 组件倍卸载前清理副作用clearInterval(timer1);clearTimeout(timer2);this.setState () {};
}
