react学习（一）_react init-优快云博客

本文围绕React展开，介绍了父子组件间的传值方式，包括父向子通过属性传值、子向父借助父传递的方法修改值。还提及组件创建及状态改变时render的执行情况，以及react操作DOM、setState的特性。此外，详细阐述了react生命周期函数在各阶段的执行情况。

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

父子组件之间的传值方式：

父组件如何向子组件传值：通过属性的方式，子组件如何向父组件传值，父组件向子组件传递一个方法，子组件通过传递过来的方法进行修改父组件的值

当组件创建时，render会执行一次，父组件：当state发生改变是会重新执行一次，子组件：当props改变时会重新执行一次

react操作DOM,通过ref.ref写在html标签上获取的是dom节点，ref写在组件上获取的是组件的js实例

<button 
                onClick={this.handlerAdd}
                ref = {(button) =>{this.buttonElement = button}}
                >增加</button>

setState是异步执行的，

可以通过函数方式实现同步操作：

this.setState(() => {
            return {
                counter:newCounter
            }
        },() =>{
            console.log()
        })

react生命周期函数：

生命周期函数：父子组件都有自己的生命周期

init阶段：constructor会初始化数据

mounting阶段：会执行页面挂载前，到页面熏染(render）完成后，执行页面挂载结束,mounting阶段只会执行一次，初始化之后就会进行挂载操作

updation阶段：分props发生变化（只在子组件存在），和states发生变化：

unmounting：组件即将被销毁时执行