美文网首页
react生命周期

react生命周期

作者: 头头_d92d | 来源:发表于2018-11-13 14:43 被阅读0次

    初始化时

    • componentWillMount():只在组件初始化时调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state
    • render():创建dom,此时不能更改state
    • componentDidMount():请求数据(ajax)一般在这个函数内, 组件渲染之后调用,只调用一次

    更新时

    • componentWillReceiveProps(nextProps):组件初始化时不调用,组件接受新的props时调用,父组件向子组件传数据时,如果数据改变了,就要在子组件的此生命周期中重新获取nextProps后再进行渲染
    • shouldComponentUpdate(nextProps, nextState):组件接受新的state或者props时调用,可以在此对比前后两个props和state是否相同,如果相同则不更新,不相同再去更新,这样可以节省性能
    • componentWillUpdate(nextProps, nextState):组件初始化时不调用,只有在组件将要更新时才调用。在此方法里禁止修改state属性,否则程序将陷入死循环
    • render():更新dom树,此时不能更改state
    • componentDidUpdate():组件初始化时不调用,组件更新完成后调用,在此方法里禁止修改state属性,否则程序将陷入死循环

    卸载时

    • componentWillUnmount():组件将要卸载时调用,一些事件监听和定时器需要在此时清除。
      生命周期流程图
      如果组件有嵌套时,都是从父组件的componentWillMount开始,然后是父组件的render,渲染到子组件时开始子组件的componentWillMount→子组件的render→子组件的componentDidMount,直到子组件的周期结束,才继续开始父组件的周期直到父组件的render结束→父组件的componentDidMount

    相关文章

      网友评论

          本文标题:react生命周期

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