React:执行顺序

Question

我是新来的反应者，并遵循这个例子

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

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

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

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

至于前一个问题，它只是LoginFlow组件返回的内容。看看组件的return语句部分——它返回带有isLoggedIn属性的Greetings，然后(在本例中为true(返回userGreeting。

希望这能有所帮助！

Answer 2

JSX为提供语法糖

button = React.createElement(LoginButton, {onClick: this.handleLoginClick})

虽然该代码在<Greetings>之前执行，但它与将在LoginButton内部执行代码的button = LoginButton()不同。

LoginButton内部的代码仅在实际渲染时执行，即在通过调用ReactDOM.render()渲染的组件内部的{button}中执行。

---

props是作为第二个参数传递给上述React.createElement的值，并将作为第一个参数传递到组件实现。

如果您设想<LoginButton something="test" />，那么以下实现将在按钮内显示test：

const LoginButton = (props) => <button>{props.something}</button>

然而，onClick是一个由内置React元素(如<button>或<div>(识别的道具，它将等待用户点击该元素，并在每次点击时调用开发人员指定的函数-有关更多信息，请参阅处理事件。