javascript - 使用适当的状态/ Prop react 自修改组件

Question

我现在正在做一个宠物项目，我决定使用 React 作为 View 。我对它的开发还很远，但我刚刚开始意识到我可能不明白如何很好地使用 React，因为似乎为了做简单的事情，你必须采取一些非常极端的措施!

所以，是时候举一个任意的例子了!这是适用于 JsFiddle 的代码

var Name = React.createClass({
    render: function() {
        return <button onClick={this.props.onClick.bind(null, this.props.id, 'John')}>{this.props.value}</button>
    }
});

var NameContainer = React.createClass({
    getInitialState: function() {
        return {
            names: [
                { id: 1, name: 'Fred' },
                { id: 2, name: 'George' }
            ]
        };
    },
    handleClick: function(id, newName) {
        names = this.state.names;
        names.map(function(obj){
            if (obj.id === id) {
                obj.name = newName;
            }
            return obj;
        });
        this.setState({
            names: names
        });
    },
    render: function() {
        var handleClick = this.handleClick;

        var children = this.state.names.map(function(obj){
            return <Name key={obj.id} id={obj.id} value={obj.name} onClick={handleClick} />;
        });

        return (
            <div>
                {children}
            </div>
        );
    }
});

这个想法是我正在尝试制作一个可以自行修改的组件。在此示例中，修改只是让组件能够将其名称从其原始值更改为“John”。

为什么这么复杂？

看起来这将是多更简单的方法是在 Name 组件中设置一些状态并让它们自己修改。不幸的是，据我所知，唯一的方法是根据违反“getInitialState 中的 Prop 是反模式”的 Prop 设置初始状态。

为什么不直接手动制作组件？

在我的实际应用程序中，数据来自服务器，因此必须一次获取所有数据。这就是为什么我使用 getInitialState 来预加载数据，而不是仅仅手动创建多个 Name 组件。此外，他们在 React 文档中说状态应该存储在一个公共(public)父组件中，所以这段代码遵循这种模式。

事情开始变得复杂

当您需要修改该状态时，问题就开始了。由于它以对象数组的形式出现(对于从服务器序列化数据非常典型)，您不能立即获取与您正在处理的组件对应的特定对象。据我所知，唯一知道的方法是将 ID 传递给所有子元素，这样当事件处理程序被触发以标识自己时，它们可以将其传回。尽管如此，您仍然必须遍历状态中的每个元素以找到您实际尝试修改的元素。

复杂性加剧...

更糟糕的是，您似乎无法从声明了该属性的组件内部访问该属性，因此为了获得您需要的所有信息，您必须对该值进行双重设置(在我的例子)。这是对我来说真正危险的地方，因为这似乎是实现目标而不破坏模式的唯一方法是绕过他们系统的一部分。

另一件让我恼火的事情是，您必须将事件处理程序从状态保持对象一直传递到子对象。在这个例子中，这很简单，但在我的实际应用中，这个关系有四层深。在我看来，所有这些中间步骤只是因为缺少 props 传递链中的一个步骤而增加了引入错误的可能性。

所以答案是什么？

这就是 React 的方式吗？是否有一些我完全忽略的巨大捷径？如何在保持我指定的约束的同时更简单地做到这一点？

Answer 1

我认为，您的示例存在一些问题，使其变得过于复杂:Name 组件是一个有漏洞的抽象，而 Name 组件知道的太多了。 (这些实际上有点交织在一起。)

在解决这些问题之前，我想绕道而行，讨论一下我设计组件的方法。我发现混合自顶向下和自底向上的方法在构建 React 应用程序时非常有用。使用自上而下帮助您确定要构建的组件，方法是从组件的概念开始，确定其子组件应该是什么，然后确定子组件的子组件，令人作呕。在确定组件之后，是时候切换到自下而上的方法了，在这种方法中，您采用最基本的组件(无需新的子组件来构建它)并尽可能自包含和独立地构建它，然后选择下一个最基本组件并实现它，并重复直到完成。

在实现组件时，您可以将传入的 props 视为供其他组件使用的 API，并且您希望使其尽可能专注于您的组件应提供的功能。

所以回到你的例子中的问题。

首先是你的 Name 组件是一个有漏洞的抽象。 (是的，我知道这只是一个随意的例子，但请耐心等待。)该组件将 onClick 作为其 API 的一部分(因为它需要作为 Prop )。这是有问题的，因为它告诉想要使用它的组件，“嘿，我这里有一个按钮!”这对您当前的 Name 实现没问题，但是当您需要更改 Name 以具有其他行为时会发生什么？ onClick 可能不再有意义，如果您想更改该 Prop 名称，那么该更改会影响您的其余代码。相反，您可能会考虑使用名称“更新”，这对于 Name 组件来说似乎是一个合理的操作，同时隐藏了它内部包含按钮的事实。当然，这可以看作是“命名事物时要小心”的论点，但我认为良好的命名是构建易于使用且以后易于修改的组件的宝贵工具。

另一个问题是 Name 组件对父实现了解太多，导致以后很难在其他组件中使用。不是在 Name 组件中运行“bind”，让我们假设拥有的容器传递一个带有单个参数的函数 - newName。在 name 组件中，您只需要使用您想要的新名称调用该函数。 Name 不关心这如何影响任何其他状态，并且您已经有效地推迟了解决该问题，直到您别无选择。 Name 组件看起来像:

 var Name = React.createClass({
    render: function() {
        return <button onClick={() => this.props.update('John')}>{this.props.name}</button>;
    }
});

请注意，您不再需要 id；您只需接受并更新名称。

因为您实际上必须担心更新 NameContainer 组件中的名称(因为数据就在那里)，所以您可以担心那里。为避免遍历所有 id，让我们创建一个函数，该函数接受一个名称对象和一个新名称，然后将每个名称对象绑定(bind)到该函数，类似于您在 Name 组件中的内容。 (剩下的是一个接受单个参数 newName 的函数，我们可以将其用作 Name 的更新函数!)。代码如下:

var NameContainer = React.createClass({
    getInitialState: function() {
        return {
            names: [
                { id: 1, name: 'Fred' },
                { id: 2, name: 'George' }
            ]
        };
    },
    update: function(obj, newName) {
        obj.name = newName;
        this.setState({ names: this.state.names });
    },
    render: function() {    
        var children = this.state.names.map(function(obj){
            return <Name key={obj.id} name={obj.name} update={this.update.bind(null, obj)} />;
        }, this);

        return (
            <div>
                {children}
            </div>
        );
    }
});

这确实简化了您的组件，现在 Name 可以在更广泛的上下文中使用。我已使用描述的更改更新了您的示例 here ，并且为了踢球，我添加了 Name here 的不同实现. NameContainer 不必更改，因为 Name API 没有更改，即使
尽管 Name 的实现在两者之间有很大的不同。

使用这种自下而上的方法有助于解决您对通过子组件链传递 props 的担忧。当您构建和测试一个组件时，您只需要关心您正在使用该组件解决的非常具体的问题；确保您将适当的 Prop 传递给其子组件。由于您专注于一个非常具体的问题，因此您不太可能错过传递关键数据的机会。

你可能看到这个，仍然想知道“为什么这这么复杂？”。考虑一个应用程序，您希望以不同的方式同时显示相同的数据(例如，图表及其相应的数据表)。 React 为您提供了一种跨组件共享数据并保持同步的方法。如果您持有所有数据并尽可能在本地操作它们(尽可能在子组件链中)，那么您将必须自己实现组件之间的同步。通过将数据放置在组件链的尽可能高的位置，您可以(有效地)将这些数据设为全局，而 React 可以担心其余的细节。你担心传递数据以及如何渲染数据，剩下的由 React 来完成。

最后要注意的是，如果您的应用程序的复杂性不断增加，您可以考虑查看 Flux .它是一种架构模式，可帮助管理您的应用程序复杂性。这不是 Elixir ，但当我在一些中等复杂的应用程序上使用它时，我发现它非常好。