react入门(下)

自闭症网瘾萝莉.ら 提交于 2020-02-05 03:07:29

react生命周期

1. 组件的三个生命周期状态:  * Mount:插入真实 DOM  * Update:被重新渲染  * Unmount:被移出真实 DOM2. React 为每个状态都提供了两种勾子(hook)函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用  * componentWillMount()  * componentDidMount() : 已插入真实DOM, 在render之后才会执行  * componentWillUpdate(object nextProps, object nextState)  * componentDidUpdate(object prevProps, object prevState)  * componentWillUnmount()3. 生命周期流程:  1). 第一次初始化渲染显示: render()    * constructor(): 创建对象初始化state           constructor参数接受两个参数props,context           只要组件存在constructor,就必要要写super    * componentWillMount() : 将要插入回调           组件刚经历constructor,初始完数据           组件还未进入render,组件还未渲染完成,dom还未渲染    * render() : 用于插入虚拟DOM回调              render函数会插入jsx生成的dom结构,react会生成一份虚拟dom树,在每一次组件更新时,在此react会通过其diff算法比较更新前后的新旧DOM树,比较以后,找到最小的有差异的DOM节点,并重新渲染    * componentDidMount() : 已经插入回调  2). 每次更新state: this.setSate()    * componentWillUpdate() : 将要更新回调    * render() : 更新(重新渲染)    * componentDidUpdate() : 已经更新回调  3). 删除组件    * ReactDOM.unmountComponentAtNode(document.getElementById('example')) : 移除组件    * componentWillUnmount() : 组件将要被移除回调4.注意:  * 一般会在componentDidMount()中: 开启监听, 发送ajax请求  * 可以在componentWillUnmount()做一些收尾工作: 停止监听组件,将要卸载时调用,一些事件监听和定时器需要在此时清除。  *  componentWillReceiveProps             componentWillReceiveProps在接受父组件改变后的props需要重新渲染组件时用到的比较多
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!