react生命周期的三个过程：1、挂载期，也叫实例化期，是一个组件实例初次被创建的过程；2、更新期，也被称为存在期，是组件在创建之后再次渲染的过程；3、卸载期，也被称为销毁期，是组件在使用完后被销毁的过程。
本教程操作环境：windows10系统、react17.0.1版、dell g3电脑。
react生命周期的三个过程是什么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));
点击卸载按钮后：
总览组件生命周期：
【相关推荐：javascript视频教程、web前端】
以上就是react生命周期的三个过程是什么的详细内容。