Question

我是新来的人，正在关注这个示例

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

现在，据我了解，以下应为执行顺序

从LoginControl开始执行
然后是构造函数
然后转到render方法并运行

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为假，则将其分配给按钮<LoginButton onClick={this.handleLoginClick} />;。您看到onClick道具了吗？那就是将props.onClick传递给LoginButton的原因，因此单击时执行的功能就是handleLoginClick的{{1}}。

对于前一个问题，它只是LoginFlow组件返回的内容。查看组件的return语句部分-它返回带有LoginFlow道具的Greetings，而该道具又是isLoggedIn（在这种情况下为true）。

希望这会有所帮助！

Answer 2

JSX provides syntactic sugar用于：

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

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

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

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

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

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

不过，onClick是一种内置的React元素（例如<button>或<div>）识别的道具，它将等待用户单击该元素并调用由开发人员的每次点击-有关更多信息，请参见Handling events。

反应：执行顺序

2 个答案: