掌握 React 的 useState Hook：基础知识和高级用例

<code class="javascript">const [state, setState] = useState(initialState);</code>

<code class="javascript">import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0); // 初始计数为 0

  const increment = () => {
    setCount(count + 1); // 使用 setCount 更新状态
  };

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={increment}>递增</button>
    </div>
  );
};

export default Counter;</code>

<code class="javascript">const [count, setCount] = useState(0);

const increment = () => {
  setCount(prevCount => prevCount + 1); // 函数式更新，确保状态更新准确
};</code>

<code class="javascript">import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>递增</button>
      <p>姓名：{name}</p>
      <button onClick={() => setName('Doe')}>更改姓名</button>
    </div>
  );
};</code>

<code class="javascript">const [count, setCount] = useState(() => {
  const initialCount = calculateInitialState(); // 复杂的计算
  return initialCount;
});</code>

<code class="javascript">const [user, setUser] = useState({ name: 'Alice', age: 25 });

const updateName = () => {
  setUser(prevUser => ({ ...prevUser, name: 'Bob' })); // 合并更新后的 name 和之前的状态
};</code>

<code class="javascript">const [items, setItems] = useState(['apple', 'banana']);

const addItem = () => {
  setItems(prevItems => [...prevItems, 'orange']); // 向 items 数组添加 'orange'
};</code>

<code class="javascript">// 错误：直接修改状态
count = count + 1; // 不会触发重新渲染！

// 正确：使用 setState 触发重新渲染
setCount(count + 1);</code>