下面是一份React 参考手册，涵盖了 React 的核心概念、常用 API、开发模式和性能优化等内容，供你在开发过程中查阅参考。

目录

  1. React 概述
  2. React 组件
  3. Props 与 State
  4. 事件处理
  5. 条件渲染与列表渲染
  6. Refs（引用）
  7. 组件生命周期
  8. Hooks
  9. 路由管理
  10. AJAX 与数据获取
  11. 样式处理
  12. 性能优化
  13. 开发工具与调试
  14. 参考资料

1. React 概述

  • React 是一个用于构建用户界面的 JavaScript 库，专注于组件化开发和声明式编程。
  • 核心思想是组件化、单向数据流以及虚拟 DOM优化实际 DOM 更新的性能。
  • 适用于开发单页面应用（SPA）和复杂的前端应用。

2. React 组件

函数组件

  • 以函数形式定义组件，接收 props 并返回 JSX 结构。
  • 简洁、易于测试和复用，自 React 16.8 后结合 Hooks 可处理状态和副作用。
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

类组件

  • 使用 ES6 类定义组件，继承自 React.Component。
  • 支持生命周期方法、状态管理等，适用于较复杂的逻辑处理。
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

3. Props 与 State

Props

  • Props（属性）由父组件传入，描述组件的输入数据。它们是只读的。
  • 可用于定制组件的显示和行为。
function Welcome({ name }) {
  return <h1>Welcome, {name}!</h1>;
}

State

  • State（状态）用于管理组件内部的动态数据。
  • 在类组件中使用 this.state 和 this.setState()；在函数组件中使用 useState Hook。
// 类组件中的 state
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  increment = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  }
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// 函数组件中的 state
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

4. 事件处理

  • React 通过合成事件提供跨浏览器一致的事件系统。
  • 使用 onClick、onChange、onSubmit 等属性绑定事件处理函数。
  • 注意在类组件中绑定 this（可用构造函数绑定或箭头函数）。
function Button() {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return <button onClick={handleClick}>Click Me</button>;
}

5. 条件渲染与列表渲染

条件渲染

  • 根据条件显示不同内容。可使用 if 语句、三元运算符、逻辑与（&&）等。
function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in</h1>}
    </div>
  );
}

列表 & Keys

  • 使用数组的 map() 方法渲染列表。
  • 使用 key 属性标识每个列表项，建议使用稳定的唯一标识符。
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

6. Refs（引用）

  • Refs 允许直接访问 DOM 元素或组件实例。
  • 在类组件中使用 React.createRef()；在函数组件中使用 useRef()。
function InputFocus() {
  const inputRef = useRef(null);
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </div>
  );
}

7. 组件生命周期

  • 生命周期方法（类组件）管理组件从挂载、更新到卸载的过程：
    • 挂载：constructor → getDerivedStateFromProps → render → componentDidMount
    • 更新：getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate
    • 卸载：componentWillUnmount
  • 函数组件中可用 useEffect Hook 模拟这些生命周期操作。

8. Hooks

常用 Hooks

  • useState：管理状态。
  • useEffect：处理副作用（数据请求、订阅、DOM 操作）。
  • useRef：创建引用，保存跨渲染数据或 DOM 引用。
  • useContext：在组件树中共享数据（如主题）。
  • useMemo、useCallback：优化性能，避免不必要的重渲染。
  • useReducer：管理复杂状态，类似 Redux。

自定义 Hook

  • 将可复用的逻辑封装为函数，供多个组件共享。
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);
  return { count, increment, decrement };
}

9. 路由管理

  • 使用 React Router 管理单页应用中的导航。
  • 安装 react-router-dom 后，通过 <BrowserRouter>、<Route> 和 <Link> 构建路由系统。
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Home</h2>;
}
function About() {
  return <h2>About</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

10. AJAX 与数据获取

  • 使用原生 fetch API 或第三方库如 Axios 来进行 AJAX 请求，从服务器获取数据。
  • 通常在 useEffect 中发起请求，并将数据存储在 state 中。
import React, { useState, useEffect } from 'react';
import axios from 'axios';

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

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => setData(response.data))
      .catch(error => console.error(error));
  }, []);

  if (!data) return <div>Loading...</div>;

  return (
    <ul>
      {data.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

11. 样式处理

传统 CSS 与 CSS 模块

  • 通过外部 CSS 文件、CSS 模块或内联样式对组件进行样式控制。

Sass/SCSS

  • 使用 Sass 提供变量、嵌套、Mixin、继承等特性，可通过 node-sass 或 sass 进行编译。

Tailwind CSS

  • 实用性 CSS 框架，通过原子类快速构建响应式 UI。

Styled Components

  • CSS-in-JS 方案，封装样式组件，支持动态样式和主题。

12. 性能优化

  • React.memo：用于函数组件的记忆化，减少不必要的渲染。
  • useMemo & useCallback：记忆化计算结果和函数，优化重渲染性能。
  • 代码分割：使用 React.lazy 和 Suspense 实现懒加载，减少首屏加载时间。

13. 开发工具与调试

  • React Developer Tools：浏览器扩展，调试组件、检查 Props 与 State。
  • ESLint + Prettier：保持代码质量和风格一致性。
  • Jest + React Testing Library：进行单元测试和集成测试，保证组件正确性。

14. 参考资料

出站链接

站内链接

这份参考手册涵盖了 React 开发中的主要知识点，从组件、状态管理、事件处理，到 Hooks、路由、数据获取、样式处理和性能优化，能够为你在开发 React 应用时提供全方位的指导和查阅支持。希望这份手册能帮助你更高效地开发和维护 React 项目！