react的生命周期

川长思鸟来 2023-06-06 15:27 19阅读 0赞

react的生命周期

初始化页面，创建实例对象，即将开始挂载（渲染），运行render（），挂载（渲染）完成，

钩子函数：

componentWillMount()：组件即将渲染到页面，render前触发一次

\*\*\*发送ajax请求，开启定时器

componentDidMount()：组件已经渲染到页面，render后触发一次

componentWillReceiveProps()：

shouldComponentUpdate()：

componentWillUpdate()：组件即将更新数据，

componentDidUpdate()：组件已经更新结束

componentWillUnmount()：组件即将卸载  ，经常用来关闭定时器(定时器适用命名标识并交给this实例对象)

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*ReactDOM.unmountComponentAtNode(document.getElementById('app'))

注意：一般会在componentDidMount中开始监听，发送ajax请求

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            class Anima extends React.Component{
                constructor(props){
                    super(props);
                    this.state = {
                        opacity:1
                    }
                }
                componentDidMount(){
                    let {opacity} = this.state
                    setInterval(() => {
                        opacity -= 0.1;
                        console.log(opacity)
                        if(opacity<0.1){
                           opacity = 1
                        }
                        this.setState({
                            opacity
                        })
                       
                    }, 1000);
                }
                render(){
                    let {opacity} = this.state
                    return (
                        <div style={
       {opacity}}>
                            react生命周期
                        </div>
                    )
                }
            }
            ReactDOM.render(<Anima />,document.getElementById('app'))
        
        </script>
    
    </body>
    </html>