React

1. React 核心概念

• 组件 (Components): React 应用由一个个独立的、可复用的组件构成。组件负责渲染 UI 的特定部分，并管理自身的状态。

• JSX: JSX 是一种 JavaScript 的语法扩展，允许我们在 JavaScript 代码中编写类似 HTML 的结构。它会被 Babel 编译成标准的 JavaScript 代码。

• 状态 (State): 组件的状态是组件内部的数据，当状态发生变化时，React 会重新渲染组件。

• 属性 (Props): 属性是从父组件传递给子组件的数据，用于配置子组件的行为和外观。

• 虚拟 DOM (Virtual DOM): React 使用虚拟 DOM 来提高渲染效率。虚拟 DOM 是真实 DOM 的一个轻量级表示，React 会比较虚拟 DOM 的变化，然后只更新真实 DOM 中需要改变的部分。

• 生命周期 (Lifecycle): React 组件有自己的生命周期，包括挂载、更新和卸载等阶段。我们可以利用生命周期方法在不同的阶段执行特定的操作。

2. JSX 语法

JSX 允许我们在 JavaScript 代码中编写类似 HTML 的结构。

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

JSX 表达式必须有一个根元素。如果需要渲染多个元素，可以使用 Fragment。

function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  );
}
​

在 JSX 中，我们可以使用花括号 {} 插入 JavaScript 表达式。

const name = 'Alice';
const element = <h1>Hello, {name}!</h1>;
​

3. 组件类型

React 中有两种类型的组件：函数组件和类组件。

3.1 函数组件

函数组件是一个简单的 JavaScript 函数，它接收 props 作为参数，并返回一个 React 元素。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Bob" />;
​

3.2 类组件

类组件是一个 ES6 类，它继承自 React.Component。类组件必须实现 render() 方法，该方法返回一个 React 元素。类组件可以拥有自己的状态。

import React from 'react';
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}
​

4. State 和 Props

• State: 组件的状态是组件内部的数据，只能由组件自身修改。当状态发生变化时，React 会重新渲染组件。

• Props: 属性是从父组件传递给子组件的数据，子组件只能读取属性，不能修改属性。

import React from 'react';
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hello from parent' };
  }
  render() {
    return (
      <div>
        <Child message={this.state.message} />
      </div>
    );
  }
}
function Child(props) {
  return <p>{props.message}</p>;
}
​

5. 生命周期方法

类组件有自己的生命周期，包括挂载、更新和卸载等阶段。常用的生命周期方法包括：

• constructor(): 组件的构造函数，用于初始化状态。

• render(): 用于渲染组件的 UI。

• componentDidMount(): 组件挂载到 DOM 后调用，通常用于执行副作用操作，如发起 API 请求。

• componentDidUpdate(): 组件更新后调用，可以根据新的 props 和 state 执行特定的操作。

• componentWillUnmount(): 组件卸载前调用，用于清理资源，如取消定时器。

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    console.log('constructor');
  }
  componentDidMount() {
    console.log('componentDidMount');
    // 模拟 API 请求
    setTimeout(() => {
      this.setState({ data: 'Data loaded!' });
    }, 1000);
  }
  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate', prevProps, prevState);
  }
  componentWillUnmount() {
    console.log('componentWillUnmount');
  }
  render() {
    console.log('render');
    return <div>{this.state.data ? this.state.data : 'Loading...'}</div>;
  }
}
​

6. Hooks

React Hooks 允许你在不编写 class 的情况下使用 state 以及其他的 React 特性。

6.1 useState

useState Hook 允许你在函数组件中添加 state。

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
​

6.2 useEffect

useEffect Hook 允许你在函数组件中执行副作用操作，如发起 API 请求、订阅事件等。

import React, { useState, useEffect } from 'react';
function MyComponent() {
  const [data, setData] = useState(null);
  useEffect(() => {
    // 模拟 API 请求
    setTimeout(() => {
      setData('Data loaded!');
    }, 1000);
    // 清理函数
    return () => {
      // 在组件卸载时执行清理操作
      console.log('useEffect cleanup');
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行
  return <div>{data ? data : 'Loading...'}</div>;
}
​

6.3 useContext

useContext Hook 允许你在函数组件中访问 Context 的值。

import React, { createContext, useContext } from 'react';
const MyContext = createContext(null);
function Parent() {
  return (
    <MyContext.Provider value="Hello from context">
      <Child />
    </MyContext.Provider>
  );
}
function Child() {
  const value = useContext(MyContext);
  return <p>{value}</p>;
}
​

7. 条件渲染

在 React 中，我们可以使用 JavaScript 的条件语句来实现条件渲染。

function MyComponent(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}
​

也可以使用三元运算符：

function MyComponent(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;
}
​

或者使用 && 运算符：

function MyComponent(props) {
  return props.isLoggedIn && <h1>Welcome back!</h1>;
}
​

8. 列表渲染

可以使用 map() 方法将数组转换为 React 元素列表。

function MyComponent(props) {
  const numbers = [1, 2, 3, 4, 5];
  return (
    <ul>
      {numbers.map((number) => (
        <li key={number}>{number}</li>
      ))}
    </ul>
  );
}
​

注意：在渲染列表时，每个元素都需要指定一个唯一的 key 属性，用于提高 React 的渲染效率。

9. 表单处理

在 React 中，表单元素的值通常由 React 的 state 控制。

import React, { useState } from 'react';
function MyForm() {
  const [name, setName] = useState('');
  const handleChange = (event) => {
    setName(event.target.value);
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${name}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}
​

10. React Router

React Router 是一个用于在 React 应用中实现路由功能的库。

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function Home() {
  return <h1>Home</h1>;
}
function About() {
  return <h1>About</h1>;
}
function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}
​

11. Redux

Redux 是一个用于管理应用状态的库。它提供了一个集中的 store，用于存储应用的所有状态。

• Store: 用于存储应用的状态。

• Actions: 用于描述发生了什么。

• Reducers: 用于根据 actions 更新 store 的状态。

12. 最佳实践

• 组件化: 将 UI 拆分成小的、可复用的组件。

• 单一数据源: 使用 Redux 或 Context 等工具来管理应用的状态。

• 不可变性: 避免直接修改 state，而是使用 setState() 或 Redux 的 reducers 来更新状态。

• 性能优化: 使用 React.memo()、useMemo() 和 useCallback() 等 Hook 来避免不必要的渲染。

总结

本文介绍了 React 的核心概念、常用 API 以及最佳实践，并通过代码示例进行了详细讲解。希望本文能够帮助你更好地理解和使用 React。React 的生态系统非常庞大，还有许多其他的库和工具可以帮助你构建更复杂的应用。建议你不断学习和实践，探索 React 的更多可能性。