给我写一个 react useState的用法

当使用 React 开发时，我们可以使用 `useState` 这个 Hook 来管理组件的状态，它接受一个初始状态，并返回一个数组，第一个元素是当前状态值，第二个元素是更新状态值的函数。

下面是一个简单的例子，创建一个计数器组件，当点击按钮时，计数器会加 1：

import { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

在上面的代码中，我们通过 `useState` 创建了一个名为 `count` 的状态变量，初始值为 0，然后使用 `setCount` 函数来更新 `count` 的值。最后，在 JSX 中使用 `{count}` 显示当前计数器的值，并在按钮上绑定 `handleClick` 函数。

当我们点击按钮时，`handleClick` 函数会被调用，调用 `setCount` 函数来更新 `count` 的值，然后 React 会重新渲染组件，显示更新后的计数器值。

相关问题

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]。

react useState 深拷贝

`useState` 是 React 中的一个 Hook，用于在函数组件内部添加状态管理。当你直接从 `useState` 初始化的状态变量进行赋值时，React 并不会做深度复制，这意味着如果你修改了这个状态变量的某个嵌套属性，原始的状态也会随之改变。

例如：

const [state, setState] = useState({ nestedObject: { prop1: 'value1' } });
// 直接修改嵌套对象
setState({ nestedObject: { prop1: 'newValue' } });

在这种情况下，`nestedObject` 的 `prop1` 已经变为 `'newValue'`，而不是 `'value1'`。

如果你需要对状态进行深拷贝，可以使用 JavaScript 的内置库，如 `JSON.parse()` 和 `JSON.stringify()` 进行序列化然后再反序列化，或者使用第三方库如 `lodash` 的 `_.cloneDeep()`：

import { useState, cloneDeep } from 'react';
const clonedState = cloneDeep(state);
setState(clonedState);

但是这种方法在处理复杂数据结构时可能会有一些性能开销，因此通常建议在必要时才进行深拷贝，并确保理解其影响。