React全家桶React生命周期

Posted 糖^O^

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React全家桶React生命周期相关的知识,希望对你有一定的参考价值。

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 挂载完成后执行

👉👉👉更新阶段

  1. getDerivedStateFromProps: 此方法在更新个挂载阶段都可能会调用

  2. shouldComponentUpdate: shouldComponentUpdate(nextProps, nextState),有两个参数nextProps和nextState,表示新的属性和变化之后的state,返回一个布尔值,true表示会触发重新渲染,false表示不会触发重新渲染,默认返回true,我们通常利用此生命周期来优化React程序性能

  3. getSnapshotBeforeUpdate: getSnapshotBeforeUpdate(prevProps, prevState),这个方法在render之后,componentDidUpdate之前调用,有两个参数prevProps和prevState,表示之前的属性和之前的state,这个函数有一个返回值,会作为第三个参数传给componentDidUpdate

  4. componentDidUpdate: componentDidUpdate(prevProps, prevState, snapshot),该方法getSnapshotBeforeUpdate方法之后被调用,有三个参数prevProps,prevState,snapshot,表示之前的props,之前的state,和snapshot。
    第三个参数是getSnapshotBeforeUpdate返回的,如果触发某些回调函数时需要用到 DOM 元素的状态,则将对比或计算的过程迁移至getSnapshotBeforeUpdate,然后在 componentDidUpdate中统一触发回调或更新状态。

✨✨✨卸载阶段

componentWillUnmount: 当组件被卸载或者销毁了就会调用,我们可以在这个函数里去清除一些定时器,取消网络请求,清理无效的DOM元素等垃圾清理工作。

4、react中性能优化的方案

  1. shouldComponentUpdate

控制组件自身或者子组件是否需要更新,尤其在子组件非常多的情况下, 需要进行优化。

  1. PureComponent

PureComponent会帮你 比较新props 跟 旧的props, 新的state和老的state(值相等,或者

对象含有相同的属性、且属性值相等 ),决定shouldcomponentUpdate 返回true 或者false

注意:

如果你的 state 或 props 『永远都会变』,那 PureComponent 并不会比较快,因为shallowEqual
也需要花时间。

以上是关于React全家桶React生命周期的主要内容,如果未能解决你的问题,请参考以下文章

ReactReact全家桶React 生命周期+虚拟DOM+Diff算法

ReactReact全家桶React 生命周期+虚拟DOM+Diff算法

React全家桶+AntD 共享单车后台管理系统开发

React全家桶详细讲解-图文并茂

React全家桶详细讲解-图文并茂

React自制全家桶七React实现ajax请求