react useState useEffect

### React 中 `useState` 和 `useEffect` 的使用

#### 初始化 State 变量
在函数组件中，可以利用 `useState` 钩子来声明状态变量。此钩子返回一对值：当前的状态以及更新该状态的方法。

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

上述代码展示了如何定义一个名为 `count` 的状态变量及其对应的更新器函数 `setCount`[^3]。

#### 执行副作用操作
为了处理那些不属于纯 UI 渲染逻辑的操作（比如数据获取、订阅或手动修改 DOM），应当采用 `useEffect` 钩子。默认情况下，每当组件重新渲染时都会触发 effect 函数中的逻辑；然而，可以通过指定依赖项列表控制何时运行这些 side effects。

import React, { useState, useEffect } from 'react';

function Example() {
    const [count, setCount] = useState(0);

    // 类似于 componentDidMount 和 componentDidUpdate:
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    });

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

在这个例子中，只要 `count` 发生变化就会改变文档标题[^1]。

对于更复杂的场景，例如父组件向子组件传递回调并希望仅当特定 prop 改变时才调用它，则可以在 `useEffect` 的第二个参数里传入相应的 props 数组：

import React, { useState, useEffect } from 'react';

let count = 0;

function App() {
    const [val, setVal] = useState('');

    function getData() {
        setTimeout(() => {
            setVal(`new data${++count}`);
        }, 500);
    }

    return <Child val={val} getData={getData} />;
}

export default App;

function Child({ val, getData }) {
    useEffect(getData, [getData]);

    return <div>{val}</div>;
}

这里，只有当 `getData` 方法本身发生变化时才会再次请求新数据[^2]。

需要注意的是，并不是所有的 `useEffect` 调用都一定会随着每一次重绘而被执行。具体行为取决于所提供的依赖数组内容[^5]。