React 从入门到精通1. React 简介 React 是由 Facebook（现 Meta）推出的一款用于构建用户

1. React 简介

React 是由 Facebook（现 Meta）推出的一款用于构建用户界面的 JavaScript 库，主要用于开发单页面应用（SPA）。它的核心思想是组件化和声明式编程，能够高效地更新和渲染用户界面。

1.1 React 的特点

组件化：通过构建可复用的组件来组织界面。
虚拟 DOM：提升性能，避免直接操作真实 DOM。
单向数据流：数据由父组件向子组件传递，保证数据管理的可控性。
JSX 语法：JavaScript 和 HTML 的结合，方便书写和理解。
Hooks：在函数组件中使用状态和生命周期特性。

1.2 React 核心概念

组件 (Component) ：UI 的最小单元，分为类组件和函数组件。
Props：父组件向子组件传递的数据，子组件不可修改。
State：组件内部管理的可变数据。
生命周期：类组件的生命周期方法，如 componentDidMount。
Hooks：如 useState、useEffect，为函数组件提供类似类组件生命周期的能力。

2. React 基础

2.1 环境搭建

安装 Node.js 和 npm
使用 Create React App 快速搭建项目：

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

my-app/
├── node_modules/
├── public/
├── src/
│   ├── App.js
│   ├── index.js
│   └── components/
└── package.json

2.2 JSX 语法

JSX 是 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的代码。

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

注意事项：

使用 {} 插入表达式
类名使用 className 而非 class
标签必须闭合

2.3 组件的创建

2.3.1 函数组件

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

2.3.2 类组件

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

2.4 组件通信

2.4.1 父组件向子组件传值

function Child({ message }) {
  return <p>{message}</p>;
}

function Parent() {
  return <Child message="Hello from Parent" />;
}

2.4.2 子组件向父组件传值

function Child({ onSend }) {
  return <button onClick={() => onSend('Data from child')}>Send</button>;
}

function Parent() {
  const handleData = (data) => alert(data);
  return <Child onSend={handleData} />;
}

2.5 State 与事件处理

2.5.1 useState

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

2.6 生命周期与 useEffect

import { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('Component mounted');
    return () => console.log('Component unmounted');
  }, []);

  return <p>Check the console</p>;
}

3. 进阶概念

3.1 Context API

用于跨层级传递数据，避免 "prop drilling"。

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = React.useContext(ThemeContext);
  return <button>{theme}</button>;
}

3.2 Redux 状态管理

Redux 是一个用于管理应用复杂状态的库，适用于大型应用。

核心概念：

Store：保存应用状态
Action：描述发生了什么
Reducer：指定如何根据 action 更新状态

3.3 React Router

实现前端路由，管理多页面导航。

npm install react-router-dom

import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

4. 性能优化

4.1 React.memo

避免不必要的组件重新渲染。

const MemoizedComponent = React.memo(MyComponent);

4.2 useCallback 和 useMemo

缓存函数和计算结果。

const memoizedCallback = useCallback(() => doSomething(), [dependencies]);
const memoizedValue = useMemo(() => computeExpensiveValue(), [dependencies]);

5. React 项目实战

小型项目：TodoList
中型项目：博客系统
大型项目：电商平台