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 (
};
export default App;
上のコードから分かるように、レンダリングに問題はありませんが、「追加」ボタンをクリックしても以前のように88にはなりません.
これは、setStateによってアプリケーションコンポーネントが再レンダリングされると、アプリケーションコンポーネントが初期化され、再作成されるためです.したがって、createRefも再実行され、createRefによって作成された値がnullに無条件に再初期化されます.
ただし、userefを使用して作成した値が再レンダリングされると、refはnullに初期化されません.したがって,関数型はuseref class型を用いてcreateRefを用いる.
特定の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を用いる.
Reference
この問題について(createRef、userRefの違い), 我々は、より多くの情報をここで見つけました https://velog.io/@sejung1997/ㅏテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol