React 开发教程：从入门到高级进阶

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它以其声明式编程、组件化开发和虚拟 DOM 等特性，在 Web 开发领域广受欢迎。本教程将带你从零开始学习 React，逐步掌握其核心概念和高级特性，最终能够独立开发复杂的 Web 应用。

一、入门篇：React 基础

1.1 环境搭建

在开始学习 React 之前，我们需要搭建好开发环境。

1. 安装 Node.js 和 npm： React 开发需要 Node.js 环境，npm（Node.js 包管理器）用于安装和管理项目依赖。访问 Node.js 官网下载并安装对应操作系统的版本。安装完成后，在命令行中输入 node -v 和 npm -v，如果能看到版本号，则说明安装成功。

2. 创建 React 项目： 推荐使用 Create React App 脚手架工具来创建 React 项目。它集成了 Webpack、Babel 等常用工具，无需手动配置，可以快速启动项目。在命令行中输入以下命令：

   bash
npx create-react-app my-app
cd my-app
npm start

   npx 是 npm 5.2+ 版本提供的命令，用于执行 npm 包中的可执行文件。create-react-app 会创建一个名为 my-app 的新项目，并自动安装所需的依赖。npm start 会启动开发服务器，并在浏览器中打开应用。

1.2 JSX 语法

JSX 是 JavaScript 的语法扩展，允许我们在 JavaScript 代码中编写类似 HTML 的标记。React 使用 JSX 来描述 UI 的结构。

javascript
const element = <h1>Hello, world!</h1>;

这段代码看起来像 HTML，但实际上它是 JSX。Babel 会将 JSX 转换为 JavaScript 代码，最终由 React 渲染到页面上。

JSX 的特点：

• 类似 HTML： JSX 的语法与 HTML 非常相似，易于学习和理解。
• 嵌入表达式： 可以在 JSX 中使用花括号 {} 来嵌入 JavaScript 表达式。
• 属性： JSX 元素的属性使用驼峰命名法，例如 className、onClick。
• 根元素： JSX 必须有一个唯一的根元素。

1.3 组件

组件是 React 应用的基本构建块。一个组件可以是一个函数或一个类，它接收一些输入（称为 props），并返回一个 React 元素来描述 UI。

函数组件：

javascript
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

函数组件是一个接收 props 对象作为参数并返回 React 元素的 JavaScript 函数。

类组件：

javascript
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

类组件是一个继承自 React.Component 的 JavaScript 类，它必须有一个 render 方法，该方法返回 React 元素。

组件的渲染：

javascript
const element = <Welcome name="Sara" />;
ReactDOM.render(element, document.getElementById('root'));

这段代码使用 ReactDOM.render 方法将 Welcome 组件渲染到页面上 ID 为 root 的 DOM 元素中。

1.4 Props 和 State

Props 和 State 是 React 组件中用于存储和管理数据的两个重要概念。

• Props： Props 是组件的输入，它们是只读的，不能在组件内部修改。Props 用于从父组件向子组件传递数据。
• State： State 是组件的内部状态，它是可变的，可以在组件内部修改。State 用于存储组件自身的数据，例如用户输入、计时器状态等。

使用 State：

```javascript
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}

componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}

componentWillUnmount() {
clearInterval(this.timerID);
}

tick() {
this.setState({
date: new Date()
});
}

render() {
return (

);
}
}
```

在这个例子中，Clock 组件使用 state 来存储当前时间。componentDidMount 和 componentWillUnmount 是 React 组件的生命周期方法，分别在组件挂载和卸载时执行。tick 方法使用 this.setState 来更新 state，从而触发组件的重新渲染。

1.5 事件处理

在 React 中，事件处理与原生 DOM 事件类似，但有一些语法上的差异。

• 事件命名： React 事件使用驼峰命名法，例如 onClick、onChange。
• 事件处理函数： 事件处理函数通常作为组件的方法定义。
• 阻止默认行为： 需要显式调用 event.preventDefault() 来阻止事件的默认行为。

```javascript
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};

// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);

}

handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}

render() {
return (

{this.state.isToggleOn ? 'ON' : 'OFF'}

);
}
}
```

在这个例子中，handleClick 方法被绑定到组件实例上，以确保在事件处理函数中 this 指向组件实例。

二、进阶篇：React 高级特性

2.1 条件渲染

条件渲染是指根据不同的条件渲染不同的内容。

javascript
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}

在这个例子中，Greeting 组件根据 isLoggedIn 的值来渲染不同的组件。

三元运算符：

javascript
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
更简洁的方式是使用三元运算符

2.2 列表渲染

列表渲染是指根据数组数据渲染一系列的元素。

```javascript
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>

);
return (

{listItems}

);
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
,
document.getElementById('root')
);
```

在这个例子中，NumberList 组件使用 map 方法将 numbers 数组转换为一个 li 元素的列表。

Key：

在列表渲染中，每个元素都需要有一个唯一的 key 属性。key 帮助 React 识别哪些元素发生了变化，从而提高渲染性能。

2.3 表单

React 中的表单处理与原生 HTML 表单类似，但有一些差异。

• 受控组件： 在 React 中，表单元素的值通常由组件的 state 控制，这种表单元素称为受控组件。
• 非受控组件： 如果表单元素的值不由 React 控制，而是由 DOM 自身管理，则称为非受控组件。

```javascript
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);

}

handleChange(event) {
this.setState({value: event.target.value});
}

handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}

render() {
return (

);
}
}
```

在这个例子中，NameForm 组件是一个受控组件，input 元素的值由 state.value 控制。

2.4 组合 vs 继承

React 推荐使用组合而不是继承来实现组件之间的代码复用。

组合： 将多个小组件组合成一个大组件。

继承： 从一个基类组件派生出新的子类组件。

组合比继承更灵活，更易于维护。

2.5 Context

Context 提供了一种在组件树中共享数据的方式，而无需手动地在每个层级传递 props。

```javascript
// 创建 Context
const ThemeContext = React.createContext('light');

// 提供 Context
class App extends React.Component {
render() {
return (



);
}
}

// 消费 Context
function ThemedButton() {
return (

{theme => }

);
}
```

在这个例子中，ThemeContext 用于在组件树中共享主题值。

2.6 高阶组件 (HOC)

高阶组件是一个函数，它接收一个组件作为参数，并返回一个增强的组件。

```javascript
function withSubscription(WrappedComponent, selectData) {
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: selectData(DataSource, this.props)
};
}

componentDidMount() {
  DataSource.addChangeListener(this.handleChange);
}

componentWillUnmount() {
  DataSource.removeChangeListener(this.handleChange);
}

handleChange() {
  this.setState({
    data: selectData(DataSource, this.props)
  });
}

render() {
  return <WrappedComponent data={this.state.data} {...this.props} />;
}

};
}
```

在这个例子中，withSubscription 是一个高阶组件，它用于订阅数据源的变化，并将数据传递给被包裹的组件。

2.7 Render Props

Render Props 是一种用于在 React 组件之间共享代码的技术，它使用一个值为函数的 prop 来告诉组件要渲染什么。

```javascript
class Cat extends React.Component {
render() {
const mouse = this.props.mouse;
return (

);
}
}

class Mouse extends React.Component {
constructor(props) {
super(props);
this.handleMouseMove = this.handleMouseMove.bind(this);
this.state = { x: 0, y: 0 };
}

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

render() {
return (

{this.props.render(this.state)}

);
}
}

class MouseTracker extends React.Component {
render() {
return (

Move the mouse around!

(

)}/>

);
}
}
```

在这个例子中，Mouse 组件使用 render prop 来告诉它要渲染什么。

2.8 Hooks

Hooks 是 React 16.8 引入的新特性，它允许你在函数组件中使用 state 和其他 React 特性。

常用的 Hooks：

• useState：用于在函数组件中添加 state。
• useEffect：用于在函数组件中执行副作用操作（例如数据获取、订阅事件等）。
• useContext：用于在函数组件中访问 Context。
• useReducer：用于在函数组件中管理复杂的 state。
• useCallback：用于在函数组件中缓存回调函数。
• useMemo：用于在函数组件中缓存计算结果。
• useRef：用于在函数组件中访问 DOM 元素或保持一个可变值。

```javascript
import React, { useState, useEffect } from 'react';

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

useEffect(() => {
document.title = You clicked ${count} times;
});

return (

You clicked {count} times

setCount(count + 1)}>
Click me