ReactJs 的各个版本生命周期、API变化 汇总(一、V16.0.0) (2)

当父组件 re-render 当前组件的时候,用于 props 并未发生改变,但是 也会执行 componentWillReceiveProps 这个方法。 所以这里就需要你进行 当前值 和 nextProps 对比 来进行下一步的操作。

此方法不会在 初始化 对时候就执行的。

唯一会执行这个方法对就是 props 更新发生变化的时候。这也是正确的使用当前 api 的场景。

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

让React知道组件的输出是否不受当前状态或道具更改的影响

是在每个状态更改时重新呈现 时候的默认行为。

当有新的 props 和 state 被接受的 之前 就会 调用此方法

在 初始化 render 和 forceUpdate方法被调用的时候,这个方法不会被调用。

返回 fasle 的时候不会 防止 他们的组件组 进行 重新渲染。

componentWillUpdate()

componentWillUpdate(nextProps, nextState)

此方法 比 shouldComponentUpdate 多了一个 immediately

此方方法是为了 执行一些准备,在 updata 之前。

在此方法中不能 执行 setState() ,也不能做任何事情,除了 dispatch a Redux action 等。

如果你需要 更新 state 或者 props 的结果,你可以 使用 componentWillReceiveProps()

componentDidUpdate()

componentDidUpdate(prevProps, prevState)

在 updating 发生之后立即执行 componentDidUpdate

在此方法 是一个机会来 处理 Dom 当 组件 update 之后。

这也是一个好的地方来处理网络请求,当 props 发生改变的时候。

如果 props 没发生改变,则不需要发送 ajax 请求。

1-3 Unmounting (解除绑定阶段)

componentWillUnmount()

当组件被卸载和销毁的时候此方法马上被调用。

同时 也可以 清理 一些方法。例如 无效的 timers 、取消ajax请求、一些订阅

1-4 Error Handling (错误处理阶段)

componentDidCatch()

componentDidCatch(error, info)

错误边界是响应组件,这些组件捕捉子组件树中的任何位置的JavaScript错误,记录这些错误,并显示一个回退UI,而不是崩溃的组件树。错误边界在呈现、生命周期方法和下面整个树的构造函数中捕获错误。

如果类组件定义了这个生命周期方法,它就会成为一个错误边界。在其中调用setState()允许您在下面的树中捕获未处理的JavaScript错误并显示回退UI。只使用错误边界从意外异常中恢复;不要试图用它们来控制流程。

2、 Other APIs 2-1 setState() (数据变更) 2-2 forceUpdate() (强制数据变更) 3、 Class Properties (类的属性) 3-1 defaultProps(默认的 props) 3-2 displayName(展示名称) 4、Instance Properties (实例属性) 4-1 props(父组件传递进来的数据) 4-2 state(本地组件的数据) 3、 回顾

可能就会有同学问了,为啥 第二部分的内容不讲了?
答: 这真的没什么好讲的。
以上则是 React V16.0.0 的全部内容,欢迎大家一起讨论~后面还有 关于剩下版本的 apis 变化的介绍,
主要是以 为什么 react 开发组要 干掉这些 api 以及 新的 api 能解决什么问题为出发点。介绍 ReactJS 这些年的进化
帮助大家一起来走进这个框架。

GitHub 地址:(欢迎 star 、欢迎推荐 : )

ReactJs 的各个版本生命周期、API变化 汇总

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsppys.html