子组件应该有状态吗？ - 反应

Question

假设，我们有父组件App，它有一个子组件Search。

对于这个例子：

Search 组件通过 setState 显示在其输入字段中键入的文本，即：

const Search = () => {
  const [searchTerm, setSearchTerm] = React.useState("");
  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };
  return (
    <div>
      <label htmlFor="search">Search: </label>
      <input id="search" type="text" onChange={handleChange} />
      <p>
        Searching for <strong>{searchTerm}</strong>.
      </p>
    </div>
  );
};

方法一：让子组件Search有自己的状态。
Search 组件是否应该有自己的状态，即使用 UseState()？或者这是一种不好的做法？

方法二：让父组件App管理子组件的状态。
如果 Search 组件的值向上传递给父组件 App，然后让 App 组件通过 setState() 管理状态，然后将更新后的值传回到搜索组件？

哪种方法更好？

编辑：

我不知道为什么这个问题被标记为基于意见。我知道会有一些分歧，但当问题围绕使用正确的设计模式展开时，这必然会发生。如果您不同意，那么为什么不标记所有围绕使用哪种设计模式的堆栈溢出问题，或者将“正确的 SQL database/table 使用”也标记为基于意见。

Answer 1

如果您在项目的其他任何地方都需要搜索的价值，那么最好集中管理状态（如果项目很小）或使用 useContext 挂钩。否则，如果只有 Search 组件需要值，那么最好在组件本身中管理状态。

Answer 2

首先，您的项目需要什么？事实上，你正在对这个问题采取行动。如果父组件将在 app.js 中使用状态，则应将状态传递给父组件。但如果不需要，您应该在子组件中设置状态。

Answer 3

根据经验，状态应尽可能位于层次结构的下方。进一步提升状态的主要原因是如果您需要从多个组件访问状态。

然后就可以提升给父级，传给多个子级了。如果需要在很多地方访问状态，您可以使用上下文或其他一些状态管理库。

Answer 4

找到这个问题答案的一个好方法是结合上下文思考。

搜索独立组件，在其自身上下文之外没有影响

那么你应该让状态更接近它被操纵的地方：在组件内部。

它是一个整体的一部分，是一个到达父级甚至树外组件的系统吗？

在这种情况下，您应该依赖 Context API or use a state management library like Redux that will avoid performance pitfall in some complex cases. Having your state managed by the Root component makes it available to your whole App and prevents you from doing painful prop drilling。

子组件应该有状态吗？ - 反应

Should child component have states? - React

javascript

reactjs

react-hooks

react-state

搜索独立组件，在其自身上下文之外没有影响

它是一个整体的一部分，是一个到达父级甚至树外组件的系统吗？