Evan Zou

Welcome to my blog.

Javascript follower.


Hi, I am Evan, nice to meet you all.

React Lifecycle(生命周期)

按照我的理解,生命周期主要分为一下几个步骤

  • componentWillMount()

在组件第一次渲染之前调用,这个是在 render 方法调用前可修改 state 的最后一次机会。这个方法基本不会用到。

  • render()

渲染虚拟 dom。

  • componentDidMount()

在组件第一次渲染后立即调用。一般会在这个方法里执行 ajax,setinterval,settimeout 等方法。因为 ajax 是异步请求,如果在 componentWillMount()里执行的话,可能会在元素渲染出来之前执行,那么就会造成 ajax 请求失败。

  • componentWillUnmount()

注销在 componentDidMount()里注册的方法和函数,释放内存。

  • compoentWillReceiveProps()

在组件接受到新的 props 时调用,每当组件更新 rprops 时就会被调用,初次渲染不会调用。在这里可以改变 state。

  • shouldComponentUpdate()

顾名思义,就是组件是否需要更新,是的话返回 true,否则返回 false,初次渲染不会调用。

  • componentWillUpdate()

组件接收到新的 props 或者 state 但是还未调用时执行,初次渲染不会调用。这里不能改变 state,或者是加判断改变 state。否则会一直 update,进入死循环。

  • render()

渲染虚拟 dom。

  • componnetDidUpdate()

在组件完成更新时立即调用,初次渲染不会调用。

最近的文章

React 片段(fragments)详解

一. 动机以下的例子简洁清晰的反映了 fragments 的作用,在生产过程中,经常会遇到这种情况:首先,是在 Table 组件中插入 Columns 组件:{% highlight ruby %}class Table extends React.Component { render() { return ( <table> <tr> </tr>...…

React继续阅读
更早的文章

React Reconciliation(调和)

动机当使用 React 时,在下一个 steate 或 props 更新时,render()函数将会返回一个不同的 React 树,接下来 React 会找出最高效地方式更新 UI。目前存在大量通用的方法能够以最少的操作步骤将一个树转化成另外一棵树。然而,这个算法是复杂度为 O(n3),其中 n 为树中元素的个数。即如果有 1000 个元素,那么每次更新都要进行 10 亿次比较。然而,React 给予一下两个假设实现了复杂度为 O(n)的算法,即每次更新只需要进行 1000 次的比较: ...…

React继续阅读