javascript - react : order of execution

Question

我是 React 新手，正在学习这个例子

https://codepen.io/gaearon/pen/QKzAgB?editors=0010

现在，根据我的理解，以下应该是执行顺序

• 从LoginControl开始执行
• 然后是构造函数

• 然后进入渲染方法并运行

  button = <LoginButton onClick={this.handleLoginClick}/>};

现在控件应该转到LoginButton功能，但当我调试控制转到 Greetings然后 UserGreetings然后到LoginButton .这是为什么？此外，在 LoginButton 内我们有<button onClick={props.onClick}> , 什么 props.onClick做？它叫什么？

如果有人能解释一下，将不胜感激。我已经阅读了很多文章并花了几个小时进行调试，但找不到答案。

Answer 1

萨拉，我将从后一个问题开始。

LoginButton是一个组件，它所做的只是一个按钮，在 onClick 事件上触发一个名为 props.onClick 的方法.那什么是props.onClick ？它是从父组件传递给该组件的一些方法。

回到代码，让我们搜索父组件，在本例中将是顶级组件 LoginFlow .如果isLoggedIn是 false 它分配给按钮 <LoginButton onClick={this.handleLoginClick} />; .你看到onClick了吗？支柱？这就是作为 props.onClick 传递的内容到 LoginButton , 因此点击时执行的函数是 handleLoginClick的 LoginFlow .

至于前一个问题，就是LoginFlow组件返回。查看组件的返回语句部分 - 它返回 Greetings与 isLoggedIn Prop ，依次(在本例中为 true)转到 userGreeting。 .

希望这对您有所帮助!