react hooks

react hooks
HookはReact 16.8の新しい特性です.classを記述せずにstateや他のReactプロパティを使用することができます.
useState定義ステータス
≪インスタンス｜Instance｜emdw≫

import React, { useState } from 'react'
const Demo = () => {
	let [count, setCount] = useState(0)
	return 
 setCount(count + 1)}>{ count }
}

useEffectライフサイクルフック

//     componentDidMount
useEffect(()=>{
    fetch('xxx').then(res => {
        //       ，           ，       count
        setCount((count)=>{
            return count + 1
        })
        //      ref   
    })
}, [])

useEffect(()=>{
    //     componentDidMount
    //  return   componentWillUnmount    
    return () => {

    }
}, [])
useEffect(()=>{
    // componentDidUpdate
}, [count])
//    willreceiveProps
useEffect(()=>{

}, [props.name])

memoコンポーネントの重複レンダリングの問題を解決する

const Parent = () => {
    return (
        

            {count}
            
        
    )
}
const Child = memo(({changeCount})=> {

})

useRefは同じref機能です

let btn = useRef(null)
btn

useMemoキャッシュ変数ステータス(慎重に使用)
useCallbackキャッシュ関数(慎重に使用)
useContextuseReducerはデータウェアハウスを作成できます
useImperativeHandle refの使用時に親コンポーネントに露出したインスタンス値をカスタマイズ
useLayoutEffect
useLayoutEffectはcomponentDidMount、componentDidUpdateの呼び出しフェーズと同じであることに注意してください.しかし、最初はuseEffectを使うことをお勧めします.問題が発生したときだけuseLayoutEffectを使ってみてください.
useDebugValueは、React開発者ツールにカスタムhookのラベルを表示するために使用できます.