趣味学习React Hooks 核心

一、React Hooks 核心概念 & 代码示例

1. useState：组件状态的「记忆面包」

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始值 0
  return (
    <div>
      <p>你点击了 {count} 次 🍞</p>
      <button onClick={() => setCount(count + 1)}>点我加 1</button>
    </div>
  );
}

重点：useState 返回一个数组，第一个是当前状态，第二个是更新状态的函数。

---

2. useEffect：组件的「生活管家」

import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response =