Reactにおけるフックの一般的な使用法

// 初期化 const [ count, setCount ] = useState(0)
// 更新 setCount(count+1)

使用効果(()=>{
  // これはcomponentDidMountをシミュレートします
}, [])

使用効果(()=>{
  // これはcomponentDidMountをシミュレートし、カウントが変更されたときにcomponentDidUpdateを実行します
}, [カウント])

使用効果(()=>{
  戻り値 () =>{
  // これはcomponentWillUnmountをシミュレートします
  }
}, [])

// 以前の定義 const CountContext = React.createContext()
 <CountContext.Provider 値 = {{ count: 10 }}>
     <...カスタマイズされたコンポーネント>
 </CountContext.Provider>

// 子要素 <CountContext.Consumer>
    { 値 => { console.log(値.count) }} //10
</CountContext.Consumer>

//コンテキストを使用してメソッドを取得します const countObj = useContext(CountContext)
コンソール.log(countObj.count) // 10

// これにより、関数コンポーネントに渡された ref が関数コンポーネント内の入力タグにバインドされます。import React, { useRef, forwardRef } from 'react'

// 関数式を使用して関数コンポーネントを定義します const InputCom = forwardRef((props, ref) => {
    <input ref={ref}/> を返します
 })

デフォルト関数refDemo()をエクスポートする{
    定数comRef = useRef()
    戻り値(<div>
       <InputCom ref={comRef}/>
         </div>)
  }

const [ count, setCount ] = useState(0)
定数 prevCount = useState(count)
// カウントが変更されると、コンポーネントは countuseEffect(()=>{ の以前のデータを更新して保存します。
  prevCount.current = カウント
}, [カウント])

// データを処理する純粋なリデューサー関数を定義します function Reducer(prevState, action){
  スイッチ(アクション.type){
    ケース '増分':
      {...prevState、count: prevState.count + 1 } を返します。
    ケース '減少':
      {...prevState、count: prevState.count - 1 } を返します。
    デフォルト：
      前の状態を返す
  }
}

// 状態を初期化する const [ count, dispatch ] = useReducer(reducer, { count: 0 })
// 状態を変更します。この時点での変更には、受信リデューサー関数が処理できるようにアクションをディスパッチする必要があります。dispatch({ type: 'increment' })

React をインポートします。{useState、useCallback、memo} を 'react' からインポートします。
const AddBtn = memo((props)=>{ // 関数式を使用して関数コンポーネントを定義します return<button onClick={props.increment}>+1</button>
})

デフォルト関数CallBackPerformance()をエクスポートする{
    const [ count, setCount ] = useState(0)
    const [ show, setShow ] = useState(true)
    定数増分1 = () => {
        console.log('increment1が呼び出されました')
        setCount(カウント+1)
    }

   const increment2 = useCallback(()=>{ // useCallback を使用して最適化された関数 console.log('increment2 が呼び出されました')
         setCount(カウント+1)
    }、[カウント]）

    戻り値(<div>
            <div>現在のカウント: {count}</div>
            <AddBtn 増分={increment1} 名前="1"/>
            <AddBtn 増分={increment2} 名前="2"/>
            <button onClick={e => setShow(!show)}>表示を切り替える</button>
        </div>)
}
// 表示状態が変化すると、サブコンポーネントの increment1 は再レンダリングされますが、 increment2 は再レンダリングされません。

メモを使う(()=>{
  {count} を返す
}, [カウント])

// useCallbackを使用する場合
   定数インクリメント2 = useCallback(()=>{
    setCount(カウント+1)
}、[カウント]）

//useMemo を使用して useCallback をシミュレートする
定数インクリメント2 = useCallback(()=>{
    戻り値 () =>{
        setCount(カウント+1)
    }
}、[カウント]）

// useMemo の適用シナリオは、複雑な計算を実行する必要がある場合です。
// 計算された値は変更されていないため、更新ごとに再計算する必要はありません import React, { useState, useMemo } from 'react'
const calculateNum = (count) => {
    console.log('合計が再計算されました')
    合計を0にする
    for(let i = 0; i <= count; i++){
        合計 += i
    }
    合計を返す
}

デフォルト関数ComplexUseMemo()をエクスポートする{
    const [ count, setCount ] = useState(10)
    const [ show, setShow ] = useState(true)
    定数合計 = useMemo(()=>{
        calculateNum(count) を返す
    }, [カウント])
    戻り値(<div>
        <div>{合計}</div>
        <button onClick={e=>setCount(count+1)}>+1</button>
        <button onClick={e=>setShow(!show)}>表示を切り替える</button>
    </div>)
}

'react' から React をインポートします。{useRef、useImperativeHandle、forwardRef}
const InputComp = forwardRef((props, ref)=>{
  定数childInputRef = useRef()
  命令型ハンドルを使用します(ref, ()=>({
    フォーカス: ()=>{
      childInputRef.current.focus()
    }
  })、[childInputRef.current]) より

  <input ref={childInputRef}></input> を返します。
})

デフォルト関数ImperativeHookDemo()をエクスポートします。
  定数 inputRef = useRef()
  戻り値(<div>
      <InputComp ref={inputRef}/>
      <button onClick={e=>inputRef.current.focus()}>フォーカス</button>
    </div>)
}