React嵌套组件中父组件和子组件哪个先建设？
发布时间：2022-01-11 14:11:10 所属栏目：语言 来源：互联网
导读：这篇文章介绍的是React嵌套组件构建顺序的问题，究竟在嵌套组件中，是父组件先构建，还是子组件先构建？是子组件先更新，还是父组件先更新呢？接下来小编就与大家一起来探讨一下。 在React官网中，可以看到对生命周期的描述 在嵌套组件中，是父组件先构建，还
|
这篇文章介绍的是React嵌套组件构建顺序的问题，究竟在嵌套组件中，是父组件先构建，还是子组件先构建？是子组件先更新，还是父组件先更新呢？接下来小编就与大家一起来探讨一下。 在React官网中，可以看到对生命周期的描述 在嵌套组件中，是父组件先构建，还是子组件先构建？是子组件先更新，还是父组件先更新解决这个问题，可以从嵌套单个元素入手。下面是一个只有DOM元素的组件 Parent function Parent(){ return ( <div>child</div> ) } 对于上面的元素，React会调用React.createElement创建一个对象，这就是子元素的构建阶段（这里使用的是babeljs.io/） React.createElement("div", null, "child") 构建之后就是渲染、更新 接着看下嵌套组件 function Child() { return <div>child</div> } function Parent(){ return ( <Child>parent child</Child> ) } React会调用React.createElement，并传入以下参数 function Child() { return React.createElement("div", null, "child"); } function Parent() { return React.createElement(Child, null, "parent child"); } 这里我们看出父子组件的构建过程，首先对当前组件进行构建，接着进入到组件中，继续构建，遵循的原则是从上到下 接着看看传入多个组件 function Child() { return <div>child组件</div> } function Parent(){ return ( <div> <div>div元素</div> <Child /> </div> ) } 在React.createElement会传入以下参数 React.createElement("div", null, React.createElement("div", null, "divu5143u7D20"),React.createElement(Child, null)) React.createElement("div", null, "childu7EC4u4EF6") 可以进一步明确，子组件的构建和父组件是分离的，并且是在父组件构建之后创建的。所以父子组件的构建顺序是父组件constructor，render子组件constructor，render 当子组件render完成后，会调用componentDidMount 构建总结 在多组件情况下，首先父元素constructor，进行初始化和开始挂载，接着调用render 偏离一点点主题 下面的代码可以辅助理解上面的内容 // RenderChild的作用是，当接收到值时，渲染children，没有值时，渲染其他元素 function RenderChild(props){ return ( props.a ? props.children : <div>aaaa</div> ) } 写法一（直接渲染DOM元素）： function Parent(){ let a = undefined; setTimeout(() => { a = { b: 1 }; }); return ( <RenderChild val={a}> <div>{a.b}</div> </RenderChild> ) } 写法二(渲染组件)： function Child(props) { return <div>{props.a.b}</div> } function Parent(){ const a = undefined; setTimeout(() => { a = { b: 1 }; }); return ( <RenderChild val={a}> <Child childVal={a} /> </RenderChild> ) （编辑：重庆站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
