react学习（八）组件的生命周期

最新推荐文章于 2025-12-16 16:19:46 发布

原创最新推荐文章于 2025-12-16 16:19:46 发布 · 37 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #javascript #ecmascript #前端

1 常用组件生命周期

组件从创建到死亡会经历一些特定的阶段

React组件中包含一系列钩子函数(生命周期回调函数)，会在特定的时刻调用

我们在定义组件时，会在特定的生命周期回调函数中做特定的工作。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>hello_react</title></head>
<body>
    <div id="test1"></div>
    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom,用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转换为js-->
    <script type="text/javascript" src="../js/babel.js"></script>
    <!--引入prop-types,用于对组件标签属性进行限制-->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel"> /*此处一定要写babel*/
        class Login extends React.Component {
            state = {opacity:1,}
            //组件挂载完毕
            componentDidMount(){
                this.timer = setInterval(() => {
                    let {opacity} = this.state
                    opacity-=0.1
                    if(opacity <= 0) opacity = 1
                    this.setState({opacity})
                }, 200);
            }
            //组件将要卸载时
            componentWillUnmount(){
                //清除定时器
                clearInterval(this.timer)
            }
            death = ()=> {
                //卸载组件
                ReactDOM.unmountComponentAtNode(document.getElementById('test1'))
            }
            //初始化渲染、状态更新之后
            render() {
                return (
                    <div>
                        <h2 style={{opacity:this.state.opacity}}>React学不会怎么办？</h2>
                        <button onClick={this.death}>不活了</button>
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Login/>, document.getElementById('test1'))
    </script>
</body>
</html>

2 组件声明周期演示图

3 全部组件生命周期

初始化阶段：由组件render触发

　　constructor

　　componentWillMount

　　render

　　componentDidMount

更新阶段：由组件内部this.setState触发或父组件render触发

　　shoudComponentUpdate

　　componentWillUpdate

　　render

　　componentDidUpdate

卸载组件：

　　componentWillUnmount

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>hello_react</title></head>
<body>
    <div id="test1"></div>
    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom,用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转换为js-->
    <script type="text/javascript" src="../js/babel.js"></script>
    <!--引入prop-types,用于对组件标签属性进行限制-->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel"> /*此处一定要写babel*/
        class Count extends React.Component {
            //构造器
            constructor(props){
                console.log('Count---constructor')
                super(props)
                this.state = {count:0}
            }
            //组件将要挂载的钩子
            componentWillMount(){
                console.log('Count---componentWillMount')
            }
            //组件挂载完毕
            componentDidMount(){
                console.log('Count---componentDidMount')
            }
            //组件将要卸载时
            componentWillUnmount(){
                console.log('Count---componentWillUnmount')
            }
            //控制组件更新的阀门
            shoudComponentUpdate(){
                console.log('Count---shoudComponentUpdate')
                return true
            }
            //组件将要更新的钩子
            componentWillUpdate(){
                console.log('Count---componentWillUpdate')
            }
            //组件更新完毕的钩子
            componentDidUpdate(){
                console.log('Count---componentDidUpdate')
            }
            //加1按钮的回调
            add = ()=> {
                const {count} = this.state
                this.setState({count:count+1})
            }
            //卸载组件按钮的回调
            death = ()=> {
                //卸载组件
                ReactDOM.unmountComponentAtNode(document.getElementById('test1'))
            }
            //强制更新按钮的回调
            force = ()=> {
                this.forceUpdate()
            }
            //初始化渲染、状态更新之后
            render() {
                console.log('Count---render')
                const {count} = this.state
                return (
                    <div>
                        <h2>当前求和为：{count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                    </div>
                )
            }
        }
        class A extends React.Component {
            state = {carName:'奔驰'}
            changeCar = ()=>{
                this.setState({carName:'奥拓'})
            }
            render() {
                return (
                    <div>
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName}/>
                    </div>
                );
            }
        }
        class B extends React.Component {
            componentWillReceiveProps() {
                console.log('B---componentWillReceiveProps')
            }
            render() {
                return (
                    <div>
                        我是B组件，接收到的车是：{this.props.carName}
                    </div>
                );
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Count/>, document.getElementById('test1'))
        // ReactDOM.render(<A/>, document.getElementById('test1'))
    </script>
</body>
</html>