您好,登录后才能下订单哦!
今天小编给大家分享一下react生命周期的三个过程实例分析的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
react生命周期的三个过程:1、挂载期,也叫实例化期,是一个组件实例初次被创建的过程;2、更新期,也被称为存在期,是组件在创建之后再次渲染的过程;3、卸载期,也被称为销毁期,是组件在使用完后被销毁的过程。
本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。
React的生命周期从广义上分为三个阶段:挂载、渲染、卸载
从出生到成长,最后到死亡,这个过程的时间可以理解为生命周期。React的生命周期同理也是这么一个过程。
React的生命周期分为三个阶段:挂载期(也叫实例化期)、更新期(也叫存在期)、卸载期(也叫销毁期)。在每个周期中React都提供了一些钩子函数。
生命周期的描述如下:
挂载期:一个组件实例初次北创建的过程。
更新期:组件在创建后再次渲染的过程。
卸载期:组件在使用完后被销毁的过程。
组件的挂载:
组件在首次创建后,进行第一次的渲染为挂载期。挂载期有的一些方法会被依次触发,列举如下:
constructor(构造函数,初始化状态值)
getInitialState(设置状态机)
getDefaultProps(获取默认的props)
UNSAFE_componentWillMount(首次渲染前执行)
render(渲染组件)
componentDidMount(render渲染之后执行的操作)
//组件挂载import React from 'react';import ReactDOM from 'react-dom';class HelloWorld extends React.Component{ constructor(props) { super(props); console.log("1,构造函数"); this.state={}; console.log("2,设置状态机"); } static defaultProps={ name:"React", } UNSAFE_componentWillMount(nextProps, nextState, nextContext) { console.log("3,完成首次渲染前调用"); } render() { console.log("4,组件进行渲染"); return ( <p> <p>{this.props.name}</p> </p> ) } componentDidMount() { console.log("5,componentDidMount render渲染后的操作") }}ReactDOM.render(<HelloWorld />, document.getElementById('root'));
组件的更新:
组件更新,指的是在组件初次渲染后,进行了组件状态的改变。React在生命周期中的更新过程包括以下几个方法:
UNSAFE_componentWillReceiveProps :当父组件更新子组件state时,该方法会被调用。
shouldComponentUpdate : 该方法决定组件state或props的改变是否需要重新渲染组件。
UNSAFE_componentWillUpdate : 在组件接受新的state或者props时,即将进行重新渲染前调用该方法,和UNSAFE_componentWillMount方法类似。
componentDidUpdate : 在组件重新渲染后调用该方法,和componentDidMount方法类似。
//组件更新class HelloWorldFather extends React.Component{ constructor(props) { super(props); this.updateChildProps=this.updateChildProps.bind(this); this.state={ //初始化父组件 name:"React" } } updateChildProps(){ //更新父组件state this.setState({ name:"Vue" }) } render() { return ( <p> <HelloWorld name={this.state.name} /> {/*父组件的state传递给子组件*/} <button onClick={this.updateChildProps}>更新子组件props</button> </p> ) }}class HelloWorld extends React.Component{ constructor(props) { super(props); console.log("1,构造函数"); console.log("2,设置状态机") } UNSAFE_componentWillMount() { console.log("3,完成首次渲染前调用"); } UNSAFE_componentWillReceiveProps(nextProps, nextContext) { console.log("6,父组件更新子组件时调用该方法"); } shouldComponentUpdate(nextProps, nextState, nextContext) { console.log("7,决定组件props或者state的改变是否需要重新进行渲染"); return true; } UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) { console.log("8,当接收到新的props或state时,调用该方法"); } render() { console.log("4,组件进行渲染"); return ( <p> <p>{this.props.name}</p> </p> ) } componentDidMount() { console.log("5,componentDidMount render后的操作"); } componentDidUpdate(prevProps, prevState, snapshot) { console.log("9,组件被重新选然后调用该方法"); }}ReactDOM.render(<HelloWorldFather />,document.getElementById("root"));
点击“更新子组件props”后:
组件的卸载:
生命周期的最后一个过程为组件卸载期,也称为组件销毁期。该过程主要涉及一个 方法,即componentWillUnmount,当组件从DOM树删除的时候调用该方法。
//组件卸载class HelloWorldFather extends React.Component{ constructor(props) { super(props); this.updateChildProps=this.updateChildProps.bind(this); this.state={ //初始化父组件 name:"React" } } updateChildProps(){ //更新父组件state this.setState({ name:"Vue" }) } render() { return ( <p> <HelloWorld name={this.state.name} /> {/*父组件的state传递给子组件*/} <button onClick={this.updateChildProps}>更新子组件props</button> </p> ) }}class HelloWorld extends React.Component{ constructor(props) { super(props); console.log("1,构造函数"); console.log("2,设置状态机") } UNSAFE_componentWillMount() { console.log("3,完成首次渲染前调用"); } UNSAFE_componentWillReceiveProps(nextProps, nextContext) { console.log("6,父组件更新子组件时调用该方法"); } shouldComponentUpdate(nextProps, nextState, nextContext) { console.log("7,决定组件props或者state的改变是否需要重新进行渲染"); return true; } UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) { console.log("8,当接收到新的props或state时,调用该方法"); } delComponent(){ //添加卸载方法 ReactDOM.unmountComponentAtNode(document.getElementById("root")); } render() { console.log("4,组件进行渲染"); return ( <p> <p>{this.props.name}</p> <button onClick={this.delComponent}>卸载组件</button> {/*声明卸载按钮*/} </p> ) } componentDidMount() { console.log("5,componentDidMount render后的操作"); } componentDidUpdate(prevProps, prevState, snapshot) { console.log("9,组件被重新选然后调用该方法"); } componentWillUnmount() { //组件卸载后执行 console.log("10,组件已被卸载"); }}ReactDOM.render(<HelloWorldFather />,document.getElementById("root"));
点击卸载按钮后:
总览组件生命周期:
以上就是“react生命周期的三个过程实例分析”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。