React嵌套组件的构建顺序

function Parent(){
  return (
    <div>child</div>
  )
}

React.createElement("div", null, "child")

function Child() {
  return <div>child</div>
}
function Parent(){
  return (
   <Child>parent child</Child>
  )
}

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

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