reactでのcreateRefとuseRefの違い

序文

以前の記事では、reactでのrefの使用を紹介し、useRefの使用を詳細に紹介しました。リンクをクリックして、「reactで
のrefの使用の分析」を表示します。この記事では、新しいことを紹介します-useRef、それらがどのように異なるかを見てみましょう

useRef

比較の便宜上、次の例ではuseRefとuseRefを
使用します。1。useRefとuseRefを使用してそれぞれ2つの入力ボックスを作成し、対応する値を出力します
。2.これら2つの入力ボックスの情報をuseEffectに出力します。

import React, {
    
     createRef, useRef, useEffect } from 'react'
export default function App() {
    
    
    const inputRef = createRef(1)
    console.log(inputRef)

    const useInputRef = useRef(2)
    console.log(useInputRef)

    useEffect(() => {
    
    
        console.log(inputRef)
        console.log(useInputRef)
    })
    return (
        <div>
            value: {
    
    inputRef.current}
            <input type="text" ref={
    
    inputRef} />
            <button onClick={
    
    e => {
    
    inputRef.current.focus();inputRef.current.value=4}}>获取焦点</button>
            <br/>
            value: {
    
    useInputRef.current}
            <input type="text" ref={
    
    useInputRef} />
            <button onClick={
    
    e => {
    
    useInputRef.current.focus();inputRef.current.value=4}}>获取焦点</button>
        </div>
    )
}

結果

を見てください。ご覧のとおり、createRef（1）、useRef（2）を指定していますが、inputRefがnullとして出力され、useInputRefが2として出力されるのはなぜですか。
これは、createRefが再レンダリングされるたびに新しいrefオブジェクトを作成するためです。クラスコンポーネントで使用される場合、オブジェクトをレンダリングしてrenderメソッドを呼び出すための対応するライフサイクルが存在するため、機能コンポーネントでは作成されます。 useRefのようなものを実装しないと、再レンダリングするたびにnull値を取得するだけです。

したがって、使用中は、クラスコンポーネントでcreateRefを使用し、関数コンポーネントでuseRefを使用してみてください。useRefがオブジェクトを初めてレンダリングした後、オブジェクトが再レンダリングされたときに、オブジェクトがすでに作成されていることがわかった場合、そのオブジェクトは再度作成されず、パフォーマンスが向上します。

要約する

1.createRefは、再レンダリングされるたびに新しいrefオブジェクトを作成
します。2。useRefは、最初のレンダリング後にオブジェクトを作成します。パフォーマンスが向上
します。3.クラスコンポーネントでcreateRefを使用し、フックでuseRefを使用してみてください。