React 基础教程

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。它允许开发者创建可重用的 UI 组件，并提供了高效的状态管理和渲染机制。

环境准备

在开始之前，请确保你已经安装了 Node.js 和 npm。你可以通过以下命令创建一个新的 React 项目：

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

基本概念

组件

React 中的组件是构建 UI 的基本单元。有两种主要的组件类型：

  1. 函数组件（推荐）
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  1. 类组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

JSX

JSX 是 React 中用于描述 UI 的语法扩展：

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

状态和生命周期

使用 useState 钩子管理组件状态：

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>
  );
}

高级特性

组件通信

  1. Props 传递数据
  2. Context API 共享状态
  3. Redux 状态管理

Hooks

React Hooks 允许在函数组件中使用状态和其他 React 特性：

  • useState
  • useEffect
  • useContext
  • useReducer
  • useMemo
  • useCallback

性能优化

  • 使用 React.memo 避免不必要的重渲染
  • 使用 useMemo 和 useCallback 缓存计算结果和函数
  • 使用代码分割和懒加载

最佳实践

  1. 保持组件职责单一
  2. 使用函数组件和 Hooks
  3. 避免过深的组件嵌套
  4. 使用 PropTypes 进行类型检查
  5. 遵循不可变数据原则

结论

React 是现代 Web 开发中最流行的前端库之一。通过组件化、声明式编程和高效的渲染机制，它极大地简化了复杂 UI 的开发。