createRef、userRefの違い

1258 ワード

refとは?
特定のdomをキャプチャするために使用します.refはcreateRefとuserRefの2つの方法で作成できます.
クラス構成部品はcreateRefでref、関数構成部品でuserRefを使用します.
関数構成部品でcreateRefを使用中に問題が発生しました
import React, { useState, createRef } from "react";
const App = () => {
const valueRef = createRef();
const [, setState] = useState();
return (
<div>
  값 : {valueRef.current}
  <button onClick={() => ((valueRef.current = 88), setState({}))}>
    증가
  </button>
</div>
);
};
export default App;
上のコードから分かるように、レンダリングに問題はありませんが、「追加」ボタンをクリックしても以前のように88にはなりません.
これは、setStateによってアプリケーションコンポーネントが再レンダリングされると、アプリケーションコンポーネントが初期化され、再作成されるためです.したがって、createRefも再実行され、createRefによって作成された値がnullに無条件に再初期化されます.
ただし、userefを使用して作成した値が再レンダリングされると、refはnullに初期化されません.したがって,関数型はuseref class型を用いてcreateRefを用いる.