学习反应的概念证明

Question

我目前正在尝试自学React，我目前在codepen工作，我想要做的是从静态的JSON创建一个简单的用户配置文件。

我想要某人确认我的理解在我进步之前是正确的。

我的理解是React应用程序是由状态对象驱动的吗？这个状态对象的元素可以传递给组件，它们成为道具（只读？）。如果我可以在状态中的某些东西它将反映在组件中使用的任何道具？

这是我到目前为止的概念证明，它基本上是从状态获取和化身URL并创建一个非常简单的头像组件开始。

_context.Database.EnsureDeleted();

https://codepen.io/87Development/pen/XabxGX?editors=1010

Answer 1

我建议尝试一些东西，看看事情是如何“反应”的。 例如，添加一个更新user.avatar。

的按钮

onClick() {
  this.setState({user: Object.assign({}, this.state.user, {avatar: 'new'})});
}

state.user特此设置为完全不同的对象引用，这将导致重新呈现。

您应该会看到更新的<Avatar />，因为它会收到新的道具。

正如您已经提到的那样props是只读的。 state也应该被认为是只读的，永远不会直接更新，但始终通过setState()

Answer 2

是的，你是对的。

虽然在你的代码中，这样做并不是很实际和“纯粹”：

return (<Profile user={this.state.user} />);

原因是因为它意味着您的Profile需要使用完整的用户对象，即使它实际上只需要一个图像。因此，为了可重用性和清晰度，您可能宁愿声明一个头像道具：

return (<Profile avatar={this.state.user.avatar} />);

即使您只有头像链接，也可以使用Profile组件。

这也意味着你应该为你想传递的每个用户属性添加道具。