现代Web开发React框架JavaScript编程教程详解

威震华夏关云长

现代Web开发React框架JavaScript编程教程详解

引言

React是由Facebook开发并开源的前端JavaScript库，用于构建用户界面，特别是单页应用程序。自2013年发布以来，React已经成为最受欢迎的前端框架之一，被无数大型网站和应用所采用。React的组件化架构、虚拟DOM和单向数据流等特性，使得开发复杂交互式Web应用变得更加高效和可维护。

本教程将全面介绍React框架的核心概念、实际应用和最佳实践，帮助读者从零开始掌握React开发，并能够构建现代化的Web应用程序。

React基础

JSX是JavaScript XML的缩写，它允许我们在JavaScript代码中编写类似HTML的语法。JSX使得编写React组件变得更加直观和简洁。

2. // 基本的JSX语法
3. const element = <h1>Hello, World!</h1>;
5. // 使用表达式
6. const name = 'John';
7. const element = <h1>Hello, {name}</h1>;
9. // JSX属性
10. const element = <img src="avatar.jpg" alt="User Avatar" />;
12. // 嵌套元素
13. const element = (
14.   <div>
15.     <h1>Welcome</h1>
16.     <p>This is a paragraph.</p>
17.   </div>
18. );

复制代码

需要注意的是，JSX并不是HTML，它在编译时会被转换为普通的JavaScript函数调用。React使用Babel来将JSX代码转换为React.createElement()调用。

React应用由组件构成，组件是可复用的、独立的UI单元。React中有两种类型的组件：函数组件和类组件。

函数组件是简单的JavaScript函数，接收props（属性）作为参数，并返回React元素。

2. function Welcome(props) {
3.   return <h1>Hello, {props.name}</h1>;
4. }
6. // 或者使用箭头函数
7. const Welcome = (props) => {
8.   return <h1>Hello, {props.name}</h1>;
9. };
11. // 更简洁的箭头函数形式
12. const Welcome = (props) => <h1>Hello, {props.name}</h1>;

复制代码

类组件是继承自React.Component的ES6类，它们必须包含一个render()方法，用于返回React元素。

2. class Welcome extends React.Component {
3.   render() {
4.     return <h1>Hello, {this.props.name}</h1>;
5.   }
6. }

复制代码

在现代React开发中，函数组件配合Hooks（将在后面介绍）成为主流，但了解类组件仍然很重要，特别是在维护旧代码时。

Props（属性）是父组件传递给子组件的数据。Props是只读的，子组件不能直接修改它们。

2. function Welcome(props) {
3.   return <h1>Hello, {props.name}</h1>;
4. }
6. function App() {
7.   return <Welcome name="John" />;
8. }

复制代码

State是组件内部维护的数据，当state发生变化时，组件会重新渲染。

在函数组件中，我们使用useStateHook来管理state：

2. import React, { useState } from 'react';
4. function Counter() {
5.   // 声明一个新的state变量，初始值为0
6.   const [count, setCount] = useState(0);
8.   return (
9.     <div>
10.       <p>You clicked {count} times</p>
11.       <button onClick={() => setCount(count + 1)}>
12.         Click me
13.       </button>
14.     </div>
15.   );
16. }

复制代码

在类组件中，state通过构造函数初始化，并通过this.setState()方法更新：

2. class Counter extends React.Component {
3.   constructor(props) {
4.     super(props);
5.     this.state = { count: 0 };
6.   }
8.   render() {
9.     return (
10.       <div>
11.         <p>You clicked {this.state.count} times</p>
12.         <button onClick={() => this.setState({ count: this.state.count + 1 })}>
13.           Click me
14.         </button>
15.       </div>
16.     );
17.   }
18. }

复制代码

React核心概念

类组件有特定的生命周期方法，这些方法在组件的不同阶段被调用：

1. 挂载阶段：组件被创建并插入到DOM中constructor(): 组件构造函数static getDerivedStateFromProps(): 在渲染前调用，用于根据props更新staterender(): 渲染组件componentDidMount(): 组件挂载后调用，适合进行API调用等副作用操作
2. constructor(): 组件构造函数
3. static getDerivedStateFromProps(): 在渲染前调用，用于根据props更新state
4. render(): 渲染组件
5. componentDidMount(): 组件挂载后调用，适合进行API调用等副作用操作
6. 更新阶段：组件的props或state发生变化static getDerivedStateFromProps(): 在渲染前调用，用于根据props更新stateshouldComponentUpdate(): 决定组件是否应该重新渲染render(): 渲染组件getSnapshotBeforeUpdate(): 在DOM更新前调用，可以获取DOM更新前的信息componentDidUpdate(): 组件更新后调用
7. static getDerivedStateFromProps(): 在渲染前调用，用于根据props更新state
8. shouldComponentUpdate(): 决定组件是否应该重新渲染
9. render(): 渲染组件
10. getSnapshotBeforeUpdate(): 在DOM更新前调用，可以获取DOM更新前的信息
11. componentDidUpdate(): 组件更新后调用
12. 卸载阶段：组件从DOM中移除componentWillUnmount(): 组件卸载前调用，适合进行清理工作
13. componentWillUnmount(): 组件卸载前调用，适合进行清理工作

挂载阶段：组件被创建并插入到DOM中

• constructor(): 组件构造函数
• static getDerivedStateFromProps(): 在渲染前调用，用于根据props更新state
• render(): 渲染组件
• componentDidMount(): 组件挂载后调用，适合进行API调用等副作用操作

更新阶段：组件的props或state发生变化

• static getDerivedStateFromProps(): 在渲染前调用，用于根据props更新state
• shouldComponentUpdate(): 决定组件是否应该重新渲染
• render(): 渲染组件
• getSnapshotBeforeUpdate(): 在DOM更新前调用，可以获取DOM更新前的信息
• componentDidUpdate(): 组件更新后调用

卸载阶段：组件从DOM中移除

• componentWillUnmount(): 组件卸载前调用，适合进行清理工作

2. class LifecycleDemo extends React.Component {
3.   constructor(props) {
4.     super(props);
5.     this.state = { count: 0 };
6.     console.log('Constructor called');
7.   }
9.   componentDidMount() {
10.     console.log('Component mounted');
11.     // 可以在这里进行API调用
12.     document.title = `You clicked ${this.state.count} times`;
13.   }
15.   componentDidUpdate(prevProps, prevState) {
16.     console.log('Component updated');
17.     // 可以在这里根据state变化进行操作
18.     if (prevState.count !== this.state.count) {
19.       document.title = `You clicked ${this.state.count} times`;
20.     }
21.   }
23.   componentWillUnmount() {
24.     console.log('Component will unmount');
25.     // 清理工作，如清除定时器
26.   }
28.   render() {
29.     console.log('Component rendered');
30.     return (
31.       <div>
32.         <p>You clicked {this.state.count} times</p>
33.         <button onClick={() => this.setState({ count: this.state.count + 1 })}>
34.           Click me
35.         </button>
36.       </div>
37.     );
38.   }
39. }

复制代码

Hooks是React 16.8引入的新特性，它允许你在不编写类组件的情况下使用state和其他React特性。Hooks只能在函数组件的顶层调用，不能在条件语句、循环或嵌套函数中调用。

useState用于在函数组件中添加state。

2. import React, { useState } from 'react';
4. function Counter() {
5.   const [count, setCount] = useState(0);
6.   // 可以有多个state变量
7.   const [name, setName] = useState('John');
9.   return (
10.     <div>
11.       <p>You clicked {count} times</p>
12.       <button onClick={() => setCount(count + 1)}>
13.         Click me
14.       </button>
15.       <p>Hello, {name}</p>
16.       <button onClick={() => setName('Jane')}>
17.         Change name
18.       </button>
19.     </div>
20.   );
21. }

复制代码

useEffect用于处理副作用，如API调用、订阅、手动操作DOM等。它相当于类组件中的componentDidMount、componentDidUpdate和componentWillUnmount的组合。

2. import React, { useState, useEffect } from 'react';
4. function Example() {
5.   const [count, setCount] = useState(0);
7.   // 类似于componentDidMount和componentDidUpdate
8.   useEffect(() => {
9.     // 更新文档标题
10.     document.title = `You clicked ${count} times`;
11.   });
13.   // 只在挂载时执行一次，类似于componentDidMount
14.   useEffect(() => {
15.     console.log('Component mounted');
16.     // 可以在这里进行API调用
17.     fetch('https://api.example.com/data')
18.       .then(response => response.json())
19.       .then(data => console.log(data));
20.   }, []); // 空依赖数组表示只在挂载时执行
22.   // 在count变化时执行，类似于componentDidUpdate
23.   useEffect(() => {
24.     console.log('Count changed:', count);
25.   }, [count]); // 依赖数组包含count，表示count变化时执行
27.   // 清理副作用，类似于componentWillUnmount
28.   useEffect(() => {
29.     const timer = setInterval(() => {
30.       console.log('Timer tick');
31.     }, 1000);
33.     // 返回的函数会在组件卸载时执行
34.     return () => {
35.       clearInterval(timer);
36.       console.log('Timer cleared');
37.     };
38.   }, []);
40.   return (
41.     <div>
42.       <p>You clicked {count} times</p>
43.       <button onClick={() => setCount(count + 1)}>
44.         Click me
45.       </button>
46.     </div>
47.   );
48. }

复制代码

useContext用于在组件间共享数据，避免props层层传递。

2. import React, { createContext, useContext, useState } from 'react';
4. // 创建Context
5. const ThemeContext = createContext();
7. function App() {
8.   const [theme, setTheme] = useState('light');
10.   return (
11.     // 使用Provider提供值
12.     <ThemeContext.Provider value={{ theme, setTheme }}>
13.       <Toolbar />
14.     </ThemeContext.Provider>
15.   );
16. }
18. function Toolbar() {
19.   return (
20.     <div>
21.       <ThemedButton />
22.     </div>
23.   );
24. }
26. function ThemedButton() {
27.   // 使用Consumer获取值
28.   const { theme, setTheme } = useContext(ThemeContext);
30.   return (
31.     <button
32.       style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#333' : '#fff' }}
33.       onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
34.     >
35.       Toggle Theme
36.     </button>
37.   );
38. }

复制代码

useReducer是useState的替代方案，适用于复杂的state逻辑。

2. import React, { useReducer } from 'react';
4. // 定义reducer函数
5. function reducer(state, action) {
6.   switch (action.type) {
7.     case 'increment':
8.       return { count: state.count + 1 };
9.     case 'decrement':
10.       return { count: state.count - 1 };
11.     default:
12.       throw new Error();
13.   }
14. }
16. function Counter() {
17.   // 使用useReducer
18.   const [state, dispatch] = useReducer(reducer, { count: 0 });
20.   return (
21.     <>
22.       Count: {state.count}
23.       <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
24.       <button onClick={() => dispatch({ type: 'increment' })}>+</button>
25.     </>
26.   );
27. }

复制代码

自定义Hooks是一种复用状态逻辑的机制，它允许你将组件逻辑提取到可重用的函数中。

2. import { useState, useEffect } from 'react';
4. // 自定义Hook：处理窗口大小变化
5. function useWindowWidth() {
6.   const [width, setWidth] = useState(window.innerWidth);
8.   useEffect(() => {
9.     const handleResize = () => setWidth(window.innerWidth);
10.     window.addEventListener('resize', handleResize);
11.    
12.     return () => {
13.       window.removeEventListener('resize', handleResize);
14.     };
15.   }, []);
17.   return width;
18. }
20. // 使用自定义Hook
21. function ResponsiveComponent() {
22.   const width = useWindowWidth();
24.   return (
25.     <div>
26.       Current window width: {width}px
27.       {width < 768 ? <MobileView /> : <DesktopView />}
28.     </div>
29.   );
30. }
32. function MobileView() {
33.   return <div>This is mobile view</div>;
34. }
36. function DesktopView() {
37.   return <div>This is desktop view</div>;
38. }

复制代码

Context提供了一种在组件树中共享数据的方式，而不必通过props逐层传递。当多个组件需要访问相同的数据时，Context非常有用。

2. import React, { createContext, useContext, useState } from 'react';
4. // 创建Context
5. const UserContext = createContext();
7. function App() {
8.   const [user, setUser] = useState({ name: 'John', age: 30 });
10.   return (
11.     // 使用Provider提供值
12.     <UserContext.Provider value={{ user, setUser }}>
13.       <Profile />
14.       <UpdateUser />
15.     </UserContext.Provider>
16.   );
17. }
19. function Profile() {
20.   // 使用Consumer获取值
21.   const { user } = useContext(UserContext);
23.   return (
24.     <div>
25.       <h2>Profile</h2>
26.       <p>Name: {user.name}</p>
27.       <p>Age: {user.age}</p>
28.     </div>
29.   );
30. }
32. function UpdateUser() {
33.   const { user, setUser } = useContext(UserContext);
35.   const updateName = () => {
36.     setUser({ ...user, name: 'Jane' });
37.   };
39.   return (
40.     <div>
41.       <h2>Update User</h2>
42.       <button onClick={updateName}>Change Name to Jane</button>
43.     </div>
44.   );
45. }

复制代码

路由与导航

在单页应用中，路由是实现不同页面间导航的关键。React Router是React中最流行的路由库。

2. npm install react-router-dom

复制代码

2. import React from 'react';
3. import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
5. function App() {
6.   return (
7.     <Router>
8.       <div>
9.         <nav>
10.           <ul>
11.             <li><Link to="/">Home</Link></li>
12.             <li><Link to="/about">About</Link></li>
13.             <li><Link to="/users">Users</Link></li>
14.           </ul>
15.         </nav>
17.         <Routes>
18.           <Route path="/" element={<Home />} />
19.           <Route path="/about" element={<About />} />
20.           <Route path="/users" element={<Users />} />
21.         </Routes>
22.       </div>
23.     </Router>
24.   );
25. }
27. function Home() {
28.   return <h2>Home</h2>;
29. }
31. function About() {
32.   return <h2>About</h2>;
33. }
35. function Users() {
36.   return <h2>Users</h2>;
37. }

复制代码

2. import React from 'react';
3. import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';
5. function App() {
6.   return (
7.     <Router>
8.       <div>
9.         <nav>
10.           <ul>
11.             <li><Link to="/">Home</Link></li>
12.             <li><Link to="/users">Users</Link></li>
13.           </ul>
14.         </nav>
16.         <Routes>
17.           <Route path="/" element={<Home />} />
18.           <Route path="/users" element={<Users />} />
19.           <Route path="/users/:id" element={<UserDetail />} />
20.         </Routes>
21.       </div>
22.     </Router>
23.   );
24. }
26. function Home() {
27.   return <h2>Home</h2>;
28. }
30. function Users() {
31.   const users = [
32.     { id: 1, name: 'John' },
33.     { id: 2, name: 'Jane' },
34.     { id: 3, name: 'Bob' }
35.   ];
37.   return (
38.     <div>
39.       <h2>Users</h2>
40.       <ul>
41.         {users.map(user => (
42.           <li key={user.id}>
43.             <Link to={`/users/${user.id}`}>{user.name}</Link>
44.           </li>
45.         ))}
46.       </ul>
47.     </div>
48.   );
49. }
51. function UserDetail() {
52.   // 获取URL参数
53.   const { id } = useParams();
54.   
55.   // 模拟根据ID获取用户数据
56.   const users = {
57.     1: { name: 'John', email: 'john@example.com' },
58.     2: { name: 'Jane', email: 'jane@example.com' },
59.     3: { name: 'Bob', email: 'bob@example.com' }
60.   };
61.   
62.   const user = users[id];
64.   if (!user) {
65.     return <div>User not found</div>;
66.   }
68.   return (
69.     <div>
70.       <h2>User Detail</h2>
71.       <p>Name: {user.name}</p>
72.       <p>Email: {user.email}</p>
73.       <Link to="/users">Back to Users</Link>
74.     </div>
75.   );
76. }

复制代码

2. import React from 'react';
3. import { BrowserRouter as Router, Routes, Route, Link, Outlet } from 'react-router-dom';
5. function App() {
6.   return (
7.     <Router>
8.       <div>
9.         <nav>
10.           <ul>
11.             <li><Link to="/">Home</Link></li>
12.             <li><Link to="/products">Products</Link></li>
13.           </ul>
14.         </nav>
16.         <Routes>
17.           <Route path="/" element={<Home />} />
18.           <Route path="products" element={<Products />}>
19.             <Route path="featured" element={<FeaturedProducts />} />
20.             <Route path="new" element={<NewProducts />} />
21.           </Route>
22.         </Routes>
23.       </div>
24.     </Router>
25.   );
26. }
28. function Home() {
29.   return <h2>Home</h2>;
30. }
32. function Products() {
33.   return (
34.     <div>
35.       <h2>Products</h2>
36.       <nav>
37.         <ul>
38.           <li><Link to="/products/featured">Featured Products</Link></li>
39.           <li><Link to="/products/new">New Products</Link></li>
40.         </ul>
41.       </nav>
42.       {/* 嵌套路由的渲染位置 */}
43.       <Outlet />
44.     </div>
45.   );
46. }
48. function FeaturedProducts() {
49.   return <h3>Featured Products</h3>;
50. }
52. function NewProducts() {
53.   return <h3>New Products</h3>;
54. }

复制代码

2. import React from 'react';
3. import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
5. function App() {
6.   return (
7.     <Router>
8.       <Routes>
9.         <Route path="/" element={<Home />} />
10.         <Route path="/about" element={<About />} />
11.         <Route path="/contact" element={<Contact />} />
12.       </Routes>
13.     </Router>
14.   );
15. }
17. function Home() {
18.   const navigate = useNavigate();
20.   const goToAbout = () => {
21.     navigate('/about');
22.   };
24.   return (
25.     <div>
26.       <h2>Home</h2>
27.       <button onClick={goToAbout}>Go to About</button>
28.     </div>
29.   );
30. }
32. function About() {
33.   const navigate = useNavigate();
35.   const goToContact = () => {
36.     navigate('/contact');
37.   };
39.   const goBack = () => {
40.     navigate(-1); // 返回上一页
41.   };
43.   return (
44.     <div>
45.       <h2>About</h2>
46.       <button onClick={goToContact}>Go to Contact</button>
47.       <button onClick={goBack}>Go Back</button>
48.     </div>
49.   );
50. }
52. function Contact() {
53.   return <h2>Contact</h2>;
54. }

复制代码

状态管理

随着应用规模的扩大，组件间的状态共享和管理变得越来越复杂。虽然React的Context API可以解决一些问题，但对于大型应用，使用专门的状态管理库会更加高效。

Redux是一个可预测的状态容器，用于JavaScript应用。它可以帮助你管理应用的全局状态。

2. npm install redux react-redux

复制代码

2. import React from 'react';
3. import { createStore } from 'redux';
4. import { Provider, useSelector, useDispatch } from 'react-redux';
6. // 1. 定义action类型
7. const INCREMENT = 'INCREMENT';
8. const DECREMENT = 'DECREMENT';
10. // 2. 定义action creators
11. const increment = () => ({ type: INCREMENT });
12. const decrement = () => ({ type: DECREMENT });
14. // 3. 定义reducer
15. function counterReducer(state = { count: 0 }, action) {
16.   switch (action.type) {
17.     case INCREMENT:
18.       return { count: state.count + 1 };
19.     case DECREMENT:
20.       return { count: state.count - 1 };
21.     default:
22.       return state;
23.   }
24. }
26. // 4. 创建store
27. const store = createStore(counterReducer);
29. function App() {
30.   return (
31.     // 5. 使用Provider提供store
32.     <Provider store={store}>
33.       <Counter />
34.     </Provider>
35.   );
36. }
38. function Counter() {
39.   // 6. 使用useSelector获取state
40.   const count = useSelector(state => state.count);
41.   
42.   // 7. 使用useDispatch获取dispatch函数
43.   const dispatch = useDispatch();
45.   return (
46.     <div>
47.       <h1>Counter: {count}</h1>
48.       <button onClick={() => dispatch(increment())}>Increment</button>
49.       <button onClick={() => dispatch(decrement())}>Decrement</button>
50.     </div>
51.   );
52. }

复制代码

Redux Toolkit是Redux官方推荐的工具集，它简化了Redux的设置和使用。

2. npm install @reduxjs/toolkit react-redux

复制代码

2. import React from 'react';
3. import { configureStore, createSlice } from '@reduxjs/toolkit';
4. import { Provider, useSelector, useDispatch } from 'react-redux';
6. // 1. 创建slice
7. const counterSlice = createSlice({
8.   name: 'counter',
9.   initialState: { count: 0 },
10.   reducers: {
11.     increment: (state) => {
12.       state.count += 1;
13.     },
14.     decrement: (state) => {
15.       state.count -= 1;
16.     },
17.     incrementByAmount: (state, action) => {
18.       state.count += action.payload;
19.     }
20.   }
21. });
23. // 导出action creators
24. export const { increment, decrement, incrementByAmount } = counterSlice.actions;
26. // 2. 配置store
27. const store = configureStore({
28.   reducer: {
29.     counter: counterSlice.reducer
30.   }
31. });
33. function App() {
34.   return (
35.     <Provider store={store}>
36.       <Counter />
37.     </Provider>
38.   );
39. }
41. function Counter() {
42.   const count = useSelector((state) => state.counter.count);
43.   const dispatch = useDispatch();
45.   return (
46.     <div>
47.       <h1>Counter: {count}</h1>
48.       <button onClick={() => dispatch(increment())}>Increment</button>
49.       <button onClick={() => dispatch(decrement())}>Decrement</button>
50.       <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
51.     </div>
52.   );
53. }

复制代码

Redux Thunk是一个中间件，允许你在Redux应用中编写异步逻辑。

2. npm install redux-thunk

复制代码

2. import React, { useEffect } from 'react';
3. import { configureStore, createSlice } from '@reduxjs/toolkit';
4. import { Provider, useSelector, useDispatch } from 'react-redux';
5. import thunk from 'redux-thunk';
7. // 用户slice
8. const userSlice = createSlice({
9.   name: 'user',
10.   initialState: { user: null, loading: false, error: null },
11.   reducers: {
12.     fetchUserStart: (state) => {
13.       state.loading = true;
14.       state.error = null;
15.     },
16.     fetchUserSuccess: (state, action) => {
17.       state.loading = false;
18.       state.user = action.payload;
19.     },
20.     fetchUserFailure: (state, action) => {
21.       state.loading = false;
22.       state.error = action.payload;
23.     }
24.   }
25. });
27. export const { fetchUserStart, fetchUserSuccess, fetchUserFailure } = userSlice.actions;
29. // 异步action creator
30. export const fetchUser = (id) => {
31.   return async (dispatch) => {
32.     dispatch(fetchUserStart());
33.    
34.     try {
35.       const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
36.       const data = await response.json();
37.       dispatch(fetchUserSuccess(data));
38.     } catch (error) {
39.       dispatch(fetchUserFailure(error.message));
40.     }
41.   };
42. };
44. // 配置store
45. const store = configureStore({
46.   reducer: {
47.     user: userSlice.reducer
48.   },
49.   middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk)
50. });
52. function App() {
53.   return (
54.     <Provider store={store}>
55.       <UserProfile />
56.     </Provider>
57.   );
58. }
60. function UserProfile() {
61.   const { user, loading, error } = useSelector((state) => state.user);
62.   const dispatch = useDispatch();
64.   useEffect(() => {
65.     dispatch(fetchUser(1));
66.   }, [dispatch]);
68.   if (loading) return <div>Loading...</div>;
69.   if (error) return <div>Error: {error}</div>;
70.   if (!user) return null;
72.   return (
73.     <div>
74.       <h1>User Profile</h1>
75.       <p>Name: {user.name}</p>
76.       <p>Email: {user.email}</p>
77.       <p>Website: {user.website}</p>
78.     </div>
79.   );
80. }

复制代码

MobX是另一个流行的状态管理库，它采用响应式编程模型，相比Redux更加简洁和直观。

2. npm install mobx mobx-react-lite

复制代码

2. import React from 'react';
3. import { makeAutoObservable } from 'mobx';
4. import { observer } from 'mobx-react-lite';
6. // 1. 创建store
7. class CounterStore {
8.   count = 0;
10.   constructor() {
11.     makeAutoObservable(this);
12.   }
14.   increment() {
15.     this.count += 1;
16.   }
18.   decrement() {
19.     this.count -= 1;
20.   }
21. }
23. // 2. 实例化store
24. const counterStore = new CounterStore();
26. // 3. 创建组件并使用observer包装
27. const Counter = observer(() => {
28.   return (
29.     <div>
30.       <h1>Counter: {counterStore.count}</h1>
31.       <button onClick={() => counterStore.increment()}>Increment</button>
32.       <button onClick={() => counterStore.decrement()}>Decrement</button>
33.     </div>
34.   );
35. });
37. function App() {
38.   return <Counter />;
39. }

复制代码

与后端交互

现代Web应用通常需要与后端API进行交互，获取和提交数据。React中有多种方式可以实现这一点。

Fetch API是现代浏览器内置的用于网络请求的接口。

2. import React, { useState, useEffect } from 'react';
4. function UserList() {
5.   const [users, setUsers] = useState([]);
6.   const [loading, setLoading] = useState(true);
7.   const [error, setError] = useState(null);
9.   useEffect(() => {
10.     // 使用fetch获取数据
11.     fetch('https://jsonplaceholder.typicode.com/users')
12.       .then(response => {
13.         if (!response.ok) {
14.           throw new Error('Network response was not ok');
15.         }
16.         return response.json();
17.       })
18.       .then(data => {
19.         setUsers(data);
20.         setLoading(false);
21.       })
22.       .catch(error => {
23.         setError(error.message);
24.         setLoading(false);
25.       });
26.   }, []);
28.   if (loading) return <div>Loading...</div>;
29.   if (error) return <div>Error: {error}</div>;
31.   return (
32.     <div>
33.       <h1>User List</h1>
34.       <ul>
35.         {users.map(user => (
36.           <li key={user.id}>
37.             {user.name} - {user.email}
38.           </li>
39.         ))}
40.       </ul>
41.     </div>
42.   );
43. }

复制代码

Axios是一个流行的HTTP客户端，它提供了比Fetch API更丰富的功能。

2. npm install axios

复制代码

2. import React, { useState, useEffect } from 'react';
3. import axios from 'axios';
5. function UserList() {
6.   const [users, setUsers] = useState([]);
7.   const [loading, setLoading] = useState(true);
8.   const [error, setError] = useState(null);
10.   useEffect(() => {
11.     // 使用axios获取数据
12.     axios.get('https://jsonplaceholder.typicode.com/users')
13.       .then(response => {
14.         setUsers(response.data);
15.         setLoading(false);
16.       })
17.       .catch(error => {
18.         setError(error.message);
19.         setLoading(false);
20.       });
21.   }, []);
23.   if (loading) return <div>Loading...</div>;
24.   if (error) return <div>Error: {error}</div>;
26.   return (
27.     <div>
28.       <h1>User List</h1>
29.       <ul>
30.         {users.map(user => (
31.           <li key={user.id}>
32.             {user.name} - {user.email}
33.           </li>
34.         ))}
35.       </ul>
36.     </div>
37.   );
38. }

复制代码

2. import React, { useState } from 'react';
3. import axios from 'axios';
5. function CreateUser() {
6.   const [name, setName] = useState('');
7.   const [email, setEmail] = useState('');
8.   const [loading, setLoading] = useState(false);
9.   const [error, setError] = useState(null);
10.   const [success, setSuccess] = useState(false);
12.   const handleSubmit = (e) => {
13.     e.preventDefault();
14.     setLoading(true);
15.     setError(null);
16.     setSuccess(false);
18.     const newUser = {
19.       name,
20.       email,
21.       username: name.toLowerCase().replace(/\s+/g, '')
22.     };
24.     axios.post('https://jsonplaceholder.typicode.com/users', newUser)
25.       .then(response => {
26.         console.log('User created:', response.data);
27.         setSuccess(true);
28.         setName('');
29.         setEmail('');
30.         setLoading(false);
31.       })
32.       .catch(error => {
33.         setError(error.message);
34.         setLoading(false);
35.       });
36.   };
38.   return (
39.     <div>
40.       <h1>Create User</h1>
41.       {success && <div style={{ color: 'green' }}>User created successfully!</div>}
42.       {error && <div style={{ color: 'red' }}>Error: {error}</div>}
43.       <form onSubmit={handleSubmit}>
44.         <div>
45.           <label>Name:</label>
46.           <input
47.             type="text"
48.             value={name}
49.             onChange={(e) => setName(e.target.value)}
50.             required
51.           />
52.         </div>
53.         <div>
54.           <label>Email:</label>
55.           <input
56.             type="email"
57.             value={email}
58.             onChange={(e) => setEmail(e.target.value)}
59.             required
60.           />
61.         </div>
62.         <button type="submit" disabled={loading}>
63.           {loading ? 'Creating...' : 'Create User'}
64.         </button>
65.       </form>
66.     </div>
67.   );
68. }

复制代码

React Query是一个强大的数据获取库，它提供了缓存、后台更新、乐观更新等功能。

2. npm install react-query

复制代码

2. import React from 'react';
3. import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
4. import axios from 'axios';
6. // 创建QueryClient
7. const queryClient = new QueryClient();
9. // 获取用户数据的函数
10. const fetchUsers = async () => {
11.   const { data } = await axios.get('https://jsonplaceholder.typicode.com/users');
12.   return data;
13. };
15. function UserList() {
16.   // 使用useQuery获取数据
17.   const { data: users, isLoading, error } = useQuery('users', fetchUsers);
19.   if (isLoading) return <div>Loading...</div>;
20.   if (error) return <div>Error: {error.message}</div>;
22.   return (
23.     <div>
24.       <h1>User List</h1>
25.       <ul>
26.         {users.map(user => (
27.           <li key={user.id}>
28.             {user.name} - {user.email}
29.           </li>
30.         ))}
31.       </ul>
32.     </div>
33.   );
34. }
36. function App() {
37.   return (
38.     // 使用QueryClientProvider提供QueryClient
39.     <QueryClientProvider client={queryClient}>
40.       <UserList />
41.     </QueryClientProvider>
42.   );
43. }

复制代码

样式处理

在React应用中，有多种方式可以处理组件样式。每种方法都有其优缺点，适用于不同的场景。

内联样式是直接在JSX元素上使用style属性定义样式。

2. function Button() {
3.   const buttonStyle = {
4.     backgroundColor: '#4CAF50',
5.     border: 'none',
6.     color: 'white',
7.     padding: '15px 32px',
8.     textAlign: 'center',
9.     textDecoration: 'none',
10.     display: 'inline-block',
11.     fontSize: '16px',
12.     margin: '4px 2px',
13.     cursor: 'pointer',
14.     borderRadius: '4px'
15.   };
17.   return <button style={buttonStyle}>Click Me</button>;
18. }

复制代码

CSS Modules允许你将CSS文件限定在特定组件范围内，避免全局样式冲突。

2. /* Button.module.css */
3. .button {
4.   background-color: #4CAF50;
5.   border: none;
6.   color: white;
7.   padding: 15px 32px;
8.   text-align: center;
9.   text-decoration: none;
10.   display: inline-block;
11.   font-size: 16px;
12.   margin: 4px 2px;
13.   cursor: pointer;
14.   border-radius: 4px;
15. }
17. .button:hover {
18.   background-color: #45a049;
19. }

复制代码

2. import React from 'react';
3. import styles from './Button.module.css';
5. function Button() {
6.   return <button className={styles.button}>Click Me</button>;
7. }

复制代码

Styled Components是一个流行的CSS-in-JS库，它允许你在JavaScript中编写CSS。

2. npm install styled-components

复制代码

2. import React from 'react';
3. import styled from 'styled-components';
5. // 创建styled组件
6. const StyledButton = styled.button`
7.   background-color: ${props => props.primary ? '#4CAF50' : 'white'};
8.   color: ${props => props.primary ? 'white' : '#4CAF50'};
9.   border: 2px solid #4CAF50;
10.   padding: 15px 32px;
11.   text-align: center;
12.   text-decoration: none;
13.   display: inline-block;
14.   font-size: 16px;
15.   margin: 4px 2px;
16.   cursor: pointer;
17.   border-radius: 4px;
18.   
19.   &:hover {
20.     background-color: ${props => props.primary ? '#45a049' : '#f1f1f1'};
21.   }
22. `;
24. function Button() {
25.   return (
26.     <div>
27.       <StyledButton>Normal Button</StyledButton>
28.       <StyledButton primary>Primary Button</StyledButton>
29.     </div>
30.   );
31. }

复制代码

Emotion是另一个流行的CSS-in-JS库，它提供了强大的样式解决方案。

2. npm install @emotion/react @emotion/styled

复制代码

2. import React from 'react';
3. import styled from '@emotion/styled';
5. // 创建styled组件
6. const StyledButton = styled.button`
7.   background-color: ${props => props.primary ? '#4CAF50' : 'white'};
8.   color: ${props => props.primary ? 'white' : '#4CAF50'};
9.   border: 2px solid #4CAF50;
10.   padding: 15px 32px;
11.   text-align: center;
12.   text-decoration: none;
13.   display: inline-block;
14.   font-size: 16px;
15.   margin: 4px 2px;
16.   cursor: pointer;
17.   border-radius: 4px;
18.   
19.   &:hover {
20.     background-color: ${props => props.primary ? '#45a049' : '#f1f1f1'};
21.   }
22. `;
24. function Button() {
25.   return (
26.     <div>
27.       <StyledButton>Normal Button</StyledButton>
28.       <StyledButton primary>Primary Button</StyledButton>
29.     </div>
30.   );
31. }

复制代码

Tailwind CSS是一个实用程序优先的CSS框架，它提供了低级别的实用程序类来构建自定义设计。

2. npm install tailwindcss postcss autoprefixer
3. npx tailwindcss init -p

复制代码

2. // tailwind.config.js
3. module.exports = {
4.   content: [
5.     "./src/**/*.{js,jsx,ts,tsx}",
6.   ],
7.   theme: {
8.     extend: {},
9.   },
10.   plugins: [],
11. }

复制代码

2. /* src/index.css */
3. @tailwind base;
4. @tailwind components;
5. @tailwind utilities;

复制代码

2. import React from 'react';
4. function Button() {
5.   return (
6.     <div>
7.       <button className="bg-white text-green-500 border-2 border-green-500 px-8 py-4 text-base m-2 rounded cursor-pointer hover:bg-gray-100">
8.         Normal Button
9.       </button>
10.       <button className="bg-green-500 text-white border-2 border-green-500 px-8 py-4 text-base m-2 rounded cursor-pointer hover:bg-green-600">
11.         Primary Button
12.       </button>
13.     </div>
14.   );
15. }

复制代码

测试

测试是确保应用质量和稳定性的重要环节。React应用通常使用Jest和React Testing Library进行测试。

Create React App已经内置了Jest和React Testing Library，所以不需要额外安装。如果你使用其他构建工具，可以手动安装：

2. npm install --save-dev jest @testing-library/react @testing-library/jest-dom

复制代码

2. // Button.js
3. import React from 'react';
5. function Button({ onClick, children }) {
6.   return (
7.     <button onClick={onClick}>
8.       {children}
9.     </button>
10.   );
11. }
13. export default Button;

复制代码

2. // Button.test.js
3. import React from 'react';
4. import { render, screen, fireEvent } from '@testing-library/react';
5. import Button from './Button';
7. test('renders button with text', () => {
8.   render(<Button>Click Me</Button>);
9.   const buttonElement = screen.getByText(/Click Me/i);
10.   expect(buttonElement).toBeInTheDocument();
11. });
13. test('calls onClick when button is clicked', () => {
14.   const handleClick = jest.fn();
15.   render(<Button onClick={handleClick}>Click Me</Button>);
16.   
17.   const buttonElement = screen.getByText(/Click Me/i);
18.   fireEvent.click(buttonElement);
19.   
20.   expect(handleClick).toHaveBeenCalledTimes(1);
21. });

复制代码

2. // UserList.js
3. import React, { useState, useEffect } from 'react';
4. import axios from 'axios';
6. function UserList() {
7.   const [users, setUsers] = useState([]);
8.   const [loading, setLoading] = useState(true);
10.   useEffect(() => {
11.     axios.get('https://jsonplaceholder.typicode.com/users')
12.       .then(response => {
13.         setUsers(response.data);
14.         setLoading(false);
15.       });
16.   }, []);
18.   if (loading) return <div>Loading...</div>;
20.   return (
21.     <div>
22.       <h1>User List</h1>
23.       <ul>
24.         {users.map(user => (
25.           <li key={user.id}>
26.             {user.name} - {user.email}
27.           </li>
28.         ))}
29.       </ul>
30.     </div>
31.   );
32. }
34. export default UserList;

复制代码

2. // UserList.test.js
3. import React from 'react';
4. import { render, screen, waitFor } from '@testing-library/react';
5. import axios from 'axios';
6. import UserList from './UserList';
8. // Mock axios
9. jest.mock('axios');
11. test('renders user list after loading', async () => {
12.   // Mock API response
13.   const mockUsers = [
14.     { id: 1, name: 'John Doe', email: 'john@example.com' },
15.     { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
16.   ];
17.   
18.   axios.get.mockResolvedValue({ data: mockUsers });
19.   
20.   render(<UserList />);
21.   
22.   // Initially should show loading
23.   expect(screen.getByText(/Loading.../i)).toBeInTheDocument();
24.   
25.   // Wait for the user list to be rendered
26.   await waitFor(() => {
27.     expect(screen.getByText(/John Doe/i)).toBeInTheDocument();
28.     expect(screen.getByText(/jane@example.com/i)).toBeInTheDocument();
29.   });
30. });

复制代码

2. // useCounter.js
3. import { useState } from 'react';
5. function useCounter(initialValue = 0) {
6.   const [count, setCount] = useState(initialValue);
7.   
8.   const increment = () => setCount(count + 1);
9.   const decrement = () => setCount(count - 1);
10.   const reset = () => setCount(initialValue);
11.   
12.   return { count, increment, decrement, reset };
13. }
15. export default useCounter;

复制代码

2. // useCounter.test.js
3. import { renderHook, act } from '@testing-library/react-hooks';
4. import useCounter from './useCounter';
6. test('should increment counter', () => {
7.   const { result } = renderHook(() => useCounter());
8.   
9.   act(() => {
10.     result.current.increment();
11.   });
12.   
13.   expect(result.current.count).toBe(1);
14. });
16. test('should decrement counter', () => {
17.   const { result } = renderHook(() => useCounter());
18.   
19.   act(() => {
20.     result.current.decrement();
21.   });
22.   
23.   expect(result.current.count).toBe(-1);
24. });
26. test('should reset counter', () => {
27.   const { result } = renderHook(() => useCounter(5));
28.   
29.   act(() => {
30.     result.current.increment();
31.     result.current.increment();
32.   });
33.   
34.   expect(result.current.count).toBe(7);
35.   
36.   act(() => {
37.     result.current.reset();
38.   });
39.   
40.   expect(result.current.count).toBe(5);
41. });

复制代码

性能优化

随着应用规模的增长，性能优化变得越来越重要。React提供了多种优化技术来提高应用的性能。

React.memo是一个高阶组件，它通过记忆化组件的渲染结果来优化性能。如果组件的props没有变化，React将跳过渲染组件并复用上次渲染的结果。

2. import React from 'react';
4. // 普通组件
5. const ExpensiveComponent = ({ data }) => {
6.   console.log('ExpensiveComponent rendered');
7.   return (
8.     <div>
9.       {data.map(item => (
10.         <div key={item.id}>{item.name}</div>
11.       ))}
12.     </div>
13.   );
14. };
16. // 使用React.memo优化
17. const MemoizedExpensiveComponent = React.memo(({ data }) => {
18.   console.log('MemoizedExpensiveComponent rendered');
19.   return (
20.     <div>
21.       {data.map(item => (
22.         <div key={item.id}>{item.name}</div>
23.       ))}
24.     </div>
25.   );
26. });
28. function App() {
29.   const [count, setCount] = React.useState(0);
30.   const [data, setData] = React.useState([
31.     { id: 1, name: 'Item 1' },
32.     { id: 2, name: 'Item 2' },
33.     { id: 3, name: 'Item 3' }
34.   ]);
36.   return (
37.     <div>
38.       <h1>Count: {count}</h1>
39.       <button onClick={() => setCount(count + 1)}>Increment</button>
40.       
41.       <h2>Expensive Component</h2>
42.       <ExpensiveComponent data={data} />
43.       
44.       <h2>Memoized Expensive Component</h2>
45.       <MemoizedExpensiveComponent data={data} />
46.     </div>
47.   );
48. }

复制代码

useMemo用于缓存计算结果，避免在每次渲染时都进行昂贵的计算。

2. import React from 'react';
4. function ExpensiveCalculation({ numbers }) {
5.   // 没有使用useMemo，每次渲染都会重新计算
6.   const sumWithoutMemo = numbers.reduce((acc, num) => acc + num, 0);
7.   
8.   // 使用useMemo，只有numbers变化时才重新计算
9.   const sumWithMemo = React.useMemo(() => {
10.     console.log('Expensive calculation performed');
11.     return numbers.reduce((acc, num) => acc + num, 0);
12.   }, [numbers]);
14.   return (
15.     <div>
16.       <p>Sum without memo: {sumWithoutMemo}</p>
17.       <p>Sum with memo: {sumWithMemo}</p>
18.     </div>
19.   );
20. }
22. function App() {
23.   const [count, setCount] = React.useState(0);
24.   const [numbers, setNumbers] = React.useState([1, 2, 3, 4, 5]);
26.   return (
27.     <div>
28.       <h1>Count: {count}</h1>
29.       <button onClick={() => setCount(count + 1)}>Increment</button>
30.       
31.       <ExpensiveCalculation numbers={numbers} />
32.       
33.       <button onClick={() => setNumbers([...numbers, numbers.length + 1])}>
34.         Add Number
35.       </button>
36.     </div>
37.   );
38. }

复制代码

useCallback用于缓存函数，避免在每次渲染时都创建新的函数实例。这在将函数作为props传递给优化过的子组件时特别有用。

2. import React from 'react';
4. // 使用React.memo优化的按钮组件
5. const Button = React.memo(({ onClick, children }) => {
6.   console.log(`Button "${children}" rendered`);
7.   return <button onClick={onClick}>{children}</button>;
8. });
10. function App() {
11.   const [count, setCount] = React.useState(0);
12.   
13.   // 没有使用useCallback，每次渲染都会创建新的函数
14.   const incrementWithoutCallback = () => {
15.     setCount(count + 1);
16.   };
17.   
18.   // 使用useCallback，只有依赖变化时才创建新函数
19.   const incrementWithCallback = React.useCallback(() => {
20.     setCount(count + 1);
21.   }, [count]);
23.   return (
24.     <div>
25.       <h1>Count: {count}</h1>
26.       
27.       <Button onClick={incrementWithoutCallback}>
28.         Increment without useCallback
29.       </Button>
30.       
31.       <Button onClick={incrementWithCallback}>
32.         Increment with useCallback
33.       </Button>
34.     </div>
35.   );
36. }

复制代码

代码分割允许你将应用分割成多个包，按需加载，减少初始加载时间。

2. import React, { Suspense } from 'react';
4. // 使用React.lazy懒加载组件
5. const LazyComponent = React.lazy(() => import('./LazyComponent'));
7. function App() {
8.   return (
9.     <div>
10.       <h1>My App</h1>
11.       
12.       {/* 使用Suspense包裹懒加载的组件 */}
13.       <Suspense fallback={<div>Loading...</div>}>
14.         <LazyComponent />
15.       </Suspense>
16.     </div>
17.   );
18. }

复制代码

2. import React, { Suspense } from 'react';
3. import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
5. // 懒加载页面组件
6. const Home = React.lazy(() => import('./Home'));
7. const About = React.lazy(() => import('./About'));
8. const Contact = React.lazy(() => import('./Contact'));
10. function App() {
11.   return (
12.     <Router>
13.       <div>
14.         <nav>
15.           <ul>
16.             <li><Link to="/">Home</Link></li>
17.             <li><Link to="/about">About</Link></li>
18.             <li><Link to="/contact">Contact</Link></li>
19.           </ul>
20.         </nav>
22.         <Suspense fallback={<div>Loading...</div>}>
23.           <Routes>
24.             <Route path="/" element={<Home />} />
25.             <Route path="/about" element={<About />} />
26.             <Route path="/contact" element={<Contact />} />
27.           </Routes>
28.         </Suspense>
29.       </div>
30.     </Router>
31.   );
32. }

复制代码

对于包含大量数据的列表，可以使用虚拟化技术只渲染可见区域的元素，提高性能。

2. npm install react-window

复制代码

2. import React from 'react';
3. import { FixedSizeList as List } from 'react-window';
5. // 生成大量数据
6. const generateItems = (count) => {
7.   return Array.from({ length: count }, (_, index) => ({
8.     id: index,
9.     name: `Item ${index + 1}`,
10.     description: `Description for item ${index + 1}`
11.   }));
12. };
14. const items = generateItems(10000);
16. // 行组件
17. const Row = ({ index, style }) => (
18.   <div style={style} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}>
19.     <h3>{items[index].name}</h3>
20.     <p>{items[index].description}</p>
21.   </div>
22. );
24. function VirtualizedList() {
25.   return (
26.     <div>
27.       <h1>Virtualized List</h1>
28.       <List
29.         height={500}
30.         itemCount={items.length}
31.         itemSize={100}
32.         width="100%"
33.       >
34.         {Row}
35.       </List>
36.     </div>
37.   );
38. }

复制代码

部署

开发完成后，需要将React应用部署到服务器上，使其可以通过互联网访问。

使用Create React App创建的项目，可以通过以下命令构建生产版本：

2. npm run build

复制代码

这将在项目根目录下创建一个build文件夹，包含优化后的生产版本代码。

1. 将构建后的build文件夹上传到GitHub仓库。
2. 登录Netlify，点击”New site from Git”。
3. 选择你的GitHub仓库。
4. 构建设置：Build command:npm run buildPublish directory:build
5. Build command:npm run build
6. Publish directory:build
7. 点击”Deploy site”。

• Build command:npm run build
• Publish directory:build

1. 将构建后的build文件夹上传到GitHub仓库。
2. 登录Vercel，点击”New Project”。
3. 选择你的GitHub仓库。
4. 构建设置：Build command:npm run buildOutput directory:build
5. Build command:npm run build
6. Output directory:build
7. 点击”Deploy”。

• Build command:npm run build
• Output directory:build

1. 安装gh-pages包：

2. npm install gh-pages --save-dev

复制代码

1. 在package.json中添加部署脚本：

2. "scripts": {
3.   "predeploy": "npm run build",
4.   "deploy": "gh-pages -d build"
5. }

复制代码

1. 添加homepage字段到package.json：

2. "homepage": "https://yourusername.github.io/your-repo-name"

复制代码

1. 运行部署命令：

2. npm run deploy

复制代码

如果你需要将React应用作为Node.js应用的一部分部署，可以使用Express服务器：

2. // server.js
3. const express = require('express');
4. const path = require('path');
5. const app = express();
7. // 静态文件服务
8. app.use(express.static(path.join(__dirname, 'build')));
10. // 所有路由都返回index.html
11. app.get('*', (req, res) => {
12.   res.sendFile(path.join(__dirname, 'build', 'index.html'));
13. });
15. const port = process.env.PORT || 3000;
16. app.listen(port, () => {
17.   console.log(`Server is running on port ${port}`);
18. });

复制代码

2. // package.json
3. {
4.   "name": "my-react-app",
5.   "version": "1.0.0",
6.   "scripts": {
7.     "start": "node server.js",
8.     "build": "react-scripts build",
9.     "test": "react-scripts test",
10.     "eject": "react-scripts eject"
11.   },
12.   "dependencies": {
13.     "express": "^4.17.1"
14.   },
15.   "devDependencies": {
16.     "react-scripts": "4.0.3"
17.   }
18. }

复制代码

创建Dockerfile：

2. # 构建阶段
3. FROM node:16 as build
4. WORKDIR /app
5. COPY package*.json ./
6. RUN npm install
7. COPY . .
8. RUN npm run build
10. # 生产阶段
11. FROM nginx:alpine
12. COPY --from=build /app/build /usr/share/nginx/html
13. EXPOSE 80
14. CMD ["nginx", "-g", "daemon off;"]

复制代码

构建Docker镜像：

2. docker build -t my-react-app .

复制代码

运行Docker容器：

2. docker run -p 80:80 my-react-app

复制代码

最佳实践与常见陷阱

1. 组件设计保持组件小而专注，每个组件只做一件事将UI组件和容器组件分离使用函数组件和Hooks，除非必须使用类组件
2. 保持组件小而专注，每个组件只做一件事
3. 将UI组件和容器组件分离
4. 使用函数组件和Hooks，除非必须使用类组件
5. 状态管理将状态放在最近的共同祖先组件中对于复杂应用，使用Redux或Context API进行全局状态管理避免不必要的状态提升
6. 将状态放在最近的共同祖先组件中
7. 对于复杂应用，使用Redux或Context API进行全局状态管理
8. 避免不必要的状态提升
9. 性能优化使用React.memo、useMemo和useCallback优化性能对大型列表使用虚拟化使用代码分割减少初始加载时间
10. 使用React.memo、useMemo和useCallback优化性能
11. 对大型列表使用虚拟化
12. 使用代码分割减少初始加载时间
13. 代码组织按功能或路由组织文件，而不是按类型使用绝对路径导入保持一致的命名约定
14. 按功能或路由组织文件，而不是按类型
15. 使用绝对路径导入
16. 保持一致的命名约定
17. 测试为组件编写单元测试和集成测试测试用户交互，而不是实现细节使用React Testing Library进行测试
18. 为组件编写单元测试和集成测试
19. 测试用户交互，而不是实现细节
20. 使用React Testing Library进行测试

组件设计

• 保持组件小而专注，每个组件只做一件事
• 将UI组件和容器组件分离
• 使用函数组件和Hooks，除非必须使用类组件

状态管理

• 将状态放在最近的共同祖先组件中
• 对于复杂应用，使用Redux或Context API进行全局状态管理
• 避免不必要的状态提升

性能优化

• 使用React.memo、useMemo和useCallback优化性能
• 对大型列表使用虚拟化
• 使用代码分割减少初始加载时间

代码组织

• 按功能或路由组织文件，而不是按类型
• 使用绝对路径导入
• 保持一致的命名约定

测试

• 为组件编写单元测试和集成测试
• 测试用户交互，而不是实现细节
• 使用React Testing Library进行测试

1.

2. 直接修改状态“`jsx
3. // 错误
4. this.state.count = 1;

复制代码

// 正确
   this.setState({ count: 1 });

// 函数组件中
   // 错误
   const [count, setCount] = useState(0);
   count = 1;

// 正确
   setCount(1);

2. 2. **在条件语句中使用Hooks**
3.    ```jsx
4.    // 错误
5.    if (condition) {
6.      const [state, setState] = useState(0);
7.    }
8.    
9.    // 正确
10.    const [state, setState] = useState(0);
11.    if (condition) {
12.      // 使用state
13.    }

复制代码

1.

2. 在循环中创建组件“`jsx
3. // 错误
4. function List({ items }) {
5. return ({items.map(item => {
6.        const [value, setValue] = useState(0);
7.        return ({item.name}: {value}setValue(value + 1)}>Increment);
8.      })});
9. }

复制代码

// 正确 - 提取为单独的组件
   function ListItem({ item }) {

2. const [value, setValue] = useState(0);
3. return (
4.    <div>
5.      {item.name}: {value}
6.      <button onClick={() => setValue(value + 1)}>Increment</button>
7.    </div>
8. );

复制代码

}

function List({ items }) {

2. return (
3.    <div>
4.      {items.map(item => (
5.        <ListItem key={item.id} item={item} />
6.      ))}
7.    </div>
8. );

复制代码

}

2. 4. **过度使用状态**
3.    ```jsx
4.    // 错误 - 不必要的状态
5.    function UserProfile({ user }) {
6.      const [name, setName] = useState(user.name);
7.      const [email, setEmail] = useState(user.email);
8.      
9.      return (
10.        <div>
11.          <h1>{name}</h1>
12.          <p>{email}</p>
13.        </div>
14.      );
15.    }
16.    
17.    // 正确 - 直接使用props
18.    function UserProfile({ user }) {
19.      return (
20.        <div>
21.          <h1>{user.name}</h1>
22.          <p>{user.email}</p>
23.        </div>
24.      );
25.    }

复制代码

1.

2. 忘记依赖数组“`jsx
3. // 错误 - 缺少依赖
4. useEffect(() => {
5. const timer = setInterval(() => {
6.    setCount(count + 1);
7. }, 1000);return () => clearInterval(timer);
8. }, []); // 缺少count依赖

复制代码

忘记依赖数组“`jsx
// 错误 - 缺少依赖
useEffect(() => {
const timer = setInterval(() => {
   setCount(count + 1);
}, 1000);

return () => clearInterval(timer);
}, []); // 缺少count依赖

// 正确 - 包含所有依赖
   useEffect(() => {

2. const timer = setInterval(() => {
3.    setCount(count + 1);
4. }, 1000);
6. return () => clearInterval(timer);

复制代码

}, [count]); // 包含count依赖

// 或者使用函数式更新避免依赖
   useEffect(() => {

2. const timer = setInterval(() => {
3.    setCount(prevCount => prevCount + 1);
4. }, 1000);
6. return () => clearInterval(timer);

复制代码

}, []); // 不需要依赖
   “`

总结与展望

React作为一个强大的前端框架，已经发展多年并持续演进。从最初的类组件到现在的函数组件和Hooks，React不断提供更好的开发体验和性能优化。

本教程涵盖了React的核心概念、实际应用和最佳实践，包括：

• JSX语法和组件概念
• Props和State管理
• 生命周期和Hooks
• 路由与导航
• 状态管理（Redux、MobX）
• 与后端交互
• 样式处理
• 测试
• 性能优化
• 部署
• 最佳实践与常见陷阱

随着React生态系统的发展，我们可以期待更多创新和改进。React 18已经引入了并发渲染、自动批处理、Suspense等新特性，这些将进一步改善用户体验和开发体验。

要成为一名优秀的React开发者，除了掌握框架本身，还需要了解JavaScript的最新特性、Web API、性能优化技巧以及整个前端生态系统。持续学习和实践是关键。

希望本教程能够帮助你入门React开发，并在你的项目中应用这些知识。祝你编码愉快！