js手札-reactjs生命周期

noONE 发布于2019-08-21 10:53 / 2536人阅读

摘要：生命状态已插入真实节点正在重新渲染已经移出真实节点大致顺序两个挂载服务端和客户端都只调用一次在初始化渲染之前调用所以，如果这里调用，则会在中感知到的变化。

生命状态：

</>复制代码 
Mounting：已插入真实DOM节点
Updating：正在重新渲染
Unmounting：已经移出真实节点

Mounting

Updating

大致顺序：

两个挂载：

</>复制代码 
componentWillMount()

</>复制代码 
1、服务端和客户端都只调用一次
2、在初始化渲染之前调用

所以，如果这里调用setState，则会在render中感知到state的变化。

</>复制代码 
componentDidMount()

</>复制代码 
1、仅在客户端有效
2、初始化渲染之后立即调用一次

这时已经有成型的DOM树了，所以可以通过this.getDOMNode()来获取DOM

四个更新

</>复制代码 
componentWillReciverPros(nextProps)

</>复制代码 
1、在接收到新的参数（props）时，会被执行
2、在render之前被调用
3、在初始化渲染的时候，不会被调用

若调用this.setState()并不会引起第二次渲染。

</>复制代码 
shouldComponentUpdate(nextProps, nextState)

</>复制代码 
1、在接收到新的 props或state时，调用
2、在render之前被调用
3、初始化渲染不调用

若返回false，则组件不会更新（即render()不会被执行），同时，componentWillUpdate和componentDidUpdate也不会被执行。

</>复制代码 
componentWillUpdate(nextProps, nextState)

</>复制代码 
1、在接收到新的 props或state前，立刻调用
2、初始化渲染不调用

不能使用this.setState

</>复制代码 
componentDidUpdate(prevProps, prevState)

</>复制代码 
1、在组件更新已经同步到DOM上之后调用
2、初始化渲染不调用

一个移除

</>复制代码 
componentWillUnmount

</>复制代码 
在组件将被移出的时候调用

GPU云服务器云服务器生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86349.html

ReactJS 开发过程中的一些使用心得

摘要：目前开发的项目中为了仿原生效果如果自己去通过重新实现的话成本极大所以不得不使用来作为前端库。可以在这个函数中清理在绑定的事件这个方式很有用。在开发过程中这些生命周期函数是我使用最频繁最常见的操作。 ReactJS作为目前最火的构建用户界面的前端框架，为什么有那么多的前端工程师去追逐它，不仅因为它简单，而且它提供了一系列强大的API让我们摆脱以前繁琐的DOM操作，使我们的逻辑更加清晰，代...

MangoGoing 2019-08-22 10:34 评论0 收藏0
ReactJS问题集结

摘要：引入数据，初始化，设置同步可以获取数据，如何在获取结束后进行条件渲染根据条件的变化，初始化加载一种情况，数据加载完成后，改变条件，渲染另一种情况多个同级兄弟组件渲染，如果没有父级标签包裹要求必须有且仅有一个节点，如何处理不用创建冗余的父级标 Issue1： ajax引入数据，初始化data==null，设置ajax同步async＝false可以获取数据，如何在ajax获取结束后rend...

lwx12525 2019-08-20 14:21 评论0 收藏0
哈姆雷特之 React

摘要：最近两三周在主要在写，在这里写一下，算是个总结。但是打算换成，它是推荐用或，就这样决定把之前的换成了。这里面主要的问题是作用域。总之也并没有那么难。目前看来确实是非常适合于前后端分离的。最近两三周在主要在写 React，在这里写一下，算是个总结。 webpack 我们的后端语言用的是 Go, 对于写网站来说，Go 并没有好的前端资源（js, css，image）的管理方式(打包，压缩...

?xiaoxiao, 2019-08-19 18:10 评论0 收藏0
React技术栈——ReactJS

摘要：将模板语言转为语言，并插入组件组件类第一个字母必须大写对象属性与组件属性一一对应。是例外，它表示组件的所有节点组件的属性可以接受任意值。需要一种验证机制，验证别人使用组件时提供的参数是否合法获取真实节点组件的是。初始化引入三个script: 第一个是React的核心代码，第二react-dom.js是React里面操作DOM的部分，第三个browser.js将J...

Lin_YT 2019-08-19 18:41 评论0 收藏0
Reactjs Mixins

摘要：抛砖引玉实现一个日志功能。一般都会抽出公共的部分。看起来挺完美的，实际上还是有个问题代码的耦合性太强像这种日志功能应该同业务分离，不应该直接出现在业务代码中。如果做过开发，应该很容易想到一个概念面向切面编程。抛砖引玉实现一个日志功能。组件在挂载前打印 Component will mount 组件挂载后打印 Component did mount 不能忍受的写法 v...

xfee 2019-08-21 10:30 评论0 收藏0