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, "div\u5143\u7D20"),React.createElement(Child, null))React.createElement("div", null, "child\u7EC4\u4EF6")

可以进一步明确，子组件的构建和父组件是分离的，并且是在父组件构建之后创建的。所以父子组件的构建顺序是父组件constructor，render子组件constructor，render

当子组件render完成后，会调用componentDidmount

构建总结

在多组件情况下，首先父元素constructor，进行初始化和开始挂载，接着调用render

对于DOM元素，会立即创建，对于React组件，会在之后进入到组件中，重复之前的constructor，构建，render,直到最后一个子元素

当最后一个子组件render完成后，会调用componentDidMount。也就是元素已经挂载完成。之后会层层向上，依次调用componentDidMount

偏离一点点主题

下面的代码可以辅助理解上面的内容

// 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>
  )}
    

在上面两种写法中，第一种一定会报错

因为第一种的构建参数是

React.createElement(RenderChild, {
 val: a }
    ,React.createElement("div", null, a.b))此时a还是undefined

第二种构建参数是

function RenderChild(props) {
      return props.val ? props.children : React.createElement("div", null, "aaaa");
}
function Child(props) {
      return React.createElement("div", null, props.value.b);
}
React.createElement(RenderChild, {
 val: a }
, React.createElement(Child, {
    value: a }
    ));
    

因为Child的构建是在RenderChild之后的，所以即使在Child中使用到了不存在的值，也不会报错

最后总结

1. React组件的构建和开始挂载是从根元素到子元素的，因此数据流是从上到下的，挂载完成和状态的更新是从子元素到根元素，此时可以将最新状态传给根元素

2. 组件和DOM元素的一个区别是，DOM元素会在当前位置创建，而React组件的构建渲染具有层级顺序

以上就是React嵌套组件的构建顺序的详细内容，更多关于React嵌套组件的构建的资料请关注其它相关文章！

• 编写简洁React组件的小技巧
• 使用hooks写React组件需要注意的5个地方
• react实现Radio组件的示例代码
• 详解对于React结合Antd的Form组件实现登录功能
• 基于react hooks,zarm组件库配置开发h5表单页面的实例代码
• React antd tabs切换造成子组件重复刷新
• 在react-antd中弹出层form内容传递给父组件的操作
• 在react项目中使用antd的form组件,动态设置input框的值
• react实现复选框全选和反选组件效果
• @L_512_21@
• 实例讲解React 组件生命周期
• 实例讲解React 组件
• 详解React 父组件和子组件的数据传输

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！