[解決済み] ReactのuseState()フックを使って、コンポーネント間で状態を共有することは可能ですか？

質問

Reactの新しいHook機能を使って実験していました。私は以下の2つのコンポーネント（React Hooksを使用）を持っていると考えています - 。

const HookComponent = () => {
  const [username, setUsername] = useState('Abrar');
  const [count, setState] = useState();
  const handleChange = (e) => {
    setUsername(e.target.value);
  }

  return (
    <div>
      <input name="userName" value={username} onChange={handleChange}/>
      <p>{username}</p>
      <p>From HookComponent: {count}</p>
    </div>
  )
}


const HookComponent2 = () => {
  const [count, setCount] = useState(999);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

フックはコンポーネント間でステートフルなロジックを共有する問題を解決すると主張していますが、私は HookComponent と HookComponent2 は共有できません。例えば count で HookComponent2 を変更してもレンダリングされません。 HookComponent .

コンポーネント間で状態を共有するために useState() フックを使って、コンポーネント間で状態を共有することはできますか？

どのように解決するのですか？

もしコンポーネントの状態を指しているのであれば、フックを使ってもコンポーネント間で共有することはできません。コンポーネントの状態は、そのコンポーネントに対してローカルです。もし状態がコンテキストに住んでいるのであれば useContext フックが役に立つでしょう。

根本的に、" sharing stateful logic between components"という行を誤解しているようです。ステートフルなロジックはステートとは異なります。ステートフル ロジックとは、ステートを変更するために実行するものです。例えば、あるコンポーネントが、あるストアにサブスクライブするために componentDidMount() でストアに登録し componentWillUnmount() . この購読/非購読の動作はフックで実装することができ、この動作を必要とするコンポーネントはフックを使用するだけでよいのです。

コンポーネント間で状態を共有したい場合、様々な方法があり、それぞれに利点があります。

1. 状態を持ち出す

2つのコンポーネントの共通の祖先コンポーネントに状態を持ち上げます。

function Ancestor() {
    const [count, setCount] = useState(999);
    return <>
      <DescendantA count={count} onCountChange={setCount} />
      <DescendantB count={count} onCountChange={setCount} />
    </>;
  }

この状態共有のアプローチは、状態を使用する従来の方法と根本的に異なるわけではなく、フックはコンポーネントの状態を宣言する異なる方法を与えるだけです。

2. コンテキスト

子孫のコンポーネント階層が深すぎて、状態をあまり多くの階層に渡したくない場合には コンテキスト API .

そこには useContext フックがあり、これを子コンポーネントの中で利用することができます。

3. 外部状態管理ソリューション

ReduxやMobxのような状態管理ライブラリです。あなたの状態はReactの外部にあるストアに住み、コンポーネントは更新を受け取るためにストアに接続/購読することができます。