知识库

Appearance

React 介绍 ​

什么是 React？ ​

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook（现 Meta）开发并维护。它允许开发者创建可重用的 UI 组件，并通过高效的虚拟 DOM 实现快速的界面更新。

React 的核心特性 ​

1. 组件化 ​

React 将 UI 拆分为独立、可重用的组件，每个组件负责渲染特定的 UI 部分。组件可以是函数组件或类组件。

2. 虚拟 DOM ​

React 使用虚拟 DOM（Virtual DOM）来提高渲染性能。它先在内存中构建虚拟 DOM 树，然后通过 diff 算法比较前后状态差异，只更新变化的部分，减少了直接操作真实 DOM 的开销。

3. JSX ​

JSX 是 JavaScript 的语法扩展，允许在 JavaScript 代码中编写 HTML 结构。它使代码更具可读性，同时保持了 JavaScript 的全部功能。

jsx
function Hello() {
  return <h1>Hello, React!</h1>
}

4. 单向数据流 ​

React 采用单向数据流，数据从父组件流向子组件，通过 props 传递。这种设计使得应用状态更加可预测，便于调试和维护。

5. 声明式编程 ​

React 采用声明式编程范式，开发者只需描述 UI 在不同状态下的样子，而不需要关注具体的更新过程。

基本用法 ​

安装 React ​

使用 Vite 创建 React 项目：

bash
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

创建第一个组件 ​

jsx
// App.jsx
import React from 'react'

function App() {
  return (
    <div className='App'>
      <h1>Hello, React!</h1>
    </div>
  )
}

export default App

核心概念 ​

1. 组件 ​

组件是 React 应用的基本构建块，可以是函数组件或类组件。

函数组件 ​

jsx
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>
}

类组件 ​

jsx
import React, { Component } from 'react'

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>
  }
}

2. Props ​

Props（属性）是组件间传递数据的方式，是只读的。

jsx
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>
}

// 使用组件
;<Greeting name='React' />

3. State ​

State（状态）是组件内部的可变数据，用于管理组件的动态变化。

jsx
import React, { useState } from 'react'

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

4. React Hooks ​

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

useState ​

用于在函数组件中添加状态。

jsx
const [state, setState] = useState(initialState)

useEffect ​

用于处理副作用，如数据获取、订阅或手动更改 DOM。

jsx
useEffect(() => {
  // 副作用代码
  return () => {
    // 清理代码
  }
}, [dependencies])

useContext ​

用于访问上下文（Context）。

jsx
const value = useContext(Context)

useReducer ​

用于管理复杂状态逻辑，类似于 Redux。

jsx
const [state, dispatch] = useReducer(reducer, initialState)

useCallback ​

用于缓存函数，避免不必要的重渲染。

jsx
const memoizedCallback = useCallback(() => {
  doSomething(a, b)
}, [a, b])

useMemo ​

用于缓存计算结果，避免不必要的重复计算。

jsx
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

useRef ​

用于获取 DOM 元素或保存可变值。

jsx
const ref = useRef(initialValue)

5. 生命周期 ​

类组件生命周期 ​

  • 挂载阶段：constructor → static getDerivedStateFromProps → render → componentDidMount
  • 更新阶段：static getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate
  • 卸载阶段：componentWillUnmount

函数组件生命周期（使用 Hooks） ​

使用 useEffect 模拟生命周期：

jsx
// 组件挂载和更新时执行
useEffect(() => {
  console.log('Component mounted or updated')
  return () => {
    console.log('Component unmounted or cleanup')
  }
})

// 仅组件挂载时执行
useEffect(() => {
  console.log('Component mounted')
  return () => {
    console.log('Component unmounted')
  }
}, [])

// 依赖项变化时执行
useEffect(() => {
  console.log('Dependency changed')
  return () => {
    console.log('Cleanup before re-run')
  }
}, [dependency])

性能优化 ​

1. 避免不必要的渲染 ​

  • 使用 React.memo 缓存组件
  • 使用 useCallback 缓存函数
  • 使用 useMemo 缓存计算结果

2. 虚拟列表 ​

对于长列表，使用虚拟滚动技术，只渲染可见区域的项目。

3. 代码分割 ​

使用 React.lazy 和 Suspense 实现组件的懒加载。

jsx
const LazyComponent = React.lazy(() => import('./LazyComponent'))

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  )
}

4. 优化状态管理 ​

  • 避免在 state 中存储派生数据
  • 合理使用 Context，避免过度使用

React 生态系统 ​

1. 路由 ​

  • React Router：官方推荐的路由库

2. 状态管理 ​

  • Redux：全局状态管理库
  • MobX：响应式状态管理库
  • Recoil：Facebook 推出的状态管理库
  • Zustand：轻量级状态管理库

3. UI 组件库 ​

  • Material-UI：Google 的 Material Design 实现
  • Ant Design：阿里巴巴的 UI 组件库
  • Chakra UI：现代化的 UI 组件库
  • Tailwind CSS：实用优先的 CSS 框架

4. 工具库 ​

  • Axios：HTTP 客户端
  • React Query：数据获取和缓存
  • Formik：表单处理
  • React Hook Form：轻量级表单处理

5. 构建工具 ​

  • Vite：快速的前端构建工具
  • Webpack：模块打包器
  • Create React App：官方脚手架

最佳实践 ​

1. 组件设计 ​

  • 保持组件小而专注
  • 遵循单一职责原则
  • 合理使用组合而非继承

2. 代码风格 ​

  • 使用 ESLint 和 Prettier 保持代码风格一致
  • 遵循命名约定（PascalCase 组件名，camelCase 变量名）
  • 添加适当的注释

3. 测试 ​

  • 使用 Jest 进行单元测试
  • 使用 React Testing Library 进行组件测试
  • 编写有意义的测试用例

4. 部署 ​

  • 使用 Vercel、Netlify 等平台部署 React 应用
  • 配置 CI/CD 流程
  • 优化生产构建

常见问题 ​

1. 状态管理选择 ​

  • 小型应用：使用 useState 和 useContext
  • 中型应用：使用 useReducer 或轻量级状态管理库
  • 大型应用：使用 Redux 或 Recoil

2. 性能问题 ​

  • 检查是否有不必要的渲染
  • 使用 React DevTools Profiler 分析性能
  • 优化组件结构和状态管理

3. 服务端渲染 ​

  • 使用 Next.js 实现服务端渲染
  • 考虑 SEO 和首屏加载性能

总结 ​

React 是一个强大、灵活的前端库，通过组件化、虚拟 DOM 和声明式编程等特性，使构建复杂的用户界面变得更加简单和高效。随着 React Hooks 的引入，函数组件成为了主流，简化了状态管理和副作用处理。

React 的生态系统非常丰富，提供了各种工具和库来满足不同的需求。通过遵循最佳实践，可以构建出性能优异、易于维护的 React 应用。

React 不仅是一个前端库，更是一种开发思想，它强调组件化、单向数据流和声明式编程，这些思想已经影响了整个前端开发领域，成为现代前端开发的重要组成部分。

基于 VitePress 的本地知识库

Copyright © 2026