从 React 的生命周期到 Redux 掌握 React 状态管理-JavaScript中文网-JavaScript教程资源分享门户

React 是一种非常流行的前端框架。其拥有丰富的生命周期方法，以及单向数据流的特点，使得 React 构建复杂应用变得非常容易。然而，React 自身并没有提供完整的状态管理方案，这就需要借用其他工具来解决这个问题。本文将从 React 的生命周期开始，一步步深入探讨 React 状态管理。我们将介绍 Redux，一种用于管理应用状态的流行库，并通过示例代码来说明如何使用它。

React 的生命周期

React 组件拥有生命周期，它们定义了组件挂载、更新和卸载时会被调用的特定方法。这些方法可以让我们在不同的组件生命周期阶段执行一些行为。

挂载阶段

在组件创建并插入 DOM 中时，React 将会调用一些生命周期方法。

constructor(props)：组件创建时调用的第一个方法。可以在这里初始化组件的内部状态。
static getDerivedStateFromProps(props, state)：在组件每次更新时都会被调用。它会将组件当前的 props 和 state 作为参数传入，返回一个对象。这个对象可以用来更新组件的 state。
render()：这个方法返回组件的 JSX 表示。它是 React 组件的核心，必须要实现的方法。
componentDidMount()：组件挂载到 DOM 中时被调用的方法。通常用来执行一些异步操作，如从服务器获取数据。

更新阶段

在组件状态发生变化时，React 将会重新渲染组件，并调用一些生命周期方法。

static getDerivedStateFromProps(props, state)：在组件每次更新时都会被调用。它会将组件当前的 props 和 state 作为参数传入，返回一个对象。这个对象可以用来更新组件的 state。
shouldComponentUpdate(nextProps, nextState)：在组件即将更新时被调用。可以在这里判断 props 和 state 是否变化，以决定是否需要重新渲染组件。如果返回 false，那么下面的渲染方法将不会被执行。
render()：这个方法返回组件的 JSX 表示。
getSnapshotBeforeUpdate(prevProps, prevState)：在组件更新前被调用。可以在这里获取更新前的 DOM 元素数据，以便在更新后进行比较。
componentDidUpdate(prevProps, prevState, snapshot)：组件更新完毕后被调用的方法。通常用来执行一些副作用操作，如更新 DOM、发送网络请求等。

卸载阶段

当组件从 DOM 中移除时，React 将会调用卸载阶段的生命周期方法。

componentWillUnmount()：组件从 DOM 中移除时被调用的方法。通常用来清理组件使用的资源，如取消订阅事件、释放内存等。

Redux 的基础知识

Redux 是一个流行的状态管理库，它可以协助我们管理 React 应用的状态。Redux 强调单向数据流，即状态的所有变化都遵循特定的规则。我们在更新状态时不能直接修改它，而是通过 action 和 reducer 这两个对象来实现状态的变化。

Action

Action 是一个描述状态变化的对象。它必须包含一个类型字段（type），用来说明这是一个什么样的事件。除此之外，我们还可以在 action 中包含其他的数据字段，用来描述这个事件的具体信息。

const incrementAction = { type: 'INCREMENT' };
const editAction = { type: 'EDIT', payload: { text: 'Hello world' } };

Reducer

Reducer 是一个纯函数，它接收当前状态和 action 作为参数，并返回一个新的状态。

// javascriptcn.com 代码示例
// 计数器应用的 reducer
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

Store

Store 是一个保存应用状态的对象。我们可以通过调用 createStore 方法来创建一个 store，它需要传入一个 reducer 函数。Store 提供了一些方法来让我们读取和修改状态。

// javascriptcn.com 代码示例
import { createStore } from 'redux';

const store = createStore(counterReducer);

console.log(store.getState()); // { count: 0 }

store.dispatch({ type: 'INCREMENT' });

console.log(store.getState()); // { count: 1 }

在 React 中使用 Redux

现在我们已经了解了 Redux 的基础知识，下面让我们看一看如何在 React 中使用它。在 React 应用中使用 Redux 需要遵循以下步骤。

1. 安装依赖

npm install redux react-redux

2. 定义 actions

// actions.js
export const incrementAction = { type: 'INCREMENT' };
export const decrementAction = { type: 'DECREMENT' };

3. 定义 reducers

// javascriptcn.com 代码示例
// reducers.js
export const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

4. 创建 store

// store.js
import { createStore } from 'redux';
import { counterReducer } from './reducers';

const store = createStore(counterReducer);

export default store;

5. 定义组件

// javascriptcn.com 代码示例
// Counter.js
import { useDispatch, useSelector } from 'react-redux';
import { incrementAction, decrementAction } from './actions';

const Counter = () => {
  const dispatch = useDispatch();
  const count = useSelector(state => state.count);

  const handleIncrement = () => {
    dispatch(incrementAction);
  };

  const handleDecrement = () => {
    dispatch(decrementAction);
  };

  return (
    <div>
      <button onClick={handleDecrement}>-</button>
      <span>{count}</span>
      <button onClick={handleIncrement}>+</button>
    </div>
  );
};

export default Counter;

总结

在本文中，我们了解了 React 的生命周期和 Redux 的基础知识。我们还学习了如何在 React 中使用 Redux 进行状态管理。最后，让我们用一个完整的示例来总结一下本文的内容。

// javascriptcn.com 代码示例
// actions.js
export const incrementAction = { type: 'INCREMENT' };
export const decrementAction = { type: 'DECREMENT' };

// reducers.js
export const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

// store.js
import { createStore } from 'redux';
import { counterReducer } from './reducers';

const store = createStore(counterReducer);

export default store;

// Counter.js
import { useDispatch, useSelector } from 'react-redux';
import { incrementAction, decrementAction } from './actions';

const Counter = () => {
  const dispatch = useDispatch();
  const count = useSelector(state => state.count);

  const handleIncrement = () => {
    dispatch(incrementAction);
  };

  const handleDecrement = () => {
    dispatch(decrementAction);
  };

  return (
    <div>
      <button onClick={handleDecrement}>-</button>
      <span>{count}</span>
      <button onClick={handleIncrement}>+</button>
    </div>
  );
};

export default Counter;

现在你已经掌握了 React 状态管理的基础知识，你可以继续学习更高级的状态管理技术，例如 Redux 的中间件。祝您学习顺利！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6538903a7d4982a6eb17595f