旅游网站B2C网站网络推广服务
React生命周期
1、初始化阶段
-
componentDidMount:render之前最后一次修改状态的机会
-
render:只能访问this.props和this.state,不允许修改状态和DOM输出
-
componentDidMount:成功render并渲染完成真实DOM之后触发
2、旧生命周期
👉👉👉加载阶段
-
componetWillupdate, 更新前记录 DOM 状态,可能会做一些处理，与componentDidUpdate相隔时间如果过长， 会导致 状态不太信 -
取得默认属性，初始状态在
constructor中完成（运行一次，可读数据，可同步修改state，异步修改state需要setState,setState在实例产生后才可以使用，可以访问到props） -
componentWillMount在ssr中 这个方法将会被多次调用， 所以会重复触发多遍，同时在这里如果绑定事件，将无法解绑变得不够安全 -
componentWillReceiveProps外部组件多次频繁更新传入多次不同的 props，会导致不必要的异步请求 -
props改变
componentWillReceiveProps(组件加载时候不调用，组件接受新的props时调用) -
shouldComponentUpdate是否需要更新（return true就会更新dom，false阻止更新）
👉👉👉👉卸载阶段
compoenentWillUnmount (即将卸载，可以做一些组件相关的清理工作，如青春计时器、网络请求等 )常用
组件卸载： unmountComponentAtNode(document.getElementById(‘root’))
所有子组件挂载完成，才标记着父组件挂载完成，父组件更新，子组件更新，子组件更新，子组件不更新
新生命周期
（1）getDerivedStateFromProps 第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子) ，返回一个对象作为新的state，返回null则说明不需要在这里更新state
//老的生命周期的写法
componentDidMount() {
if(this.props.value!==undefined){
this.setState({
current:this.props.value
})
}
}
componentWillReceiveProps(nextProps){
if(nextProps.value !==undefined){
this.setState({
current:nextProps.value
})
}
}
// 新的生命周期写法
static getDerivedStateFromProps(nextProps) {
if(nextProps.value!==undefined){
return {
current:nextProps.value
}
}
return null
}
(2) getSnapshotBeforeUpdate 取代了 componetWillUpdate ,触发时间为update发生的时候，在render之后dom渲染之前返回一个值，作为componentDidUpdate的第三个参数。
//新的数据不断插入数据前面， 导致我正在看的数据向下走，如何保持可视区依旧是我之前看的数据呢？
getSnapshotBeforeUpdate(){
return this.refs.wrapper.scrollHeight
}
componentDidUpdate(prevProps, prevState,preHeight) {
//if(preHeight===200)return ;
this.refs.wrapper.scrollTop +=this.refs.wrapper.scrollHeight-preHeight
}
<div style={{height:"200px",overflow:"auto"}}} ref="wrapper">
<ul>
.........
</ul>
</div>🌞🌞🌞加载阶段
- 渲染前 static getDerivedStateFromProps(props,state)
无法访问this.props,state是更新后的必须返回一个对象，用来更新state或者null 不更新必须要初始state
state的值在任何时候都取决于props时
- render
必须return jsx|string|number|null 不会直接于浏览器交互：不要操作DOM｜和数据
- componentDidMount 挂载完成后执行
👉👉👉更新阶段
-
getDerivedStateFromProps: 此方法在更新个挂载阶段都可能会调用
-
shouldComponentUpdate:
shouldComponentUpdate(nextProps, nextState)，有两个参数nextProps和nextState，表示新的属性和变化之后的state，返回一个布尔值，true表示会触发重新渲染，false表示不会触发重新渲染，默认返回true,我们通常利用此生命周期来优化React程序性能 -
getSnapshotBeforeUpdate:
getSnapshotBeforeUpdate(prevProps, prevState)，这个方法在render之后，componentDidUpdate之前调用，有两个参数prevProps和prevState，表示之前的属性和之前的state，这个函数有一个返回值，会作为第三个参数传给componentDidUpdate -
componentDidUpdate:
componentDidUpdate(prevProps, prevState, snapshot)，该方法getSnapshotBeforeUpdate方法之后被调用，有三个参数prevProps，prevState，snapshot，表示之前的props，之前的state，和snapshot。
第三个参数是getSnapshotBeforeUpdate返回的,如果触发某些回调函数时需要用到 DOM 元素的状态，则将对比或计算的过程迁移至getSnapshotBeforeUpdate，然后在 componentDidUpdate中统一触发回调或更新状态。
✨✨✨卸载阶段
componentWillUnmount: 当组件被卸载或者销毁了就会调用，我们可以在这个函数里去清除一些定时器，取消网络请求，清理无效的DOM元素等垃圾清理工作。
4、react中性能优化的方案
- shouldComponentUpdate
控制组件自身或者子组件是否需要更新，尤其在子组件非常多的情况下， 需要进行优化。
- PureComponent
PureComponent会帮你 比较新props 跟 旧的props， 新的state和老的state（值相等,或者
对象含有相同的属性、且属性值相等 ），决定shouldcomponentUpdate 返回true 或者false
注意：
如果你的 state 或 props 『永远都会变』，那 PureComponent 并不会比较快，因为shallowEqual
也需要花时间。