State 組件級別的 React 管理

Question

如果您使用 Redux 管理全局 state，您如何管理僅由該組件及其子組件使用的專有組件 state（類似於容器）？

編輯我已經在使用useState() 。 我要求一種更好的方法，因為我最終得到了很多 useState 語句。

有任何想法嗎？

Answer 1

我認為當 redux 和其他工具管理 state 尚未出現時，您想要與pure React控制相同的complicated state的容器。 在您的情況下， Container 是一個根組件（如索引處的 App 組件）。 它管理復雜的 state object 並將密鑰值或一些 function 傳遞給孩子。

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

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

或者您可以使用功能組件來更靈活地管理 state：

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對你的情況來說是更好的方法。 當您使用客戶端時，您必須控制使用變量的位置。 state 的拆分將幫助您更靈活地控制它們。 如果你有很多useState語句，你應該考慮重新設計 Container 和 children Component 的結構。