引言：为什么选择 React？
React 是由 Facebook 开发并维护的一个开源 JavaScript 库，专门用于构建用户界面（UI）。自 2013 年发布以来，React 已经成为前端开发领域最受欢迎的工具之一。它以其组件化架构、高效的虚拟 DOM 和强大的生态系统著称。对于新手来说，React 的学习曲线可能略显陡峭，但一旦掌握了核心概念，你将能够快速构建复杂且高性能的 Web 应用。
本指南旨在为零基础的开发者提供一个全面的 React 入门路径。我们将从基础概念入手，逐步深入到组件开发和状态管理，并通过实际代码示例帮助你理解和应用这些知识。无论你是想构建一个简单的待办事项应用，还是一个复杂的单页应用（SPA），本指南都能为你提供所需的工具和技巧。
1. React 的核心概念
1.1 什么是组件（Components）？
在 React 中，组件是构建 UI 的基本单元。你可以将组件视为可重用的代码块，每个组件负责渲染一部分 UI，并管理自己的状态和逻辑。React 支持两种类型的组件：函数组件和类组件。
函数组件
函数组件是使用 JavaScript 函数定义的组件。它们接收
props
作为参数，并返回描述 UI 的 JSX（JavaScript XML）。
// 函数组件示例
function Welcome(props) {
return

Hello, {props.name}

;
}

// 使用组件
const element = ;
ReactDOM.render(element, document.getElementById(‘root’));
类组件
类组件是使用 ES6 类语法定义的组件。它们可以拥有内部状态和生命周期方法。
// 类组件示例
class Welcome extends React.Component {
render() {
return

Hello, {this.props.name}

;
}
}

// 使用组件
const element = ;
ReactDOM.render(element, document.getElementById(‘root’));
1.2 JSX：JavaScript 的语法扩展
JSX 是 React 的核心特性之一，它允许你在 JavaScript 中编写类似 HTML 的代码。JSX 不是必需的，但它让代码更易读、更直观。
// 使用 JSX 的示例
const element =

Hello, world!

;

// 不使用 JSX 的示例
const element = React.createElement(‘h1’, null, ‘Hello, world!’);
JSX 表达式可以在大括号
{}
中嵌入 JavaScript 表达式。
const name = ‘Josh Perez’;
const element =

Hello, {name}

;
1.3 Props 和 State
Props
Props（属性）是组件之间传递数据的机制。父组件可以通过 props 向子组件传递数据，但子组件不能直接修改 props。
// 父组件
function App() {
return ;
}

// 子组件
function Welcome(props) {
return

Hello, {props.name}

;
}
State
State 是组件内部管理的数据，当 state 发生变化时，组件会重新渲染。在类组件中，state 通常在构造函数中初始化，并通过
setState
方法更新。
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}

increment = () => {
this.setState({ count: this.state.count + 1 });
};

render() {
return (

);
}
}
在函数组件中，可以使用
useState
Hook 来管理状态。
import React, { useState } from ‘react’;

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

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

return (

);
}
1.4 生命周期方法（类组件）
类组件有一系列生命周期方法，允许你在组件的不同阶段执行代码。常见的生命周期方法包括：
componentDidMount
：组件挂载后执行，适合进行数据获取。
componentDidUpdate
：组件更新后执行。
componentWillUnmount
：组件卸载前执行，适合清理资源。
class DataFetcher extends React.Component {
componentDidMount() {
console.log(‘Component did mount’);
// 在这里进行数据获取
}

componentDidUpdate() {
console.log(‘Component did update’);
}

componentWillUnmount() {
console.log(‘Component will unmount’);
}

render() {
return

;
}
}
1.5 Hooks（函数组件）
Hooks 是 React 16.8 引入的新特性，允许你在函数组件中使用 state 和其他 React 特性。常用的 Hooks 包括：
useState
：管理组件状态。
useEffect
：处理副作用，如数据获取、订阅等。
useContext
：访问上下文（Context）中的值。
import React, { useState, useEffect } from ‘react’;

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

useEffect(() => {
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => setData(data));
}, []); // 空依赖数组表示只在组件挂载时执行一次

return (

{JSON.stringify(data, null, 2)}

);
}
2. 组件开发实战技巧
2.1 组件的组合与继承
React 推荐使用组合（Composition）而不是继承（Inheritance）来复用代码。你可以通过将组件作为 props 传递来实现组合。
// 组合示例
function SplitPane(props) {
return (

);
}

function App() {
return } right={} />;
}
2.2 受控组件与非受控组件
受控组件
受控组件的表单元素的值由 React 状态管理，通过事件处理函数更新状态。
function ControlledInput() {
const [value, setValue] = useState(”);

const handleChange = (event) => {
setValue(event.target.value);
};

return (

);
}
非受控组件
非受控组件的表单元素值由 DOM 自己管理，通过 ref 获取值。
function UncontrolledInput() {
const inputRef = useRef(null);

const handleSubmit = (event) => {
alert(‘Input value: ‘ + inputRef.current.value);
event.preventDefault();
};

return (

);
}
2.3 高阶组件（HOC）
高阶组件（Higher-Order Component）是一个接受组件作为参数并返回一个新组件的函数。HOC 常用于逻辑复用和代码抽象。
// 高阶组件示例
function withLogging(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log(‘Component mounted: ‘ + WrappedComponent.name);
}

render() {
return ;
}
};
}

// 使用高阶组件
const EnhancedComponent = withLogging(Welcome);
2.4 渲染 Props
渲染 Props 是一种通过一个 prop 将渲染逻辑传递给组件的技术。它常用于共享状态逻辑。
// 渲染 Props 示例
class MouseTracker extends React.Component {
constructor(props) {
super(props);
this.state = { x: 0, y: 0 };
}

handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
});
};

render() {
return (

);
}
}

// 使用渲染 Props
function App() {
return (
(

The mouse position is ({x}, {y})

)} />
);
}
3. 状态管理难题与解决方案
3.1 状态提升（Lifting State Up）
当多个组件需要共享状态时，可以将状态提升到它们的最近共同父组件中。
// 状态提升示例
function TemperatureInput(props) {
const [temperature, setTemperature] = useState(”);

const handleChange = (e) => {
setTemperature(e.target.value);
props.onTemperatureChange(e.target.value);
};

return (

);
}

function Calculator() {
const [temperature, setTemperature] = useState(”);
const [scale, setScale] = useState(‘c’);

const toCelsius = (f) => (f – 32) * 5 / 9;
const toFahrenheit = (c) => (c * 9 / 5) + 32;

const handleCelsiusChange = (temp) => {
setScale(‘c’);
setTemperature(temp);
};

const handleFahrenheitChange = (temp) => {
setScale(‘f’);
setTemperature(temp);
};

const celsius = scale === ‘f’ ? toCelsius(temperature) : temperature;
const fahrenheit = scale === ‘c’ ? toFahrenheit(temperature) : temperature;

return (

);
}

function BoilingVerdict(props) {
if (props.celsius >= 100) {
return

The water would boil.

;
}
return

The water would not boil.

;
}
3.2 Context API
Context API 是 React 提供的一种在组件树中共享数据的方式，而无需逐层传递 props。
// 创建 Context
const ThemeContext = React.createContext(‘light’);

// 提供 Context 的组件
class ThemeProvider extends React.Component {
state = { theme: ‘light’ };

toggleTheme = () => {
this.setState(state => ({
theme: state.theme === ‘light’ ? ‘dark’ : ‘light’
}));
};

render() {
return (

{this.props.children}

);
}
}

// 消费 Context 的组件
function ThemedButton() {
return (

{({ theme, toggleTheme }) => (

Toggle Theme

)}

);
}

// 使用 Context
function App() {
return (



);
}
3.3 使用第三方状态管理库
当应用的状态变得复杂时，可以考虑使用第三方状态管理库，如 Redux 或 MobX。
Redux
Redux 是一个流行的状态管理库，它通过单一不可变的状态树和纯函数更新来管理状态。
// 安装 Redux
// npm install redux react-redux

// 定义 Action Types
const INCREMENT = ‘INCREMENT’;
const DECREMENT = ‘DECREMENT’;

// 定义 Action Creators
const increment = () => ({ type: INCREMENT });
const decrement = () => ({ type: DECREMENT });

// 定义 Reducer
const counterReducer = (state = 0, action) => {
switch (action.type) {
case INCREMENT:
return state + 1;
case DECREMENT:
return state – 1;
default:
return state;
}
};

// 创建 Store
import { createStore } from ‘redux’;
const store = createStore(counterReducer);

// React Component
import { useSelector, useDispatch } from ‘react-redux’;

function Counter() {
const count = useSelector(state => state);
const dispatch = useDispatch();

return (

);
}

// 在应用中使用
import React from ‘react’;
import { Provider } from ‘react-redux’;
import ReactDOM from ‘react-dom’;

ReactDOM.render(


,
document.getElementById(‘root’)
);
MobX
MobX 是另一个流行的状态管理库，它通过可观察数据（Observable Data）和自动反应（Reactions）来管理状态。
// 安装 MobX
// npm install mobx mobx-react

import { makeAutoObservable } from ‘mobx’;
import { observer } from ‘mobx-react’;

// 定义 Store
class CounterStore {
count = 0;

constructor() {
makeAutoObservable(this);
}

increment() {
this.count++;
}

decrement() {
this.count–;
}
}

const counterStore = new CounterStore();

// React Component
const Counter = observer(() => {
return (

);
});

// 在应用中使用
import React from ‘react’;
import ReactDOM from ‘react-dom’;

ReactDOM.render(, document.getElementById(‘root’));
4. 实战项目：构建一个简单的待办事项应用
4.1 项目结构
src/
├── components/
│ ├── TodoList.js
│ ├── TodoItem.js
│ └── AddTodo.js
├── App.js
├── index.js
└── styles.css
4.2 代码实现
App.js
import React, { useState } from ‘react’;
import TodoList from ‘./components/TodoList’;
import AddTodo from ‘./components/AddTodo’;
import ‘./styles.css’;

function App() {
const [todos, setTodos] = useState([
{ id: 1, text: ‘Learn React’, completed: false },
{ id: 2, text: ‘Build a project’, completed: false }
]);

const addTodo = (text) => {
const newTodo = { id: Date.now(), text, completed: false };
setTodos([…todos, newTodo]);
};

const toggleTodo = (id) => {
setTodos(todos.map(todo =>
todo.id === id ? { …todo, completed: !todo.completed } : todo
));
};

const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};

return (

);
}

export default App;
components/TodoList.js
import React from ‘react’;
import TodoItem from ‘./TodoItem’;

function TodoList({ todos, onToggle, onDelete }) {
return (

{todos.map(todo => (

))}

);
}

export default TodoList;
components/TodoItem.js
import React from ‘react’;

function TodoItem({ todo, onToggle, onDelete }) {
return (

);
}

export default TodoItem;
components/AddTodo.js
import React, { useState } from ‘react’;

function AddTodo({ onAdd }) {
const [text, setText] = useState(”);

const handleSubmit = (e) => {
e.preventDefault();
if (text.trim()) {
onAdd(text);
setText(”);
}
};

return (

);
}

export default AddTodo;
styles.css
.app {
max-width: 600px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}

h1 {
text-align: center;
}

form {
display: flex;
margin-bottom: 20px;
}

form input {
flex: 1;
padding: 10px;
font-size: 16px;
}

form button {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
cursor: pointer;
}

ul {
list-style: none;
padding: 0;
}

li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}

li.completed span {
text-decoration: line-through;
color: #888;
}

li button {
background: #dc3545;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
4.3 运行项目
使用 Create React App 创建一个新项目：
npx create-react-app todo-app
cd todo-app
将上述代码复制到相应的文件中。
启动开发服务器：
npm start
现在，你应该能在浏览器中看到一个简单的待办事项应用，可以添加、标记完成和删除任务。
5. 最佳实践与性能优化
5.1 使用 React.memo 进行性能优化
React.memo
是一个高阶组件，用于优化函数组件的性能。它通过浅比较 props 来决定是否重新渲染组件。
const TodoItem = React.memo(({ todo, onToggle, onDelete }) => {
console.log(‘Rendering TodoItem:’, todo.id);
return (

);
});
5.2 使用 useCallback 和 useMemo
useCallback
和
useMemo
是 React Hooks，用于优化性能。
useCallback
：缓存函数，防止不必要的重新创建。
useMemo
：缓存计算结果，避免重复计算。
import React, { useState, useCallback, useMemo } from ‘react’;

function ExpensiveComponent({ computeValue, data }) {
const value = useMemo(() => computeValue(data), [computeValue, data]);
return

;
}

function ParentComponent() {
const [count, setCount] = useState(0);
const [data, setData] = useState([1, 2, 3]);

const computeValue = useCallback((data) => {
console.log(‘Computing…’);
return data.reduce((a, b) => a + b, 0);
}, []);

return (

);
}
5.3 代码分割与懒加载
React 支持代码分割和懒加载，通过
React.lazy
和
Suspense
实现。
import React, { Suspense, lazy } from ‘react’;

const LazyComponent = lazy(() => import(‘./LazyComponent’));

function App() {
return (

}>