Question

我正在开发一个React应用，我需要从子组件中修改父组件的状态。当然，我可以简单地在父级中编写一个函数，并将其作为道具传递给子级（就像其他人似乎都在做的一样）。但是，我改为尝试将整个父级作为道具传递给孩子，以便孩子可以自由修改父级的状态。

这是我父母与孩子相处的样子：

{this.state.entries.map(entry => (
    <UserEntry
        ...
        mainThis={this}
    />
))}

请注意，我是如何使用this将整个父母带入孩子的。然后，从我的子代代码中，可以使用简单的this.props.mainThis.setState()修改父代的状态。

这当然有效，我对自己感到非常满意。但是，我想知道为什么人们不这样做。从长远来看会影响性能吗？

Answer 1

随着您的代码库变得越来越大和越来越复杂，您会发现自己试图找到一种管理复杂性的方法。这对于减少错误和添加新功能很重要。这样做会打开一罐蠕虫。

这里有个例子。您在一对一的父母中进行此操作。子级也有一个元素列表，它传递了this引用。从数据中找出哪个子元素正在更新导致错误的状态变得很麻烦。您将不是放下调试点以查看值的好地方，而且工作会更加困难

React的一大优势是组件的概念。 React使组件可重用且自包含。如果您开始传递this引用，则您的父组件将与子组件紧密耦合。弄清每个组件的功能变得更加困难。

随意尝试这种模式。当代码库达到临界点时，您会很快感受到这种设计选择的痛苦。

Answer 2

我想知道为什么人们不这样做。会不会影响从长远来看还是有什么表现？

由于父子之间的紧密耦合，这将使您的代码难以调试，理解和测试。这也违反了封装原则，因为子组件不应该了解父组件的状态和内部实现，反之亦然。组件应松耦合。

这与代码性能无关，但是从长远来看，它肯定会影响您团队的性能。