对于React Hooks，有以下一点：

2 年 ago
新, 韵
1 minute

React Hooks (React钩子函数)

・useState
・useEffect
・useContext
・useReducer
・useCallback
・useMemo
・useRef
・useLayoutEffect
・useDebugValue

・状态钩子
・副作用钩子
・上下文钩子
・带有状态管理的钩子
・回调钩子
・记忆化钩子
・引用钩子
・布局副作用钩子
・调试值钩子

“勾子是什么东西？”

似乎是为连接到React功能而设计的React专用函数。

这次要解释的钩子

使用状态

管理画面中呈现的数据和用户界面的状态。

// useStateを使用するときのインポート文
import React, { useState } from 'react';

function CounterApp() {
    // countという変数を定義
    // setCountの箇所はstateの更新関数
    // useState(0)の箇所で初期値を0に設定している
    const [count, setCount] = useState(0);

    // カウンターを１増やす関数
    const increment = () => {
        setCount(count + 1);
    };
    // カウンターを１減らす関数
    const decrement = () => {
        setCount(count - 1);
    };

    return (
        <>
            <div>
                // カウンターの数字をpタグで表示する
                <p>Count: {count}</p>
                // カウンターを１減らすボタンにdecrement関数を設置している
                <button onClick={decrement}>-</button>
                // カウンターを１増やすボタンにincrement関数を設置している
                <button onClick={increment}>+</button>
            </div>
        </>
    );
    }

export default CounterApp;

useState的概念

  [useState]
    └─ Initial Value
    │
    └─ State Variable (count)
    │
    └─ State Updater Function (setCount)
    │
    └─ Component Render

１．初始值（Initial Value）：useState钩子函数传入的初始值。这里将0设置为初始值。

２．状态变量（State Variable）：useState钩子返回的状态变量。在这里，count被用作状态变量。该变量用于保存当前状态。

３．状态更新函数：用于更新状态变量的函数。在这里，setCount被用作状态更新函数。通过调用这个函数，可以更新状态变量并触发组件的重新渲染。

４．组件渲染：组件的绘制部分。显示 count 状态变量的值，并且每当点击按钮调用 setCount 函数更新状态时，此部分将重新渲染。

文中で述べられていたことについてはその他にも議論の余地があります。

useState提供了初始值和更新该值的函数，使组件能够保持和更新其状态，并在需要时触发重新渲染。简单来说，我认为useState是React组件内用于管理可变数据的便利工具。
下次，我希望能写一篇关于useEffect的文章。

bannerAds