美文网首页
react生命周期

react生命周期

作者: 郝加升 | 来源:发表于2018-10-11 13:56 被阅读0次

上边的数据是当前的state和props,下边是传入的数据

第一次渲染生命周期:


更新state 

更新props

forceUpdate更新:


    

新的生命周期:

getDerivedStateFromProps:作用是返回一个对象(必须得是对象或者数组)来更新state的数据。更新当前的state和新的即将要更新的新state。

getSnapshotBeforeUpdate:作用是返回一个数据,作为componentDidUpdate的第三个参数传入。

第一次渲染: 


更新state 


更新props 



forceUpdate更新:


componentWillMount:在第一次渲染时第一个运行的生命周期,可以修改state,修改的state将在下一个生命周期开始就可以直接用,它接下来的生命周期是render和componentDidMount,所以没法知道传入的参数。也可以修改props,修改了props以后重新运行生命周期。

render: 可以修改state和props,但是很危险的操作,都是重新运行一遍生命周期。

componentDidMount:在第一次渲染时,渲染结束运行的生命周期,修改state很安全,也可以修改props,都是重新运行一遍生命周期

componentWillReceiveProps:在更新props时运行的生命周期,可以修改state或者修改props。如果修改了state以后,之后的生命周期传入的state参数会更新。修改props在这个生命周期里是个很危险的操作,会重新运行一遍生命周期。

shouldComponentUpdate:在更新props或者state时运行的生命周期,返回true或者fase,一旦返回的是false,接下来的生命周期都不再运行。这里可以修改props或者state,但是很危险,都是重新运行一遍生命周期。

componentWillUpdate:在修改props或者state即将渲染时运行的生命周期。可以修改state或者props,但是很危险,都是重新运行一遍生命周期。

componentDidUpdate:在修改props或者state渲染完render运行的生命周期。可以修改state或者props,但是很危险,都是重新运行一遍生命周期。

getDerivedStateFromProps: 无论什么情况下都是第一个运行的生命周期。这个生命周期是类的静态方法,这个函数返回一个对象(必须得是对象或者数组)来更新state的数据。

更新当前的state和新的即将要更新的新state。不能访问实例,所以不能修改state和props。但是也可以给全局增加一个变量,在componentDidMount的时候赋值实例。这样子可以修改props和state,但是很危险。

这个生命周期在第一次渲染时代替了componentWillMount。

在修改state代替了componentWillUpdate。

在修改props时代替了componentWillReceiveProps和componentWillUpdate生命周期。

getSnapshotBeforeUpdate:在更新props或者state时,在rander渲染完之后在componentDidUpdate之前时运行这个生命周期。作用是返回一个数据,作为componentDidUpdate的第三个参数传入。

可以修改state和props,但是很危险的操作,都是重新运行一遍生命周期。

更新state或者props时,在render和componentDidUpdate之间加了这个生命周期。

componentDidCatch:抓捕错误的生命周期

相关文章

  • React概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • React基础篇之组件的生命周期

    引出生命周期 react生命周期(旧) react生命周期(新) getSnapshotBeforeUpdate的...

  • React生命周期

    React v16.0前的生命周期 React v16.4+ 的生命周期图 React v16.9后这些生命周期钩...

  • React v16 生命周期

    React 16 生命周期 React 16.3 新增的生命周期方法 逐渐废弃的生命周期方法: 一般将生命周期分成...

  • 学习并实现react (4)

    实现生命周期 生命周期介绍 React 生命周期图 React 子组件在父组件下的生命周期流程 实现 compon...

  • React面试题 整理脑图

    react基础 React生命周期 react-router react进阶 react Hooks redux 其他

  • react/vue常见问题整理

    一、react 1. react生命周期 react 16生命周期相对于15的变化:componentWillMo...

  • React 组件生命周期

    组件生命周期 参考阅读: component-lifecycle react组件生命周期过程说明 react 组件...

  • 《深入React技术栈》学习笔记Ⅲ

    以下的生命周期都是在 React 15 的生命周期, React 16 的生命周期 API 已经发生变化。Reac...

  • React总结

    [toc] 1.React组件生命周期 1.1 生命周期图 组件的生命周期的图如下: 具体可参考React 组件生...

网友评论

      本文标题:react生命周期

      本文链接:https://www.haomeiwen.com/subject/hwayaftx.html