千灯网站建设,wordpress获取菜单链接,安卓app开发实例教程,oppo手机网站建设需求分析什么是生命周期#xff1f; 所谓的React生命周期#xff0c;就是指组件从被创建出来#xff0c;到被使用#xff0c;最后被销毁的这么一个过程。而在这个过程中#xff0c;React提供了我们会自动执行的不同的钩子函数#xff0c;我们称之为生命周期函数。**组件的生命周期…什么是生命周期 所谓的React生命周期就是指组件从被创建出来到被使用最后被销毁的这么一个过程。而在这个过程中React提供了我们会自动执行的不同的钩子函数我们称之为生命周期函数。**组件的生命周期大致分为三个阶段组件挂载阶段组件更新阶段组件销毁卸载阶段 ** 生命周期执行顺序
挂载
constructor构造函数在类组件中比较常见getDerivedStateFromPropsrenderrender函数-----只能访问this.props和this.state不允许修改状态和DOM输出componentDidMount组件挂载-------成功render并渲染完成真实DOM之后触发可以修改DOM
更新
getDerivedStateFromPropsshouldComponentUpdaterenderrender函数getSnapshotBeforeUpdatecomponentDidUpdate组件更新--------可以修改DOM
卸载
componentWillUnmount组件销毁
图解 生命周期详解
constructor()
constructor() 在React组件挂载之前被调用一次在为React.Component子类实现构造函数时应在其他语句之前调用 super() super的作用将父类的this对象继承给子类。 通常React构造函数仅用于以下两种情况
来初始化函数内部 state为 事件处理函数 绑定实例 如果不初始化 state 或不进行方法绑定则不需要写 constructor() , 只需要设置 this.state 即可 不能在 constructor()构造函数内部调用 this.setState(), 因为此时第一次 render()还未执行也就意味DOM节点还未挂载 static getDerivedStateFromProps(nextProps, state)
getDerivedStateFromProps() 在调用 render方法之前调用在初始化和后续更新都会被调用 返回值需要返回一个对象来更新 state, 如果没有指定返回值React 会发出警告React 需要用这个返回值来更新/派生组件的 state如果不需要最好直接省略这个方法否则需要返回 null不会进行更新 参数 第一个参数为即将更新的 props值, 第二个参数为上一个状态的 state , 可以比较props 和 state来加一些限制条件防止无用的state更新即 state 的值在任何时候都取决于 props。 注意getDerivedStateFromProps 是一个静态函数静态方法不依赖组件实例而存在。所以不能使用this, 也就是只能作一些无副作用的操作 至于为什么要这样做请移步 Morgan大佬 - 知乎 值得一提的是getDerivedStateFromProps 在更新和挂载两个阶段都会“出镜”。这是因为“派生 state”这种诉求不仅在 props 更新时存在在 props 初始化的时候也是存在的。React 16 以提供特定生命周期的形式对这类诉求提供了更直接的支持。 render()
render() 方法是class组件中唯一必须实现的方法用于渲染dom, render()方法必须返回reactDOM 注意 不要在 render 里面 setState, 否则会触发死循环导致内存崩溃 componentDidMount()
componentDidMount() 在组件挂载后 (插入DOM树后) 立即调用componentDidMount() 是发送网络请求、启用事件监听方法、数据初始化的好时机并且可以在 此钩子函数里直接调用 setState()
shouldComponentUpdate(nextProps, nextState)
shouldComponentUpdate() 在组件更新之前调用可以控制组件是否进行更新 返回true时组件更新 返回false则不更新 包含两个参数第一个是即将更新的 props 值第二个是即将更新后的 state 值可以根据更新前后的 props 或 state 来比较加一些限制条件决定是否更新进行性能优化 不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify()。这样非常影响效率且会损害性能 不要 shouldComponentUpdate 中调用 setState()否则会导致无限循环调用更新、渲染直至浏览器内存崩溃 可以使用内置 PureComponent 组件替代 getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate() 在最近一次的渲染输出被提交之前调用。也就是说在 render 之后即将对组件进行挂载时调用。 它可以使组件在 DOM 真正更新之前捕获一些信息例如滚动位置此生命周期返回的任何值都会作为参数传递给 componentDidUpdate()。如不需要传递任何值那么请返回 null componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行 包含三个参数第一个是上一次props值。 第二个是上一次state值。如果组件实现了 getSnapshotBeforeUpdate() 生命周期不常用第三个是“snapshot” 参数传递 可以进行前后props的比较进行条件语句的限制来进行 setState() , 否则会导致死循环 componentWillUnmount()
componentWillUnmount() 在组件即将被卸载或销毁时进行调用。 此生命周期是取消网络请求、移除监听事件、清理 DOM 元素、清理定时器等操作的好时机 实例展示
下面代码的react版本是16.4.0, 会根据父子组件props改变父组件卸载、重新挂载子组件子组件改变自身状态state这几个操作步骤对其生命周期的执行顺序进行讲解
组件代码展示
父组件Parent.js
import React, { Component } from react;
import { Button } from antd;
import Child from ./child;const parentStyle {padding: 40,margin: 20,backgroundColor: LightCyan,
};const NAME Parent 组件;export default class Parent extends Component {constructor() {super();console.log(NAME, constructor);this.state {count: 0,mountChild: true,};}static getDerivedStateFromProps(nextProps, prevState) {console.log(NAME, getDerivedStateFromProps);return null;}componentDidMount() {console.log(NAME, componentDidMount);}shouldComponentUpdate(nextProps, nextState) {console.log(NAME, shouldComponentUpdate);return true;}getSnapshotBeforeUpdate(prevProps, prevState) {console.log(NAME, getSnapshotBeforeUpdate);return null;}componentDidUpdate(prevProps, prevState, snapshot) {console.log(NAME, componentDidUpdate);}componentWillUnmount() {console.log(NAME, componentWillUnmount);}/*** 修改传给子组件属性 count 的方法*/changeNum () {let { count } this.state;this.setState({count: count,});};/*** 切换子组件挂载和卸载的方法*/toggleMountChild () {const { mountChild } this.state;this.setState({mountChild: !mountChild,});};render() {console.log(NAME, render);const { count, mountChild } this.state;return (div style{parentStyle}divh3父组件/h3Button onClick{this.changeNum}改变传给子组件的属性 count/Buttonbr /br /Button onClick{this.toggleMountChild}卸载 / 挂载子组件/Button/div{mountChild ? Child count{count} / : null}/div);}
}
子组件 Child.js
import React, { Component } from react;
import { Button } from antd;const childStyle {padding: 20,margin: 20,backgroundColor: LightSkyBlue,
};const NAME Child 组件;export default class Child extends Component {constructor() {super();console.log(NAME, constructor);this.state {counter: 0,};}static getDerivedStateFromProps(nextProps, prevState) {console.log(NAME, getDerivedStateFromProps);return null;}componentDidMount() {console.log(NAME, componentDidMount);}shouldComponentUpdate(nextProps, nextState) {console.log(NAME, shouldComponentUpdate);return true;}getSnapshotBeforeUpdate(prevProps, prevState) {console.log(NAME, getSnapshotBeforeUpdate);return null;}componentDidUpdate(prevProps, prevState, snapshot) {console.log(NAME, componentDidUpdate);}componentWillUnmount() {console.log(NAME, componentWillUnmount);}changeCounter () {let { counter } this.state;this.setState({counter: counter,});};render() {console.log(NAME, render);const { count } this.props;const { counter } this.state;return (div style{childStyle}h3子组件/h3p父组件传过来的属性 count {count}/pp子组件自身状态 counter {counter}/pButton onClick{this.changeCounter}改变自身状态 counter/Button/div);}
}
界面展示 从五种组件状态改变的时机来探究生命周期的执行顺序
一、父子组件初始化
父子组件第一次进行渲染加载时
控制台的打印顺序为
Parent 组件 constructor()Parent 组件 getDerivedStateFromProps()Parent 组件 render()Child 组件 constructor()Child 组件 getDerivedStateFromProps()Child 组件 render()Child 组件 componentDidMount()Parent 组件 componentDidMount()
二、子组件修改自身状态 state
点击子组件 [改变自身状态counter] 按钮其 [自身状态counter] 值会 1, 此时控制台的打印顺序为
Child 组件 getDerivedStateFromProps()Child 组件 shouldComponentUpdate()Child 组件 render()Child 组件 getSnapshotBeforeUpdate()Child 组件 componentDidUpdate()
三、修改父组件中传入子组件的 props
点击父组件中的 [改变传给子组件的属性 count] 按钮则界面上 [父组件传过来的属性 count] 的值会 1控制台的打印顺序为
Parent 组件 getDerivedStateFromProps()Parent 组件 shouldComponentUpdate()Parent 组件 render()Child 组件 getDerivedStateFromProps()Child 组件 shouldComponentUpdate()Child 组件 render()Child 组件 getSnapshotBeforeUpdate()Parent 组件 getSnapshotBeforeUpdate()Child 组件 componentDidUpdate()Parent 组件 componentDidUpdate()
四、卸载子组件
点击父组件中的 [卸载 / 挂载子组件] 按钮则界面上子组件会消失控制台的打印顺序为
Parent 组件 getDerivedStateFromProps()Parent 组件 shouldComponentUpdate()Parent 组件 render()Parent 组件 getSnapshotBeforeUpdate()Child 组件 componentWillUnmount()Parent 组件 componentDidUpdate()
五、重新挂载子组件
再次点击父组件中的 [卸载 / 挂载子组件] 按钮则界面上子组件会重新渲染出来控制台的打印顺序为
Parent 组件 getDerivedStateFromProps()Parent 组件 shouldComponentUpdate()Parent 组件 render()Child 组件 constructor()Child 组件 getDerivedStateFromProps()Child 组件 render()Parent 组件 getSnapshotBeforeUpdate()Child 组件 componentDidMount()Parent 组件 componentDidUpdate()
父子组件生命周期执行顺序总结 当子组件自身状态改变时不会对父组件产生副作用的情况下父组件不会进行更新即不会触发父组件的生命周期 当父组件中状态发生变化包括子组件的挂载以及卸载时会触发自身对应的生命周期以及子组件的更新 render 以及 render 之前的生命周期则 父组件先执行render 以及 render之后的声明周期则子组件先执行并且是与父组件交替执行 当子组件进行卸载时只会执行自身的 componentWillUnmount 生命周期不会再触发别的生命周期
