React Hook の使用例 (一般的なフック 6 つ)

// カウンター import { useState } from 'react'
定数テスト = () => {
    定数[count, setCount] = useState(0);
    戻る （
        <>
            <h1>クリック回数が{count}回</h1>
            <button onClick={() => setCount(count + 1)}>+1</button>
        </>
    );
}
デフォルトのエクスポートテスト

// エラー例 import { useState } from 'react'
定数テスト = () => {
    const [counts, setCounts] = useState({
        数値1: 0,
        数値2: 0
    });
    戻る （
        <>
            <h1>num1:{counts.num1}</h1>
            <h1>num2: {counts.num2}</h1>
            <button onClick={() => setCounts({ num1: counts.num1 + 1})}>num1+1</button>
            <button onClick={() => setCounts({ num2: counts.num2 + 1})}>num2+1</button>
        </>
    );
}
デフォルトのエクスポートテスト

'react' から {useState} をインポートします。
定数テスト = () => {
    const [counts, setCounts] = useState({
        数値1: 0,
        数値2: 0
    });
    戻る （
        <>
            <h1>num1:{counts.num1}</h1>
            <h1>num2: {counts.num2}</h1>
            <button onClick={() => setCounts({ ...counts, num1: counts.num1 + 1})}>num1+1</button>
            <button onClick={() => setCounts({ ...counts, num2: counts.num2 + 1})}>num2+1</button>
        </>
    );
}
デフォルトのエクスポートテスト

コンポーネントマウント() {
    // 何かする }
コンポーネントを更新しました() {
    // 何かする }

使用効果(() => {
    // 何かする });

'react' から { useState, useEffect } をインポートします。
定数テスト = () => {
    定数[count1, setCount1] = useState(0);
    定数[count2, setCount2] = useState(0);
    使用効果(() => {
        console.log('useEffect がトリガーされました')
    });
    戻る （
        <>
            <h1>カウント1:{カウント1}</h1>
            <h1>カウント2:{カウント2}</h1>
            <button onClick={() => setCount1(count1 + 1)}>count1+1</button>
            <button onClick={() => setCount2(count2 + 1)}>count2+1</button>
        </>
    );
}
デフォルトのエクスポートテスト

// 構文: useEffect(コールバック関数、[依存関係の値])
使用効果(() => {
    console.log('useEffect がトリガーされました')
}, [count1]); 

使用効果(() => {
    // 副作用を設定する return () => {
        // 副作用をクリーンアップする }
});

'react' から React をインポートします。{useContext、useState }。
React の TestContext を作成します。
定数親 = () => {
    const [値、setValue] = useState(0);
    戻る （
        <div>
            {(() => console.log("親レンダリング"))()}
            <button onClick={() => setValue(value + 1)}>値 + 1</button>
            <TestContext.Provider 値 = {値}>
                <子供1 />
                <子供2 />
            </テストコンテキスト.プロバイダー>
        </div>
    );
}
定数Child1 = () => {
    定数値 = useContext(TestContext);
    戻る （
        <div>
            {(() => console.log('Child1-render'))()}
            <h3>子1の値: {値}</h3>
        </div>
    );
}
定数Child2 = () => {
    戻る （
        <div>
            {(() => console.log('Child2-render'))()}
            <h3>子供2</h3>
        </div>
    );
}
デフォルトの親をエクスポート

定数Child2 = React.memo(() => {
    戻る （
        <div>
            {(() => console.log('Child2-render'))()}
            <h3>子供2</h3>
        </div>
    );
}); 

// useCallback(コールバック関数、[依存関係の値])
定数handleClick = useCallback(()=> {
    // 何かする }, [値]);

'react' から React、{useState、useCallback、memo} をインポートします。
定数親 = () => {
    定数[値1、setValue1] = useState(0);
    定数[値2、setValue2] = useState(0);
    定数handleClick1 = useCallback(()=> {
        値1を1に設定します。
    }, [値1]);
    定数handleClick2 = useCallback(()=> {
        値2を1に設定します。
    }, [値2]);
    戻る （
        <>
            {(() => console.log("親レンダリング"))()}
            <h3>{値1}</h3>
            <h3>{値2}</h3>
            <Child1 ハンドルクリック1 = {ハンドルクリック1} />
            <Child2 ハンドルクリック2 = {ハンドルクリック2} />
        </>
    );
}
定数Child1 = メモ(props => {
    戻る （
        <div>
            {(() => console.log("Child1-render"))()}
            <button onClick={() => props.handleClick1()}>value1 + 1</button>
        </div>
    );
});
定数Child2 = メモ(props => {
    戻る （
        <div>
            {(() => console.log("Child2-render"))()}
            <button onClick={() => props.handleClick2()}>value2 + 1</button>
        </div>
    );
});
デフォルトの親をエクスポート

// useMemo(コールバック関数、[依存関係の値])
メモを使う(() => {
    // 何かする },[値]);

React をインポートし、{useState} を 'react' から取得します。
定数テスト = ()=> {
    const [値、setValue] = useState(0);
    定数[count, setCount] = useState(1);
    定数 getDoubleCount = () => {
        console.log('getDoubleCountが計算されました');
        カウント * 2 を返します。
    };
    戻る （
        <div>
            <h2>値: {値}</h2>
            <h2>ダブルカウント: {getDoubleCount()}</h2>
            <button onClick={() => setValue(value + 1)}>value+1</button>
        </div>
    ）
}
デフォルトのエクスポートテスト

React をインポートし、{useState、useMemo} を 'react' からインポートします。
定数テスト = ()=> {
    const [値、setValue] = useState(0);
    定数[count, setCount] = useState(1);
    定数 getDoubleCount = useMemo(() => {
        console.log('getDoubleCountが計算されました');
        カウント * 2 を返します。
    }、[カウント]）;
    戻る （
        <div>
            <h2>値: {値}</h2>
            <h2>ダブルカウント: {getDoubleCount}</h2>
            <button onClick={() => setValue(value + 1)}>value+1</button>
        </div>
    ）
}
デフォルトのエクスポートテスト

React をインポートし、{useState、useMemo} を 'react' からインポートします。
定数テスト = ()=> {
    const [値、setValue] = useState(0);
    定数[count, setCount] = useState(1);
    定数 getDoubleCount = useMemo(() => {
        console.log('getDoubleCountが計算されました');
        カウント * 2 を返します。
    }、[カウント]）;
    戻る （
        <div>
            <h2>値: {値}</h2>
            <h2>ダブルカウント: {getDoubleCount}</h2>
            <button onClick={() => setValue(value + 1)}>value+1</button>
        </div>
    ）
}
デフォルトテストをエクスポート