六安做网站seo,源码买卖网站,网页模板网站,搜题在线使用网页版最近在学习React#xff0c;发现其中的生命周期跟Vue有一些共同点#xff0c;但也有比较明显的区别#xff0c;并且执行顺序也值得讨论一下#xff0c;于是总结了一些资料在这里#xff0c;作为学习记录。
v17.0.1后生命周期图片 初始化阶段
由ReactDOM.render()触发 —…最近在学习React发现其中的生命周期跟Vue有一些共同点但也有比较明显的区别并且执行顺序也值得讨论一下于是总结了一些资料在这里作为学习记录。
v17.0.1后生命周期图片 初始化阶段
由ReactDOM.render()触发 —— 初次渲染
constructor() —— 类组件中的构造函数static getDerivedStateFromProps(props, state) 从props得到一个派生的状态【新增】render() —— 挂载组件componentDidMount() —— 组件挂载完成 比较常用 总结 constructor 对标 Vue中的beforeCreate/created componentDidMount 对标 Vue中的 Mounted 在一个完整的生命周期中constructor 与 componentDidMount 只会执行一次。 在一个完整的生命周期中render会执行多次 注意 在React中我们在componentDidMount 中发请求绝对不在constructor 中发请求。 更新阶段
由组件内部this.setSate()或父组件重新render触发或强制更新forceUpdate()
getDerivedStateFromProps() —— 从props得到一个派生的状态 【新增】shouldComponentUpdate() —— 组件是否应该被更新默认返回truerender() —— 挂载组件getSnapshotBeforeUpdate() —— 在更新之前获取快照【新增】componentDidUpdate(prevProps, prevState, snapshotValue) —— 组件完成更新。 总结 触发组件更新的方式常用两种 props 值的改变setState() 改变state 更新阶段触发的钩子函数有两个 rendercomponentDidUpdate render与componentsDidUpdate 都可以拿到更新后的值。 render与componentsDidUpdate 中都不能调用setState 会造成死循环。 注意 不论DOM中有没有使用数据钩子函数都会被触发。与vue不同 react中的更新指的是数据更新而非视图更新。与vue不同 卸载组件
由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount() —— 组件即将卸载 重要的勾子
render初始化渲染或更新渲染调用componentDidMount开启监听, 发送ajax请求componentWillUnmount做一些收尾工作, 如: 清理定时器 即将废弃的勾子
componentWillMountcomponentWillReceivePropscomponentWillUpdate 现在使用会出现警告下一个大版本需要加上UNSAFE_前缀才能使用以后可能会被彻底废弃不建议使用。 代码案例
效果 代码展示
父组件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之后的生命周期子组件先执行并且与父组件交替执行 当子组件进行卸载时只会执行自身的 componentWillUnmount 生命周期不会再触发别的生命周期
