React新旧版本生命周期对比

❶ 过时生命周期：
① componentWillMount
② componentWillReceiveProps
③ componentWillUpdate

❷ 即将过时生命周期：(在新代码中我们应该避免使用它们)
① UNSAFE_componentWillMount
② UNSAFE_componentWillReceivePorps
③ UNSAFE_componentWillUpdate

❸ 新增生命周期
① getDerivedStateFromProps
② getSnapShotBeforeUpdate
③ getDerivedStateFromError
④ componentDidCatch

① static getDerivedStateFromProps(nextProps, prevState)
○ 什么时候调用？
这个方法会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
○ 返回值
返回值是必须的，它应该是一个对象，用于更新state; 如果返回值为null，state不更新。
○ 主要用途？
这个生命周期函数是为了替代componentWillReceiveProps存在的，所以在你需要使用componentWillReceiveProps的时候，就可以考虑使用getDerivedStateFromProps来进行替代。主要是将新的props更新到state上。
【特别说明】：
它是静态方法，所以它没有this(实例对象无法访问)，只能通过类名访问。

class Child extends Component {constructor(props) {super(props);this.state= {info: props.info || "hello world"}
}static getDerivedStateFromProps(nextProps, prevState) {if (nextProps.info!== prevState.info) {return ({info: nextProps.info})}return null;}render() {return (<p>{this.state.info}</p>)}}class App extends Component {constructor(props) {super(props);this.state= {childInfo: "Hello world"}}clickHandler = () => {this.setState({childInfo: "Changed world"})};render() {return (<><Child info={this.state.childInfo}/><button onClick={this.clickHandler}>Click Me</button></>);}
}

② getSnapshotBeforeUpdate(prevProps, prevState)
○ 什么时候调用？
getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。
○ 返回值
应返回 snapshot 的值（或 null）
○ 有什么用途？
它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。

③ static getDerivedStateFromError(error)
○ 什么时候调用？
此生命周期会在渲染阶段后代组件抛出错误后被调用，因此不允许出现副作用。
○ 返回值
它将抛出的错误作为参数，并返回一个值以更新 state
○ 有什么用途？
主要用于封装错误边界用，收集错误信息并做对应处理。

class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state= {hasError: false};}static getDerivedStateFromError(error) {// 更新 state 使下一次渲染可以显降级UIreturn {hasError: true};}render() {if (this.state.hasError) {// 你可以渲染任何自定义的降级UIreturn <h1>Something went wrong.</h1>;}return this.props.children;}
}
// 然后你可以将它作为一个常规组件去使用
<ErrorBoundary><div>Hello world</div>
</ErrorBoundary>

④ componentDidCatch(error, info)
○ 什么时候调用？
此生命周期会在“提交”阶段后代组件抛出错误后被调用，因此允许执行副作用。
○ 参数
error —— 抛出的错误。
info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。
○ 返回值
它将抛出的错误作为参数，并返回一个值以更新 state
○ 有什么用途？
主要用于封装错误边界用，收集错误信息并做对应处理。

class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state= { hasError: false };}static getDerivedStateFromError(error) {// 更新 state 使下一次渲染可以显示降级UIreturn { hasError: true };}componentDidCatch(error, info) {// "组件堆栈" 例子://  in ComponentThatThrows (created by App)//  in ErrorBoundary (created by App)//  in div (created by App)//  in ApplogComponentStackToMyService(info.componentStack);}render() {if (this.state.hasError) {// 你可以渲染任何自定义的降级UIreturn <h1>Something went wrong.</h1>;}return this.props.children;}
}

【特别注意】：
如果发生错误，你可以通过调用 setState 使用 componentDidCatch() 渲染降级 UI，但在未来的版本中将不推荐这样做。可以使用静态 getDerivedStateFromError() 来处理降级渲染。

结论：对于新生命周期③和④作用基本是一致的，都是用于封装错误边界，收集边界下后代组件构造函数中发生的错误信息并作出对应处理。不同的是调用时间和返回参数。

React新旧版本生命周期对比相关推荐

reactjs组件生命周期：componentWillReceiveProps及新旧版本生命周期钩子函数对比
reactjs组件生命周期:componentWillReceiveProps及新旧版本生命周期钩子函数对比
新旧版本表格数据对比差异流程
1.数据合并:将旧版本的数据和新版本的数据放置到同一个表格中. 2.通过vlookup(需要查找的数据,查找数据的范围,查找范围中需要的部分的列序号,false 精确查询 true 模糊查询) 两表 ...
React:新旧生命周期及其对比
文章目录概述生命周期(旧) 挂载时更新时父组件render setState forceUpdate 卸载时生命周期(新) 挂载时更新时卸载时新旧生命周期的对比概述不管是vue还是 ...
React基础学习--新旧生命周期对比（二）
生命周期新旧对比 1. 图示 2. 旧版生命周期代码 <script type="text/babel">// 创建组件class Count extends Reac ...
React之新旧生命周期对比
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
React生命周期总结（新旧版本都有），React即将废弃的勾子
旧版生命周期(16版本) 初始化阶段:由ReactDOM.render()触发 – 初次渲染 constructor() componentWillMount()「新版本不推荐使用」 render() ...
jsonp react 获取返回值_谈谈对 React 新旧生命周期的理解
前言在写这篇文章的时候,React 已经出了 17.0.1 版本了,虽说还来讨论目前 React 新旧生命周期有点晚了,React 两个新生命周期虽然出了很久,但实际开发我却没有用过,因为 Reac ...
vue生命周期和react生命周期对比。
生命周期指的是组件从初始化开始到结束的过程或者是生命周期是描述组件从开始到结束的过程,每个组件都具有生命周期,都对组件通过生命周期给予的钩子函数进行管理. 钩子函数指的是系统某些状态和参数发生改 ...
[react] react16跟之前的版本生命周期有哪些变化？
[react] react16跟之前的版本生命周期有哪些变化? 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题

React新旧版本生命周期对比

React新旧版本生命周期对比

React新旧版本生命周期对比相关推荐

最新文章

热门文章