002 《React Web 开发权威指南》

                                
                                    

                            
1
                            
node -v
                        

                            
2
                            
npm -v
                        
                                
                            

                                
                                    

                            
1
                            
npm config set registry https://registry.npmmirror.com
                        
                                
                            

                                
                                    

                            
1
                            
npm config get registry
                        
                                
                            

                                
                                    

                            
1
                            
npm install -g yarn
                        
                                
                            

                                
                                    

                            
1
                            
yarn -v
                        
                                
                            

                                
                                    

                            
1
                            
npm install -g pnpm
                        
                                
                            

                                
                                    

                            
1
                            
pnpm -v
                        
                                
                            

                                
                                    

                            
1
                            
npm install -g create-react-app
                        
                                
                            

                                
                                    

                            
1
                            
create-react-app --version
                        
                                
                            

                                
                                    

                            
1
                            
create-react-app my-app
                        
                                
                            

                                
                                    

                            
1
                            
cd my-app
                        
                                
                            

                                
                                    

                            
1
                            
npm start
                        
                                
                            

                                
                                    

                            
1
                            
my-app/
                        

                            
2
                            
├── node_modules/         # 项目依赖包
                        

                            
3
                            
├── public/                # 静态资源文件 (例如 index.html, favicon.ico)
                        

                            
4
                            
├── src/                   # 源代码目录
                        

                            
5
                            
│   ├── App.js            # 根组件
                        

                            
6
                            
│   ├── index.js          # 入口文件
                        

                            
7
                            
│   ├── index.css         # 全局样式
                        

                            
8
                            
│   ├── logo.svg          # React Logo
                        

                            
9
                            
│   ├── ...
                        

                            
10
                            
├── package.json          # 项目配置文件，包含依赖信息、脚本命令等
                        

                            
11
                            
├── package-lock.json     # 锁定依赖版本，确保项目依赖一致性
                        

                            
12
                            
├── README.md             # 项目 README 文件
                        

                            
13
                            
├── .gitignore            # Git 忽略文件配置
                        

                            
14
                            
└── ...
                        
                                
                            

                                
                                    

                            
1
                            
npm create vite@latest my-vite-app
                        
                                
                            

                                
                                    

                            
1
                            
cd my-vite-app
                        
                                
                            

                                
                                    

                            
1
                            
npm install
                        
                                
                            

                                
                                    

                            
1
                            
npm run dev
                        
                                
                            

                                
                                    

                            
1
                            
my-vite-app/
                        

                            
2
                            
├── node_modules/
                        

                            
3
                            
├── public/
                        

                            
4
                            
├── src/
                        

                            
5
                            
│   ├── App.jsx         # 根组件 (注意文件扩展名是 .jsx 或 .tsx)
                        

                            
6
                            
│   ├── main.jsx        # 入口文件 (注意文件扩展名是 .jsx 或 .tsx)
                        

                            
7
                            
│   ├── index.css
                        

                            
8
                            
│   ├── assets/         # 静态资源目录
                        

                            
9
                            
│   ├── ...
                        

                            
10
                            
├── index.html          # HTML 入口文件 (在项目根目录下)
                        

                            
11
                            
├── package.json
                        

                            
12
                            
├── package-lock.json
                        

                            
13
                            
├── vite.config.js      # Vite 配置文件
                        

                            
14
                            
├── README.md
                        

                            
15
                            
└── ...
                        
                                
                            

                                
                                    

                            
1
                            
// 函数式组件示例
                        

                            
2
                            
function Welcome(props) {
                        

                            
3
                            
  return <h1>你好, {props.name}</h1>;
                        

                            
4
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
// 类组件示例
                        

                            
2
                            
import React from 'react';
                        

                            
3
                            

                        

                            
4
                            
class Welcome extends React.Component {
                        

                            
5
                            
  render() {
                        

                            
6
                            
    return <h1>你好, {this.props.name}</h1>;
                        

                            
7
                            
  }
                        

                            
8
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
// HTML 标签
                        

                            
2
                            
<div>这是一个 div 元素</div>
                        

                            
3
                            

                        

                            
4
                            
// 组件标签 (假设 Welcome 组件已定义)
                        

                            
5
                            
<Welcome name="张三" />
                        
                                
                            

                                
                                    

                            
1
                            
function formatName(user) {
                        

                            
2
                            
  return user.firstName + ' ' + user.lastName;
                        

                            
3
                            
}
                        

                            
4
                            

                        

                            
5
                            
const user = {
                        

                            
6
                            
  firstName: '李',
                        

                            
7
                            
  lastName: '四'
                        

                            
8
                            
};
                        

                            
9
                            

                        

                            
10
                            
const element = (
                        

                            
11
                            
  <h1>
                        

                            
12
                            
    你好, {formatName(user)}!
                        

                            
13
                            
  </h1>
                        

                            
14
                            
);
                        
                                
                            

                                
                                    

                            
1
                            
// JSX 属性示例
                        

                            
2
                            
<div className="container" tabIndex="0">
                        

                            
3
                            
  <input type="text" disabled />
                        

                            
4
                            
  <Welcome name="王五" age={25} />
                        

                            
5
                            
</div>
                        
                                
                            

                                
                                    

                            
1
                            
const element = (
                        

                            
2
                            
  <div>
                        

                            
3
                            
    <h1>欢迎来到 React 世界！</h1>
                        

                            
4
                            
    <p>开始你的 React 开发之旅吧。</p>
                        

                            
5
                            
  </div>
                        

                            
6
                            
);
                        
                                
                            

                                
                                    

                            
1
                            
function getGreeting(user) {
                        

                            
2
                            
  if (user) {
                        

                            
3
                            
    return <h1>你好, {formatName(user)}!</h1>;
                        

                            
4
                            
  }
                        

                            
5
                            
  return <h1>你好, 陌生人。</h1>;
                        

                            
6
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
// 父组件 App
                        

                            
2
                            
function App() {
                        

                            
3
                            
  const name = "React 小白";
                        

                            
4
                            
  return (
                        

                            
5
                            
    <div>
                        

                            
6
                            
      <Welcome name={name} /> {/* 向 Welcome 组件传递 name prop */}
                        

                            
7
                            
    </div>
                        

                            
8
                            
  );
                        

                            
9
                            
}
                        

                            
10
                            

                        

                            
11
                            
// 子组件 Welcome
                        

                            
12
                            
function Welcome(props) {
                        

                            
13
                            
  return <h1>你好, {props.name}</h1>; {/* 子组件通过 props.name 访问父组件传递的 name prop */}
                        

                            
14
                            
}
                        
                                
                            

                                
                                    

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

                            
2
                            

                        

                            
3
                            
function Counter() {
                        

                            
4
                            
  // 声明一个名为 count 的 state 变量，初始值为 0
                        

                            
5
                            
  const [count, setCount] = useState(0);
                        

                            
6
                            

                        

                            
7
                            
  return (
                        

                            
8
                            
    <div>
                        

                            
9
                            
      <p>当前计数: {count}</p>
                        

                            
10
                            
      <button>增加计数</button>
                        

                            
11
                            
    </div>
                        

                            
12
                            
  );
                        

                            
13
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React from 'react';
                        

                            
2
                            

                        

                            
3
                            
class Counter extends React.Component {
                        

                            
4
                            
  constructor(props) {
                        

                            
5
                            
    super(props);
                        

                            
6
                            
    // 初始化 state
                        

                            
7
                            
    this.state = {
                        

                            
8
                            
      count: 0
                        

                            
9
                            
    };
                        

                            
10
                            
  }
                        

                            
11
                            

                        

                            
12
                            
  render() {
                        

                            
13
                            
    return (
                        

                            
14
                            
      <div>
                        

                            
15
                            
        <p>当前计数: {this.state.count}</p>
                        

                            
16
                            
        <button>增加计数</button>
                        

                            
17
                            
      </div>
                        

                            
18
                            
    );
                        

                            
19
                            
  }
                        

                            
20
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
const [stateValue, setStateValue] = useState(initialValue);
                        
                                
                            

                                
                                    

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

                            
2
                            

                        

                            
3
                            
function Counter() {
                        

                            
4
                            
  const [count, setCount] = useState(0);
                        

                            
5
                            

                        

                            
6
                            
  const handleIncrement = () => {
                        

                            
7
                            
    // 使用 setCount 函数更新 state 值
                        

                            
8
                            
    setCount(count + 1);
                        

                            
9
                            
  };
                        

                            
10
                            

                        

                            
11
                            
  return (
                        

                            
12
                            
    <div>
                        

                            
13
                            
      <p>当前计数: {count}</p>
                        

                            
14
                            
      <button onClick={handleIncrement}>增加计数</button>
                        

                            
15
                            
    </div>
                        

                            
16
                            
  );
                        

                            
17
                            
}
                        
                                
                            

                                
                                    

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

                            
2
                            

                        

                            
3
                            
function Counter() {
                        

                            
4
                            
  const [count, setCount] = useState(0);
                        

                            
5
                            

                        

                            
6
                            
  const handleIncrement = () => {
                        

                            
7
                            
    // 使用函数式更新，prevState 代表前一个 state 值
                        

                            
8
                            
    setCount(prevState => prevState + 1);
                        

                            
9
                            
  };
                        

                            
10
                            

                        

                            
11
                            
  const handleDecrement = () => {
                        

                            
12
                            
    // 使用函数式更新，prevState 代表前一个 state 值
                        

                            
13
                            
    setCount(prevState => prevState - 1);
                        

                            
14
                            
  };
                        

                            
15
                            

                        

                            
16
                            
  return (
                        

                            
17
                            
    <div>
                        

                            
18
                            
      <p>当前计数: {count}</p>
                        

                            
19
                            
      <button onClick={handleIncrement}>增加</button>
                        

                            
20
                            
      <button onClick={handleDecrement}>减少</button>
                        

                            
21
                            
    </div>
                        

                            
22
                            
  );
                        

                            
23
                            
}
                        
                                
                            

                                
                                    

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

                            
2
                            

                        

                            
3
                            
function BatchUpdateExample() {
                        

                            
4
                            
  const [count, setCount] = useState(0);
                        

                            
5
                            

                        

                            
6
                            
  const handleBatchIncrement = () => {
                        

                            
7
                            
    // 多次调用 setCount 函数，只触发一次重新渲染
                        

                            
8
                            
    setCount(count + 1);
                        

                            
9
                            
    setCount(count + 1);
                        

                            
10
                            
    setCount(count + 1);
                        

                            
11
                            
  };
                        

                            
12
                            

                        

                            
13
                            
  console.log('Component rendered'); // 观察组件渲染次数
                        

                            
14
                            

                        

                            
15
                            
  return (
                        

                            
16
                            
    <div>
                        

                            
17
                            
      <p>当前计数: {count}</p>
                        

                            
18
                            
      <button onClick={handleBatchIncrement}>批量增加计数</button>
                        

                            
19
                            
    </div>
                        

                            
20
                            
  );
                        

                            
21
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React from 'react';
                        

                            
2
                            

                        

                            
3
                            
function ButtonExample() {
                        

                            
4
                            
  const handleClick = (event) => {
                        

                            
5
                            
    // event 是合成事件对象
                        

                            
6
                            
    console.log('Button clicked!', event);
                        

                            
7
                            
    alert('Button clicked!');
                        

                            
8
                            
  };
                        

                            
9
                            

                        

                            
10
                            
  return (
                        

                            
11
                            
    <button onClick={handleClick}>点击我</button>
                        

                            
12
                            
  );
                        

                            
13
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React from 'react';
                        

                            
2
                            

                        

                            
3
                            
class ButtonExample extends React.Component {
                        

                            
4
                            
  constructor(props) {
                        

                            
5
                            
    super(props);
                        

                            
6
                            
    this.handleClick = this.handleClick.bind(this); // 在构造函数中绑定 this
                        

                            
7
                            
  }
                        

                            
8
                            

                        

                            
9
                            
  handleClick() {
                        

                            
10
                            
    console.log('Button clicked!', this); // this 指向组件实例
                        

                            
11
                            
    alert('Button clicked!');
                        

                            
12
                            
  }
                        

                            
13
                            

                        

                            
14
                            
  render() {
                        

                            
15
                            
    return (
                        

                            
16
                            
      <button onClick={this.handleClick}>点击我</button>
                        

                            
17
                            
    );
                        

                            
18
                            
  }
                        

                            
19
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React from 'react';
                        

                            
2
                            

                        

                            
3
                            
class ButtonExample extends React.Component {
                        

                            
4
                            
  handleClick = () => { // 使用箭头函数，this 自动绑定到组件实例
                        

                            
5
                            
    console.log('Button clicked!', this); // this 指向组件实例
                        

                            
6
                            
    alert('Button clicked!');
                        

                            
7
                            
  };
                        

                            
8
                            

                        

                            
9
                            
  render() {
                        

                            
10
                            
    return (
                        

                            
11
                            
      <button onClick={this.handleClick}>点击我</button>
                        

                            
12
                            
    );
                        

                            
13
                            
  }
                        

                            
14
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React from 'react';
                        

                            
2
                            

                        

                            
3
                            
class ButtonExample extends React.Component {
                        

                            
4
                            
  render() {
                        

                            
5
                            
    return (
                        

                            
6
                            
      <button onClick={() => this.handleClick()}>点击我</button> // 内联箭头函数
                        

                            
7
                            
    );
                        

                            
8
                            
  }
                        

                            
9
                            

                        

                            
10
                            
  handleClick() {
                        

                            
11
                            
    console.log('Button clicked!', this); // this 指向组件实例
                        

                            
12
                            
    alert('Button clicked!');
                        

                            
13
                            
  }
                        

                            
14
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
useEffect(effectFunction, dependencyArray);
                        
                                
                            

                                
                                    

                            
1
                            
useEffect(() => {
                        

                            
2
                            
  // 副作用逻辑
                        

                            
3
                            

                        

                            
4
                            
  return () => {
                        

                            
5
                            
    // 清理逻辑
                        

                            
6
                            
  };
                        

                            
7
                            
}, [dependencyArray]);
                        
                                
                            

                                
                                    

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

                            
2
                            

                        

                            
3
                            
function DataFetching() {
                        

                            
4
                            
  const [data, setData] = useState(null);
                        

                            
5
                            
  const [loading, setLoading] = useState(true);
                        

                            
6
                            
  const [error, setError] = useState(null);
                        

                            
7
                            

                        

                            
8
                            
  useEffect(() => {
                        

                            
9
                            
    const fetchData = async () => {
                        

                            
10
                            
      try {
                        

                            
11
                            
        const response = await fetch('https://api.example.com/data');
                        

                            
12
                            
        if (!response.ok) {
                        

                            
13
                            
          throw new Error(`HTTP error! status: ${response.status}`);
                        

                            
14
                            
        }
                        

                            
15
                            
        const json = await response.json();
                        

                            
16
                            
        setData(json);
                        

                            
17
                            
        setLoading(false);
                        

                            
18
                            
      } catch (e) {
                        

                            
19
                            
        setError(e);
                        

                            
20
                            
        setLoading(false);
                        

                            
21
                            
      }
                        

                            
22
                            
    };
                        

                            
23
                            

                        

                            
24
                            
    fetchData();
                        

                            
25
                            
  }, []); // 依赖项数组为空，只在组件挂载时执行一次
                        

                            
26
                            

                        

                            
27
                            
  if (loading) {
                        

                            
28
                            
    return <p>加载中...</p>;
                        

                            
29
                            
  }
                        

                            
30
                            

                        

                            
31
                            
  if (error) {
                        

                            
32
                            
    return <p>Error: {error.message}</p>;
                        

                            
33
                            
  }
                        

                            
34
                            

                        

                            
35
                            
  return (
                        

                            
36
                            
    <div>
                        

                            
37
                            
      <pre>{JSON.stringify(data, null, 2)}</pre>
                        

                            
38
                            
    </div>
                        

                            
39
                            
  );
                        

                            
40
                            
}
                        
                                
                            

                                
                                    

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

                            
2
                            

                        

                            
3
                            
function Timer() {
                        

                            
4
                            
  const [seconds, setSeconds] = useState(0);
                        

                            
5
                            

                        

                            
6
                            
  useEffect(() => {
                        

                            
7
                            
    const intervalId = setInterval(() => {
                        

                            
8
                            
      setSeconds(prevSeconds => prevSeconds + 1);
                        

                            
9
                            
    }, 1000);
                        

                            
10
                            

                        

                            
11
                            
    // 返回清理函数，在组件卸载时清除定时器
                        

                            
12
                            
    return () => clearInterval(intervalId);
                        

                            
13
                            
  }, []); // 依赖项数组为空，只在组件挂载时设置定时器
                        

                            
14
                            

                        

                            
15
                            
  return (
                        

                            
16
                            
    <div>
                        

                            
17
                            
      <p>已过去 {seconds} 秒</p>
                        

                            
18
                            
    </div>
                        

                            
19
                            
  );
                        

                            
20
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
const MyContext = React.createContext(null); // 创建一个 Context 对象，默认值为 null
                        
                                
                            

                                
                                    

                            
1
                            
import React from 'react';
                        

                            
2
                            
import ChildComponent from './ChildComponent';
                        

                            
3
                            
const MyContext = React.createContext('默认值');
                        

                            
4
                            

                        

                            
5
                            
function ParentComponent() {
                        

                            
6
                            
  const contextValue = 'Context 共享的值';
                        

                            
7
                            

                        

                            
8
                            
  return (
                        

                            
9
                            
    <MyContext.Provider value={contextValue}> {/* 使用 Provider 提供 Context 值 */}
                        

                            
10
                            
      <ChildComponent /> {/* ChildComponent 及其子组件都可以访问 contextValue */}
                        

                            
11
                            
    </MyContext.Provider>
                        

                            
12
                            
  );
                        

                            
13
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React, { useContext } from 'react';
                        

                            
2
                            
import MyContext from './MyContext'; // 引入 Context 对象
                        

                            
3
                            

                        

                            
4
                            
function ChildComponent() {
                        

                            
5
                            
  const contextValue = useContext(MyContext); // 使用 useContext Hook 消费 Context 值
                        

                            
6
                            

                        

                            
7
                            
  return (
                        

                            
8
                            
    <div>
                        

                            
9
                            
      <p>Context 值: {contextValue}</p>
                        

                            
10
                            
    </div>
                        

                            
11
                            
  );
                        

                            
12
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React, { createContext, useContext, useState } from 'react';
                        

                            
2
                            

                        

                            
3
                            
// 1. 创建 ThemeContext
                        

                            
4
                            
const ThemeContext = createContext('light'); // 默认主题为 'light'
                        

                            
5
                            

                        

                            
6
                            
function App() {
                        

                            
7
                            
  const [theme, setTheme] = useState('light');
                        

                            
8
                            

                        

                            
9
                            
  const toggleTheme = () => {
                        

                            
10
                            
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
                        

                            
11
                            
  };
                        

                            
12
                            

                        

                            
13
                            
  return (
                        

                            
14
                            
    // 2. 使用 ThemeContext.Provider 提供 theme 值
                        

                            
15
                            
    <ThemeContext.Provider value={theme}>
                        

                            
16
                            
      <div className={`app ${theme}`}>
                        

                            
17
                            
        <Header />
                        

                            
18
                            
        <Content />
                        

                            
19
                            
        <button onClick={toggleTheme}>切换主题</button>
                        

                            
20
                            
      </div>
                        

                            
21
                            
    </ThemeContext.Provider>
                        

                            
22
                            
  );
                        

                            
23
                            
}
                        

                            
24
                            

                        

                            
25
                            
function Header() {
                        

                            
26
                            
  return (
                        

                            
27
                            
    <header>
                        

                            
28
                            
      <h1>主题切换示例</h1>
                        

                            
29
                            
    </header>
                        

                            
30
                            
  );
                        

                            
31
                            
}
                        

                            
32
                            

                        

                            
33
                            
function Content() {
                        

                            
34
                            
  // 3. 使用 useContext(ThemeContext) 消费 theme 值
                        

                            
35
                            
  const theme = useContext(ThemeContext);
                        

                            
36
                            

                        

                            
37
                            
  return (
                        

                            
38
                            
    <div className="content">
                        

                            
39
                            
      <p>当前主题: {theme}</p>
                        

                            
40
                            
      <p>这是一个使用 Context API 实现主题切换的示例。</p>
                        

                            
41
                            
    </div>
                        

                            
42
                            
  );
                        

                            
43
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
const refContainer = useRef(initialValue);
                        
                                
                            

                                
                                    

                            
1
                            
import React, { useRef, useEffect } from 'react';
                        

                            
2
                            

                        

                            
3
                            
function FocusInput() {
                        

                            
4
                            
  const inputRef = useRef(null); // 创建一个 ref 对象，初始值为 null
                        

                            
5
                            

                        

                            
6
                            
  useEffect(() => {
                        

                            
7
                            
    // 组件挂载后，inputRef.current 指向 input DOM 元素
                        

                            
8
                            
    inputRef.current.focus(); // 调用 input DOM 元素的 focus() 方法，使其获得焦点
                        

                            
9
                            
  }, []); // 空依赖项数组，只在组件挂载时执行
                        

                            
10
                            

                        

                            
11
                            
  return (
                        

                            
12
                            
    <input type="text" ref={inputRef} /> // 将 ref 对象绑定到 input 元素的 ref 属性
                        

                            
13
                            
  );
                        

                            
14
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React, { useRef, useState } from 'react';
                        

                            
2
                            

                        

                            
3
                            
function RenderCounter() {
                        

                            
4
                            
  const [count, setCount] = useState(0);
                        

                            
5
                            
  const renderCountRef = useRef(0); // 创建 ref 对象，初始值为 0
                        

                            
6
                            

                        

                            
7
                            
  renderCountRef.current = renderCountRef.current + 1; // 每次组件渲染，递增 ref.current 值
                        

                            
8
                            

                        

                            
9
                            
  const increment = () => {
                        

                            
10
                            
    setCount(count + 1); // 更新 state，触发组件重新渲染
                        

                            
11
                            
  };
                        

                            
12
                            

                        

                            
13
                            
  return (
                        

                            
14
                            
    <div>
                        

                            
15
                            
      <p>State Count: {count}</p>
                        

                            
16
                            
      <p>Render Count (ref): {renderCountRef.current}</p> {/* 显示 ref.current 的值 */}
                        

                            
17
                            
      <button onClick={increment}>增加 State Count</button>
                        

                            
18
                            
    </div>
                        

                            
19
                            
  );
                        

                            
20
                            
}
                        
                                
                            

                                
                                    

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

                            
2
                            

                        

                            
3
                            
// 自定义 Hook useFetch，用于数据获取
                        

                            
4
                            
function useFetch(url) {
                        

                            
5
                            
  const [data, setData] = useState(null);
                        

                            
6
                            
  const [loading, setLoading] = useState(true);
                        

                            
7
                            
  const [error, setError] = useState(null);
                        

                            
8
                            

                        

                            
9
                            
  useEffect(() => {
                        

                            
10
                            
    const fetchData = async () => {
                        

                            
11
                            
      try {
                        

                            
12
                            
        const response = await fetch(url);
                        

                            
13
                            
        if (!response.ok) {
                        

                            
14
                            
          throw new Error(`HTTP error! status: ${response.status}`);
                        

                            
15
                            
        }
                        

                            
16
                            
        const json = await response.json();
                        

                            
17
                            
        setData(json);
                        

                            
18
                            
        setLoading(false);
                        

                            
19
                            
      } catch (e) {
                        

                            
20
                            
        setError(e);
                        

                            
21
                            
        setLoading(false);
                        

                            
22
                            
      }
                        

                            
23
                            
    };
                        

                            
24
                            

                        

                            
25
                            
    fetchData();
                        

                            
26
                            
  }, [url]); // 依赖项数组包含 url，当 url 变化时重新获取数据
                        

                            
27
                            

                        

                            
28
                            
  return { data, loading, error }; // 返回 data, loading, error 状态
                        

                            
29
                            
}
                        

                            
30
                            

                        

                            
31
                            
export default useFetch;
                        
                                
                            

                                
                                    

                            
1
                            
import React from 'react';
                        

                            
2
                            
import useFetch from './useFetch'; // 引入 useFetch 自定义 Hook
                        

                            
3
                            

                        

                            
4
                            
function UserList() {
                        

                            
5
                            
  const { data: users, loading, error } = useFetch('https://api.example.com/users'); // 调用 useFetch Hook
                        

                            
6
                            

                        

                            
7
                            
  if (loading) {
                        

                            
8
                            
    return <p>加载用户列表中...</p>;
                        

                            
9
                            
  }
                        

                            
10
                            

                        

                            
11
                            
  if (error) {
                        

                            
12
                            
    return <p>Error: {error.message}</p>;
                        

                            
13
                            
  }
                        

                            
14
                            

                        

                            
15
                            
  return (
                        

                            
16
                            
    <ul>
                        

                            
17
                            
      {users.map(user => (
                        

                            
18
                            
        <li key={user.id}>{user.name}</li>
                        

                            
19
                            
      ))}
                        

                            
20
                            
    </ul>
                        

                            
21
                            
  );
                        

                            
22
                            
}
                        

                            
23
                            

                        

                            
24
                            
function ProductList() {
                        

                            
25
                            
  const { data: products, loading, error } = useFetch('https://api.example.com/products'); // 调用 useFetch Hook
                        

                            
26
                            

                        

                            
27
                            
  if (loading) {
                        

                            
28
                            
    return <p>加载商品列表中...</p>;
                        

                            
29
                            
  }
                        

                            
30
                            

                        

                            
31
                            
  if (error) {
                        

                            
32
                            
    return <p>Error: {error.message}</p>;
                        

                            
33
                            
  }
                        

                            
34
                            

                        

                            
35
                            
  return (
                        

                            
36
                            
    <ul>
                        

                            
37
                            
      {products.map(product => (
                        

                            
38
                            
        <li key={product.id}>{product.name} - ${product.price}</li>
                        

                            
39
                            
      ))}
                        

                            
40
                            
    </ul>
                        

                            
41
                            
  );
                        

                            
42
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React from 'react';
                        

                            
2
                            

                        

                            
3
                            
function Greeting(props) {
                        

                            
4
                            
  const isLoggedIn = props.isLoggedIn;
                        

                            
5
                            
  if (isLoggedIn) {
                        

                            
6
                            
    return <h1>欢迎回来!</h1>;
                        

                            
7
                            
  } else {
                        

                            
8
                            
    return <h1>请登录。</h1>;
                        

                            
9
                            
  }
                        

                            
10
                            
}
                        

                            
11
                            

                        

                            
12
                            
function App() {
                        

                            
13
                            
  return (
                        

                            
14
                            
    <div>
                        

                            
15
                            
      <Greeting isLoggedIn={true} /> {/* 渲染 "欢迎回来!" */}
                        

                            
16
                            
      <Greeting isLoggedIn={false} /> {/* 渲染 "请登录。" */}
                        

                            
17
                            
    </div>
                        

                            
18
                            
  );
                        

                            
19
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React from 'react';
                        

                            
2
                            

                        

                            
3
                            
function Greeting(props) {
                        

                            
4
                            
  const isLoggedIn = props.isLoggedIn;
                        

                            
5
                            
  return (
                        

                            
6
                            
    isLoggedIn ? (
                        

                            
7
                            
      <h1>欢迎回来!</h1>
                        

                            
8
                            
    ) : (
                        

                            
9
                            
      <h1>请登录。</h1>
                        

                            
10
                            
    )
                        

                            
11
                            
  );
                        

                            
12
                            
}
                        

                            
13
                            

                        

                            
14
                            
function App() {
                        

                            
15
                            
  return (
                        

                            
16
                            
    <div>
                        

                            
17
                            
      <Greeting isLoggedIn={true} />
                        

                            
18
                            
      <Greeting isLoggedIn={false} />
                        

                            
19
                            
    </div>
                        

                            
20
                            
  );
                        

                            
21
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React from 'react';
                        

                            
2
                            

                        

                            
3
                            
function Mailbox(props) {
                        

                            
4
                            
  const unreadMessages = props.unreadMessages;
                        

                            
5
                            
  return (
                        

                            
6
                            
    <div>
                        

                            
7
                            
      <h1>你好!</h1>
                        

                            
8
                            
      {unreadMessages.length > 0 &&
                        

                            
9
                            
        <h2>
                        

                            
10
                            
          您有 {unreadMessages.length} 条未读消息。
                        

                            
11
                            
        </h2>
                        

                            
12
                            
      }
                        

                            
13
                            
    </div>
                        

                            
14
                            
  );
                        

                            
15
                            
}
                        

                            
16
                            

                        

                            
17
                            
function App() {
                        

                            
18
                            
  const messages = ['React', 'Re: React', 'Re:Re: React'];
                        

                            
19
                            
  return (
                        

                            
20
                            
    <div>
                        

                            
21
                            
      <Mailbox unreadMessages={messages} /> {/* 渲染 "您有 3 条未读消息。" */}
                        

                            
22
                            
      <Mailbox unreadMessages={[]} /> {/* 不渲染任何内容 */}
                        

                            
23
                            
    </div>
                        

                            
24
                            
  );
                        

                            
25
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React from 'react';
                        

                            
2
                            

                        

                            
3
                            
function LoginButton(props) {
                        

                            
4
                            
  return (
                        

                            
5
                            
    <button onClick={props.onClick}>
                        

                            
6
                            
      登录
                        

                            
7
                            
    </button>
                        

                            
8
                            
  );
                        

                            
9
                            
}
                        

                            
10
                            

                        

                            
11
                            
function LogoutButton(props) {
                        

                            
12
                            
  return (
                        

                            
13
                            
    <button onClick={props.onClick}>
                        

                            
14
                            
      退出
                        

                            
15
                            
    </button>
                        

                            
16
                            
  );
                        

                            
17
                            
}
                        

                            
18
                            

                        

                            
19
                            
function Greeting(props) {
                        

                            
20
                            
  const isLoggedIn = props.isLoggedIn;
                        

                            
21
                            
  let button; // 定义变量 button
                        

                            
22
                            

                        

                            
23
                            
  if (isLoggedIn) {
                        

                            
24
                            
    button = <LogoutButton onClick={props.onLogoutClick} />; // 根据条件赋值不同的组件
                        

                            
25
                            
  } else {
                        

                            
26
                            
    button = <LoginButton onClick={props.onLoginClick} />;
                        

                            
27
                            
  }
                        

                            
28
                            

                        

                            
29
                            
  return (
                        

                            
30
                            
    <div>
                        

                            
31
                            
      <GreetingMessage isLoggedIn={isLoggedIn} />
                        

                            
32
                            
      {button} {/* 渲染变量 button */}
                        

                            
33
                            
    </div>
                        

                            
34
                            
  );
                        

                            
35
                            
}
                        

                            
36
                            

                        

                            
37
                            
function GreetingMessage(props) {
                        

                            
38
                            
  const isLoggedIn = props.isLoggedIn;
                        

                            
39
                            
  if (isLoggedIn) {
                        

                            
40
                            
    return <h1>欢迎用户!</h1>;
                        

                            
41
                            
  } else {
                        

                            
42
                            
    return <h1>请先登录。</h1>;
                        

                            
43
                            
  }
                        

                            
44
                            
}
                        

                            
45
                            

                        

                            
46
                            
function App() {
                        

                            
47
                            
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);
                        

                            
48
                            

                        

                            
49
                            
  const handleLoginClick = () => {
                        

                            
50
                            
    setIsLoggedIn(true);
                        

                            
51
                            
  };
                        

                            
52
                            

                        

                            
53
                            
  const handleLogoutClick = () => {
                        

                            
54
                            
    setIsLoggedIn(false);
                        

                            
55
                            
  };
                        

                            
56
                            

                        

                            
57
                            
  return (
                        

                            
58
                            
    <div>
                        

                            
59
                            
      <Greeting
                        

                            
60
                            
        isLoggedIn={isLoggedIn}
                        

                            
61
                            
        onLoginClick={handleLoginClick}
                        

                            
62
                            
        onLogoutClick={handleLogoutClick}
                        

                            
63
                            
      />
                        

                            
64
                            
    </div>
                        

                            
65
                            
  );
                        

                            
66
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React from 'react';
                        

                            
2
                            

                        

                            
3
                            
function NumberList(props) {
                        

                            
4
                            
  const numbers = props.numbers;
                        

                            
5
                            
  const listItems = numbers.map((number) =>
                        

                            
6
                            
    <li>{number}</li> // 为每个 number 生成一个 <li> 元素
                        

                            
7
                            
  );
                        

                            
8
                            
  return (
                        

                            
9
                            
    <ul>{listItems}</ul> // 渲染 <li> 元素列表
                        

                            
10
                            
  );
                        

                            
11
                            
}
                        

                            
12
                            

                        

                            
13
                            
function App() {
                        

                            
14
                            
  const numbers = [1, 2, 3, 4, 5];
                        

                            
15
                            
  return (
                        

                            
16
                            
    <NumberList numbers={numbers} />
                        

                            
17
                            
  );
                        

                            
18
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
function UserList(props) {
                        

                            
2
                            
  const users = props.users;
                        

                            
3
                            
  const userListItems = users.map((user) =>
                        

                            
4
                            
    <li key={user.id}>{user.name}</li> // 使用 user.id 作为 key
                        

                            
5
                            
  );
                        

                            
6
                            
  return (
                        

                            
7
                            
    <ul>{userListItems}</ul>
                        

                            
8
                            
  );
                        

                            
9
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
function NumberList(props) {
                        

                            
2
                            
  const numbers = props.numbers;
                        

                            
3
                            
  const listItems = numbers.map((number, index) =>
                        

                            
4
                            
    <li key={index}>{number}</li> // 使用 index 作为 key (不推荐，除非列表顺序不变)
                        

                            
5
                            
  );
                        

                            
6
                            
  return (
                        

                            
7
                            
    <ul>{listItems}</ul>
                        

                            
8
                            
  );
                        

                            
9
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
// 错误示例 1： 未使用 key
                        

                            
2
                            
function InefficientListWithoutKey(props) {
                        

                            
3
                            
  const names = props.names;
                        

                            
4
                            
  const listItems = names.map((name) => <li>{name}</li>); // 没有 key 属性
                        

                            
5
                            
  return <ul>{listItems}</ul>;
                        

                            
6
                            
}
                        

                            
7
                            

                        

                            
8
                            
// 错误示例 2： 使用 index 作为 key (当列表顺序可能变化时)
                        

                            
9
                            
function InefficientListWithIndexKey(props) {
                        

                            
10
                            
  const names = props.names;
                        

                            
11
                            
  const listItems = names.map((name, index) => <li key={index}>{name}</li>); // 使用 index 作为 key
                        

                            
12
                            
  return <ul>{listItems}</ul>;
                        

                            
13
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
// 正确示例： 使用数据项的唯一 ID 作为 key
                        

                            
2
                            
function EfficientListWithDataIdKey(props) {
                        

                            
3
                            
  const items = props.items;
                        

                            
4
                            
  const listItems = items.map((item) => <li key={item.id}>{item.text}</li>); // 使用 item.id 作为 key
                        

                            
5
                            
  return <ul>{listItems}</ul>;
                        

                            
6
                            
}
                        
                                
                            

                                
                                    

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

                            
2
                            

                        

                            
3
                            
function ControlledInput() {
                        

                            
4
                            
  const [inputValue, setInputValue] = useState(''); // 使用 State 管理输入框的值
                        

                            
5
                            

                        

                            
6
                            
  const handleChange = (event) => {
                        

                            
7
                            
    setInputValue(event.target.value); // 事件处理函数更新 State
                        

                            
8
                            
  };
                        

                            
9
                            

                        

                            
10
                            
  return (
                        

                            
11
                            
    <div>
                        

                            
12
                            
      <input
                        

                            
13
                            
        type="text"
                        

                            
14
                            
        value={inputValue} // value 属性绑定 State
                        

                            
15
                            
        onChange={handleChange} // onChange 事件绑定事件处理函数
                        

                            
16
                            
      />
                        

                            
17
                            
      <p>输入的值: {inputValue}</p>
                        

                            
18
                            
    </div>
                        

                            
19
                            
  );
                        

                            
20
                            
}
                        
                                
                            

                                
                                    

                            
1
                            
import React, { useRef } from 'react';
                        

                            
2
                            

                        

                            
3
                            
function UncontrolledInput() {
                        

                            
4
                            
  const inputRef = useRef(null); // 创建 Ref 对象
                        

                            
5
                            

                        

                            
6
                            
  const handleSubmit = (event) => {
                        

                            
7
                            
    event.preventDefault(); // 阻止默认的表单提交行为
                        

                            
8
                            
    alert(`输入的值: ${inputRef.current.value}`); // 通过 Ref 获取 input 元素的值
                        

                            
9
                            
  };
                        

                            
10
                            

                        

                            
11
                            
  return (
                        

                            
12
                            
    <form onSubmit={handleSubmit}>
                        

                            
13
                            
      <input type="text" ref={inputRef} /> {/* ref 属性绑定 Ref 对象 */}
                        

                            
14
                            
      <button type="submit">提交</button>
                        

                            
15
                            
    </form>
                        

                            
16
                            
  );
                        

                            
17
                            
}
                        
                                
                            

                                
                                    

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

                            
2
                            

                        

                            
3
                            
function ValidatedForm() {
                        

                            
4
                            
  const [name, setName] = useState('');
                        

                            
5
                            
  const [email, setEmail] = useState('');
                        

                            
6
                            
  const [password, setPassword] = useState('');
                        

                            
7
                            
  const [errors, setErrors] = useState({}); // State 管理错误信息
                        

                            
8
                            

                        

                            
9
                            
  const validateForm = () => {
                        

                            
10
                            
    let tempErrors = {};
                        

                            
11
                            
    if (!name) {
                        

                            
12
                            
      tempErrors.name = '姓名不能为空';
                        

                            
13
                            
    }
                        

                            
14
                            
    if (!email) {
                        

                            
15
                            
      tempErrors.email = '邮箱不能为空';
                        

                            
16
                            
    } else if (!/\S+@\S+\.\S+/.test(email)) { // 邮箱格式验证
                        

                            
17
                            
      tempErrors.email = '邮箱格式不正确';
                        

                            
18
                            
    }
                        

                            
19
                            
    if (!password) {
                        

                            
20
                            
      tempErrors.password = '密码不能为空';
                        

                            
21
                            
    } else if (password.length < 6) { // 密码长度验证
                        

                            
22
                            
      tempErrors.password = '密码长度不能少于 6 位';
                        

                            
23
                            
    }
                        

                            
24
                            
    setErrors(tempErrors);
                        

                            
25
                            
    return Object.keys(tempErrors).length === 0; // 返回表单是否验证通过
                        

                            
26
                            
  };
                        

                            
27
                            

                        

                            
28
                            
  const handleSubmit = (event) => {
                        

                            
29
                            
    event.preventDefault();
                        

                            
30
                            
    if (validateForm()) { // 提交前进行表单验证
                        

                            
31
                            
      alert('表单提交成功!');
                        

                            
32
                            
      // 发送表单数据到服务器 ...
                        

                            
33
                            
    } else {
                        

                            
34
                            
      alert('表单验证失败，请检查错误信息。');
                        

                            
35
                            
    }
                        

                            
36
                            
  };
                        

                            
37
                            

                        

                            
38
                            
  return (
                        

                            
39
                            
    <form onSubmit={handleSubmit}>
                        

                            
40
                            
      <div>
                        

                            
41
                            
        <label htmlFor="name">姓名:</label>
                        

                            
42
                            
        <input
                        

                            
43
                            
          type="text"
                        

                            
44
                            
          id="name"
                        

                            
45
                            
          value={name}
                        

                            
46
                            
          onChange={(e) => setName(e.target.value)}
                        

                            
47
                            
        />
                        

                            
48
                            
        {errors.name && <p className="error">{errors.name}</p>} {/* 显示错误信息 */}
                        

                            
49
                            
      </div>
                        

                            
50
                            
      <div>
                        

                            
51
                            
        <label htmlFor="email">邮箱:</label>
                        

                            
52
                            
        <input
                        

                            
53
                            
          type="email"
                        

                            
54
                            
          id="email"
                        

                            
55
                            
          value={email}
                        

                            
56
                            
          onChange={(e) => setEmail(e.target.value)}
                        

                            
57
                            
        />
                        

                            
58
                            
        {errors.email && <p className="error">{errors.email}</p>} {/* 显示错误信息 */}
                        

                            
59
                            
      </div>
                        

                            
60
                            
      <div>
                        

                            
61
                            
        <label htmlFor="password">密码:</label>
                        

                            
62
                            
        <input
                        

                            
63
                            
          type="password"
                        

                            
64
                            
          id="password"
                        

                            
65
                            
          value={password}
                        

                            
66
                            
          onChange={(e) => setPassword(e.target.value)}
                        

                            
67
                            
        />
                        

                            
68
                            
        {errors.password && <p className="error">{errors.password}</p>} {/* 显示错误信息 */}
                        

                            
69
                            
      </div>
                        

                            
70
                            
      <button type="submit">提交</button>
                        

                            
71
                            
    </form>
                        

                            
72
                            
  );
                        

                            
73
                            
}