okgoes
🔍
← 目录从零开始学习React
✏️ 编辑

React 核心功能

2024/9/21

在 React 中，核心功能包括管理组件的状态、处理副作用（如 API 调用或定时器）、处理表单和渲染列表。React 的 Hooks 使得函数组件能够实现这些功能，特别是 useState 和 useEffect 是最常用的 Hooks。

以下是对这些核心功能的详细介绍，包括如何使用 useState 和 useEffect 处理表单、列表渲染以及模拟生命周期方法。

1. 使用 Hooks（useState, useEffect）

1.1 useState：状态管理

useState 是用于在函数组件中管理状态的 Hook。它返回一个状态值和一个用于更新该状态的函数。

jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始状态为0

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

export default Counter;

在这个示例中，count 是状态变量，setCount 是更新 count 的函数。每次点击按钮，状态都会更新，React 会重新渲染组件。

1.2 useEffect：处理副作用

useEffect 用于处理副作用，比如数据获取、订阅、手动 DOM 操作等。它可以看作是函数组件中的生命周期方法（例如 componentDidMount、componentDidUpdate 和 componentWillUnmount）。

jsx
import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  // 使用 useEffect 来模拟计时器
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    // 清理副作用，类似 componentWillUnmount
    return () => clearInterval(interval);
  }, []); // 空数组作为依赖，表示该副作用只在组件挂载时执行一次

  return <div>Seconds: {seconds}</div>;
}

export default Timer;

useEffect 中的清理函数（return () => ...）在组件卸载时执行，这在处理订阅、计时器等副作用时非常重要。

2. 表单处理与受控组件

在 React 中，表单元素通常作为受控组件，即它们的值由 React 状态控制。受控组件的输入值会被存储在组件的状态中，通过 onChange 事件监听器来实时更新状态。

2.1 受控组件示例

jsx
import React, { useState } from 'react';

function SimpleForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // 阻止表单默认提交行为
    alert(`Form submitted! Name: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input 
          type="text" 
          value={name} 
          onChange={(e) => setName(e.target.value)} // 实时更新状态
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default SimpleForm;

在这个例子中，输入框的值 value={name} 是由组件的 name 状态控制的，每次用户输入时，onChange 事件会更新该状态。

3. 列表与键值（key）

当在 React 中渲染列表时，建议为每个列表项添加一个唯一的 key 属性。key 用于帮助 React 识别哪些元素被改变、添加或删除，以便优化重新渲染的性能。

3.1 列表渲染示例

jsx
import React from 'react';

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li> // 使用唯一的 key 值
      ))}
    </ul>
  );
}

export default TodoList;

key 必须是唯一的，如果没有合适的唯一标识符，通常可以使用数组的索引。不过在动态列表（如待办事项）中，最好使用真正唯一的值（如 id）。

4. 生命周期方法（通过 Hooks 实现）

React Hooks 可以模拟类组件中的生命周期方法：

  • componentDidMount：可以通过 useEffect 的依赖数组为空 [] 来实现。该副作用只在组件首次挂载时执行。
  • componentDidUpdate：通过 useEffect 监听依赖值的变化，当依赖值更新时，副作用会执行。依赖数组中放入需要监听的状态或属性。
  • componentWillUnmount：通过 useEffect 返回的清理函数来实现，它在组件卸载时执行。

4.1 生命周期方法示例

jsx
import React, { useState, useEffect } from 'react';

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

  // 模拟 componentDidMount 和 componentDidUpdate
  useEffect(() => {
    console.log('Component mounted or count updated');

    return () => {
      console.log('Component will unmount or cleanup before next useEffect run');
    };
  }, [count]); // 依赖 count，当 count 更新时，副作用重新执行

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

export default LifecycleDemo;

在这个示例中，useEffect 在组件挂载和 count 变化时执行，当组件卸载或下一次更新副作用时执行清理函数。

总结

  • useState：用于在函数组件中管理状态。
  • useEffect：处理副作用，可以模拟生命周期方法（componentDidMount、componentDidUpdate 和 componentWillUnmount）。
  • 受控组件：通过 React 状态控制表单输入的值，实时同步输入框的值和状态。
  • 列表渲染与键值（key）：渲染列表时必须为每个列表项提供唯一的 key，以帮助 React 高效更新 DOM。

通过这些核心功能，你可以管理 React 应用中的状态、副作用、表单数据和列表渲染，并通过 Hooks 模拟类组件中的生命周期方法。