web-dev-qa-db-ja.com

React関数/フックコンポーネントでcomponentDidMountと同等ですか？

おそらくフックを介してReact機能コンポーネントでcomponentDidMountをシミュレートする方法はありますか？

javascriptreactjsreact-hooks
14
jeyko

フックの安定バージョン（Reactバージョン16.8.0+）

componentDidMountの場合

useEffect(() => {
    // Your code here
  }, []);

componentDidUpdateの場合

useEffect(() => {
    // Your code here
  }, [yourDependency]);

componentWillUnmountの場合

useEffect(() => {
    // componentWillUnmount
    return () => {
       // Your code here
    }
  }, [yourDependency]);

そのため、この状況では、この配列に依存関係を渡す必要があります。このような状態にあると仮定しましょう

const [count, setCount] = useState(0);

そして、カウントが増加するたびに、関数コンポーネントを再レンダリングしたいと思います。 useEffectは次のようになります

useEffect(() => {
    // <div>{count}</div>
  }, [count]);

これにより、カウントが更新されるたびにコンポーネントが再レンダリングされます。これが少し役立つことを願っています。

44
Mertcan Diken

はい、componentDidMountのようなライフサイクルメソッドは、クラスコンポーネントでのみ使用できます。

クラスコンポーネントは、フックの出現後も非推奨と見なされるべきではありません。それらはReactの重要な部分のままです。

1
Patrick Hund

useEffect()を使用します。これは、関数の使用方法に応じて、componentDidMount（）のように動作できます。

例えば。最初はfalseに設定されているカスタムloaded stateプロパティを使用し、レンダリング時にtrueに切り替えて、この値が変更されたときにのみエフェクトを起動できます。

ドキュメント

1
markmoxx

機能コンポーネントにはcomponentDidMountはありませんが、Reactフックは、useEffectフックを使用して動作をエミュレートする方法を提供します。

マウント時にのみコールバックのみを実行するには、useEffect()の2番目の引数として空の配列を渡します。

useEffectのドキュメント をお読みください。

function ComponentDidMount() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('componentDidMount');
  }, []);

  return (
    <div>
      <p>componentDidMount: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <ComponentDidMount />
  </div>,
  document.querySelector("#app")
);
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>
0
Yangshun Tay