React生命周期

React 的生命周期:官方API

下面这个方法是组件第一次加载时执行

  1. constructor() :最先调用用
  2. componentWillMount() :render 前立即执行
  3. render() : 插入到DOM
  4. componentDidMount() : render()后立马运行,且只会运行一次

state 或props更新时,会触发render()重新执行,而以下这些方法在render()再次执行前执行:

  1. componentWillReceiveProps(nextProps) : 在接收到新的props时,this.props并未被更新,nextProps 就是新的props
  2. shouldComponentUpdate() :默认是每次state改变时,都会重新render(). 但是它在第一次render不会运行,在forceUpdate()时不会运行。return false时,render()不会执行
  3. componentWillUpdate() : 组件更新(render()确定要执行了)前的一步,这儿不能更改state。 你能想到:shouldComponentUpdate() returnfalse时,它不会运行
  4. render() : 更新DOM
  5. componentDidUpdate(),gengxinDOM后立即执行

组件完结,开始销毁:

  • componentWillUnmount() : 组件被销毁前,一般用来去掉事件监听,或者一些全局绑定,就是那些JS垃圾回收机制不会自动回收的东西

React的其他API:

  • setState() : 修改state
  • forceUpdate():这个不会导致shouldComponentUpdate() 运行,但是子组件的shouldComponentUpdate() 会执行,这个东西要少用。
  • defaultProps : 给props设置默认值。
  • propTypes:给props内的参数设置类型限制,或者必填规则(就是一定要有这个参数)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 组件的生命周期方法分以下三个阶段。 Mounting当创建组件的实例并将其插入到DOM中时,将调用这些方法:con...
    _八神光_阅读 1,109评论 0 0
  • 好比我们人除了短暂的生与死那一瞬之外,生命中剩下的时间都用在了每天活着的状态,对于React中的组件来讲,占其总生...
    YeLqgd阅读 10,518评论 0 7
  • 译自 React Component Lifecycle 每个组件都有若干生命周期函数。如函数名称所示,带有wil...
    KrisLeeSH阅读 564评论 0 0
  • Each component has several "lifecycle methods" that you c...
    暮落晨曦阅读 484评论 0 0
  • 又是一个老生常谈的内容,从ES6起已经开始使用class的方式去创建组件,这种创建方式上的变化也带来了写法和方法上...
    殷灬商阅读 465评论 0 1