react新生命周期

#react生命周期
组件生命周期的三个阶段：
mounting updating unmounting

##旧的生命周期

#Mounting（加载阶段：涉及6个钩子函数）
##construtor():
###加载的时候调用一次，可以初始化state
##getDefaultProps():
###该方法组件加载过程中只会调用一次，如果父组件未传入props可以为组件设置默认的属性
##getInitialState():
###可以直接在constructor中定义this.state
##componentWillMount():
###组件加载时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state
##render():
###react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行
##componentDidMount():
###组件渲染之后调用，只调用一次,可在这里更新状态，发送请求，获取dom元素等

#Updating（更新阶段：涉及5个钩子函数)
##componentWillReceiveProps(nextProps):
###组件加载时不调用，组件接受新的props时调用
##shouldComponentUpdate(nextProps, nextState):
###组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）
##componentWillUpdata(nextProps, nextState):
###组件加载时不调用，只有在组件将要更新时才调用，此时可以修改state
##render():
###react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行
##componentDidUpdate():
###组件加载时不调用，组件更新完成后调用
#Unmounting（卸载阶段：涉及1个钩子函数）
###componentWillUnmount():
###组件渲染之后调用，只调用一次
##新的生命周期

##static getDerivedStateFromProps（nextProps, prevState):
###一个静态方法，所以不能在这个函数里面使用this，这个函数有两个参数props和state，分别指接收到的新参数和当前的state对象，这个函数会返回一个对象用来更新当前的state对象，如果不需要更新可以返回null该函数会在挂载时，接收到新的props，调用了setState和forceUpdate时被调用
class ExampleComponent extends React.Component {
state = {
isScrollingDown: false,
lastRow: null
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.currentRow !== prevState.lastRow) {
return {
isScrollingDown:
nextProps.currentRow > prevState.lastRow,
lastRow: nextProps.currentRow
}
}
return null
}
}

##getSnapshotBeforeUpdate(prevProps, prevState):
###这个方法在render之后，componentDidUpdate之前调用，有两个参数prevProps和prevState，表示之前的属性和之前的state，这个函数有一个返回值，会作为第三个参数传给componentDidUpdate，如果你不想要返回值，请返回null，不写的话控制台会有警告，该方法可以替代componentWillUpdate
class ScrollingList extends React.Component {
constructor(props) {
super(props);
this.listRef = React.createRef();
}

  getSnapshotBeforeUpdate(prevProps, prevState) {// Are we adding new items to the list?// Capture the scroll position so we can adjust scroll later.if (prevProps.list.length < this.props.list.length) {const list = this.listRef.current;return list.scrollHeight - list.scrollTop;}return null;}componentDidUpdate(prevProps, prevState, snapshot) {// If we have a snapshot value, we've just added new items.// Adjust scroll so these new items don't push the old ones out of view.// (snapshot here is the value returned from getSnapshotBeforeUpdate)if (snapshot !== null) {const list = this.listRef.current;list.scrollTop = list.scrollHeight - snapshot;}}render() {return (<div ref={this.listRef}>{/* ...contents... */}</div>);}
}

##为何移除 componentWillMount

因为在 React 未来的版本中，异步渲染机制可能会导致单个组件实例可以多次调用该方法。很多开发者目前会将事件绑定、异步请求等写在 componentWillMount 中，一旦异步渲染时 componentWillMount 被多次调用，将会导致：

进行重复的时间监听，无法正常取消重复的 Listener，更有可能导致内存泄漏
发出重复的异步网络请求，导致 IO 资源被浪费
在服务端渲染时，componentWillMount 会被调用，但是会因忽略异步获取的数据而浪费 IO 资源
现在，React 推荐将原本在 componentWillMount 中的网络请求移到 componentDidMount 中。至于这样会不会导致请求被延迟发出影响用户体验，React 团队是这么解释的：
componentWillMount、render 和 componentDidMount 方法虽然存在调用先后顺序，但在大多数情况 ## #下，几乎都是在很短的时间内先后执行完毕，几乎不会对用户体验产生影响。 # #

##为何移除 componentWillUpdate

大多数开发者使用 componentWillUpdate 的场景是配合 componentDidUpdate，分别获取 rerender 前后的视图状态，进行必要的处理。但随着 React 新的 suspense、time slicing、异步渲染等机制的到来，render 过程可以被分割成多次完成，还可以被暂停甚至回溯，这导致 componentWillUpdate 和 componentDidUpdate 执行前后可能会间隔很长时间，足够使用户进行交互操作更改当前组件的状态，这样可能会导致难以追踪的 BUG。

React 新增的 getSnapshotBeforeUpdate 方法就是为了解决上述问题，因为 getSnapshotBeforeUpdate 方法是在 componentWillUpdate 后（如果存在的话），在 React 真正更改 DOM 前调用的，它获取到组件状态信息更加可靠。

除此之外，getSnapshotBeforeUpdate 还有一个十分明显的好处：它调用的结果会作为第三个参数传入 componentDidUpdate，避免了 componentWillUpdate 和 componentDidUpdate 配合使用时将组件临时的状态数据存在组件实例上浪费内存，getSnapshotBeforeUpdate 返回的数据在 componentDidUpdate 中用完即被销毁，效率更高。

##为何移除componentWillRecieveProps

componentWillReceiveProps

错误做法：

根据前后props数据的对比更新state

根据前后props数据的对比请求异步数据

缺点：

更新state方式不优雅

职能不专，同时进行setState和获取异步数据等会触发新一轮组件更新的操作

渲染可被中断，会多次请求数据

##替代方案
componentWillRecieveProps == getDerivedStateFromProps + componentDidUpdate
componentWillUpdate == getSnapshotBeforeUpdate

react新生命周期相关推荐

React新生命周期--getDerivedStateFromProps、getSnapshotBeforeUpdate
在说新的生命周期之前,我们先了解下原来的生命周期: 挂载卸载过程 1.1.constructor() constructor()中完成了React数据的初始化,它接受两个参数:props和contex ...
附实例！图解React的生命周期及执行顺序
本文由云+社区发表作者:前端林子 1.七个可选的生命周期可以结合下图来看: (1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setSta ...
react初识生命周期
好多朋友都在问我react生命周期执行的顺序今天就说一下吧, react有三种构建组件的方法: 第一呢,就是React.createClass(),ES5写法现在用的比较少第二呢:ES6 clas ...
react之生命周期
目录一.什么是react? 二.react的生命周期三.对于react生命周期的思考熟练使用react开发项目之后,最近在学习react的底层原理以及源码,顺便总结一下react的生命周期. 一 ...
React的生命周期（面试必问）
React的生命周期两张图带你理解 React的生命周期 React的生命周期(旧) class Life extends React.Component{// 构造器constructor(pro ...
react组件生命周期_React组件生命周期-挂钩/方法介绍
react组件生命周期 React components have several lifecycle methods that you can override to run your code a ...
[react] 说说react的生命周期有哪些？
[react] 说说react的生命周期有哪些? 装载阶段组件第一次被渲染时的阶段,这一阶段相关的生命周期函数有: constructor componentWillMount render com ...
react常用生命周期流程图
简述本文将常用的react生命周期绘制成了一张流程图,便于理解和记忆; react中每个组件都包含"生命周期方法",我们可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法 ...
简单认识React的生命周期
一. React的生命周期这里render渲染函数会执行两次,第一次是当组件初始化完成的时候,第二次是当组件完成从数据的修改的时候再执行一次 1.创建和初始化到的生命周期: (1) getDefau ...

react新生命周期

react新生命周期相关推荐

最新文章

热门文章