Question

如果您要使用Redux来管理全局状态，那么如何管理仅由该组件及其子组件（像容器一样）使用的独占组件状态？

修改我已经在使用 useState（）。我要求一种更好的方法，因为我最终得到了很多useState语句。

有什么想法吗？

Answer 1

我认为，当还没有出现redux和其他工具管理状态时，您想用complicated state控制带有pure React的容器。在您的情况下，容器是根组件（例如位于索引处的App组件）。它管理复杂的状态对象，并将键值或某些函数传递给子代。

Class Container extend Component {
   state = {
       // complicated state
   }

   render() {
       return (
          <Children1 key1={this.state.value1...} />
          <Children2 key1={this.state.value2...} />
          <Children3 key1={this.state.value3...} />
       )
   }
}

或者您可以使用功能组件更灵活地管理状态：

const Container = () => {
   const [state1, setState1] = useState({ // some key: value here });
   const [state2, setState2] = useState({ // some key: value here });
   const [state3, setState3] = useState({ // some key: value here });
   return (
      <Children1 keyObject={state1} keyValue={state1...} />
      <Children2 keyObject={state2} />
      <Children3 keyObject={state3} />
   )
}

回答您的修改：我认为 useState 是针对您的案例的更好方法。在客户端进行操作时，必须控制 在何处使用变量 。状态拆分将帮助您更灵活地控制它们。如果您有很多 useState 语句，则应考虑重新构造Container和子Component的结构。

React在组件级别的状态管理

1 个答案: