为何React组件对象内的组件可互相引用？求技术解析

这和React无关，纯是JavaScript的特性导致的：

• 你定义的Components是个普通JS对象，里面的Layout、SectionA、SectionB都是函数（React组件本质就是函数/类）。这些函数在对象定义阶段并没有立即执行，只是作为属性被赋值给了对象。
• 只有当React需要渲染组件时（比如Main组件里渲染<Components.Layout/>），Layout函数才会被调用执行。这时候整个Components对象已经完全初始化完毕，所有属性都已经挂载到对象上了，所以在Layout里访问Components.SectionA、SectionA里访问Components.SectionB都是合法的——因为这时候这些属性早就存在了。
• 反过来如果在对象定义时就立即执行函数（比如写成Layout: (<Components.SectionA/>)），那才会报错，因为定义Layout的时候SectionA还没被添加到Components对象里。但你现在是把函数本身赋值给属性，函数执行被推迟到了渲染阶段，这时候对象已经完整，自然能互相引用。

举个非React的例子，原理完全一致：

const obj = {
  fn1: () => console.log(obj.fn2()),
  fn2: () => "hello"
};
obj.fn1(); // 正常输出"hello"

内容的提问来源于stack exchange，提问作者Thomas Fox