Javascript 当此子组件未呈现时，为什么react在子组件事件中调用函数？

这是一个例子

const getResult=（）=>{
document.getElementById（'logger'）.innerHTML+=“立即调用函数”；
返回“3S后的结果字符串”；
}
常数A=（）=>{
返回(
{getResult（）}
);
};
类包装器扩展了React.Component{
构造函数（）{
超级（）；
this.state={active:false}
}
componentDidMount（）{
setTimeout（（）=>this.setState（{active:true}），3000）；
}
render（）{
返回(
{this.state.active&&this.props.children}
);
}
}
ReactDOM.render（，document.getElementById（'app'））
因为当解析器读取并执行文件时，
A
组件将立即执行（从而触发
getResult
函数的内容），但其结果（返回

语句）仅在超时后显示

从技术上讲，在第一次渲染时，您已经在

this.props.children

中找到了

返回的
内容，但您只能在3秒钟后显示它

我不知道是否很清楚，用英语解释对我来说不容易

如果只想在渲染时触发某些代码，则应将其放在
return
语句中。
即使
子组件中的
子组件在3秒后显示，但正在父组件中计算getResult函数。当父对象渲染时

Wrapper components render函数在App components之后调用，记住getResults函数是由父App而不是Wrapper组件执行的。它不是在需要时动态评估子道具的子组件，而是父组件评估它并将其传递给子组件。孩子可能决定立即使用它，也可能不立即使用。
前面的答案很有意义，我只想补充一点，您的代码是在孩子函数被触发两次时编写的！
第一次呈现函数，第二次呈现状态为活动状态，包装器再次调用函数

检查这个，我在这里证明了。
希望它能帮助您理解正在发生的事情
从技术上讲，您调用函数并将此函数的结果视为子函数
-
3S后的结果字符串
。如果希望延迟函数调用，则可以在
状态更改时调用

const getResult = () => {
  document.getElementById('logger').innerHTML += "FUNCTION CALLs immediately";
  return 'RESULT string AFTER 3S';
}

const A = () => {
  return (
    <Wrapper>
      {getResult} // remove immediate invocation
    </Wrapper>
  );
};

class Wrapper extends React.Component {
  ...

  render() {
    return (
      <div>
        // here we can invoke children as a function, because we pass a function
        {this.state.active && this.props.children()}
      </div>
    );
  }
}

const getResult=（）=>{
document.getElementById（'logger'）.innerHTML+=“立即调用函数”；
返回“3S后的结果字符串”；
}
常数A=（）=>{
返回(
{getResult}//删除立即调用
);
};
类包装器扩展了React.Component{
...
render（）{
返回(
//这里我们可以调用子函数，因为我们传递一个函数
{this.state.active&&this.props.children（）}
);
}
}

然后你会得到预期的结果