react生命周期之挂载阶段

最新推荐文章于 2024-04-07 10:15:00 发布

liantaiyou

最新推荐文章于 2024-04-07 10:15:00 发布

阅读量450

点赞数

分类专栏： js 文章标签： reactjs es6 javascript

本文链接：https://blog.youkuaiyun.com/liantaiyou/article/details/105561680

版权

js 专栏收录该内容

6 篇文章

订阅专栏

本文详细探讨了React组件的挂载阶段生命周期，包括构造函数、静态getDerivedStateFromProps、render、componentDidMount等关键步骤，阐述了各阶段的作用及最佳实践，帮助开发者更好地理解和掌握React应用开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    class My extends React.Component {
        constructor() {
            super()
            this.state = {
                num:1
            }
            console.log("constructor")
        }
        run(){
            console.log("奔跑")
        }
        componentWilMount(){
            //组件内容挂载之前
            //即将挂载,但是实例已经创建好了，所以可以拿到数据
            console.log("componentWilMount")
            
            console.log(this.state.num);
            console.log(this.run)
            console.log(this.refs.lala.innerHTML)//undefined 
            //组件内容还没挂载  视图挂载之前
        }


        render() {
           // 正在挂载
            console.log("render")
            return (
                <div>
                    <div ref={"lala"}>我是lala</div>
                    我是一个my组件
                </div>
            )
        }
        componentDidMount(){
            //挂载结束
            console.log(this.refs.lala.innerHTML)//我是lala  就会有内容
            console.log("componentDidMount")
        }
    }
    ReactDOM.render(
        <My/>, document.querySelector("#root"));
</script>

</html>