大白话 React Redux 入门教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发领域，React 是目前最热门的 UI 框架之一，而 Redux 是 React 中最受欢迎的状态管理库之一。本文将为大家详细介绍 React 和 Redux 的基础知识，以及如何在项目中使用它们。

React 简介

React 是一个由 Facebook 推出的 UI 框架，它采用组件化的开发方式，能够让开发者更加高效地构建复杂的用户界面。React 的核心思想是将 UI 划分为一系列独立的组件，每个组件都可以拥有自己的状态和生命周期方法。

React 组件

React 组件是构建用户界面的基本单元，可以理解为一个独立的模块，它封装了一定的 UI 功能和交互行为。React 组件可以分为两种类型：函数组件和类组件。

函数组件是一个纯函数，接受一个 props 对象作为参数，返回一个 React 元素。示例代码如下：

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

类组件则是一个继承自 React.Component 的 JavaScript 类，它可以拥有自己的状态和生命周期方法。示例代码如下：

// javascriptcn.com 代码示例
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

JSX

React 使用一种名为 JSX 的语法扩展来描述 UI，它是一种 JavaScript 的语法扩展。JSX 允许我们在 JavaScript 代码中编写 HTML 标签，这样可以让代码更加简洁易懂。示例代码如下：

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

React 生命周期

React 组件拥有自己的生命周期方法，可以在不同的阶段执行一些操作。React 生命周期可以分为三个阶段：挂载阶段、更新阶段和卸载阶段。

挂载阶段

在组件被挂载到页面上时，React 会依次执行以下生命周期方法：

constructor：组件被创建时调用，通常用来初始化 state。
static getDerivedStateFromProps：在组件挂载之前调用，用来根据 props 计算 state 的值。
render：渲染组件，返回一个 React 元素。
componentDidMount：组件挂载完成后调用，通常用来进行一些异步操作，如数据请求、定时器等。

更新阶段

当组件的 props 或 state 发生变化时，React 会依次执行以下生命周期方法：

static getDerivedStateFromProps：在更新阶段也会调用，用来根据 props 计算 state 的值。
shouldComponentUpdate：在更新阶段之前调用，用来决定组件是否需要重新渲染。
render：渲染组件，返回一个 React 元素。
componentDidUpdate：更新完成后调用，通常用来进行一些异步操作，如数据请求、定时器等。

卸载阶段

当组件从页面上卸载时，React 会执行以下生命周期方法：

componentWillUnmount：组件卸载之前调用，通常用来清理一些资源，如定时器、事件监听器等。

Redux 简介

Redux 是一个 JavaScript 状态管理库，它可以帮助我们管理应用程序的状态。Redux 的核心思想是将应用程序的状态存储在一个单一的 store 中，通过 dispatch 一个 action 来改变状态，再通过 reducer 来处理状态的变化。

Redux 的三个原则

Redux 的设计遵循三个原则：

单一数据源：整个应用程序的状态被存储在一个单一的对象中。
状态只读：状态只能通过 dispatch 一个 action 来改变，不能直接修改。
纯函数更新状态：reducer 是一个纯函数，它接收一个旧的状态和一个 action，返回一个新的状态。

Redux 的核心概念

Redux 中有三个核心概念：

store：存储整个应用程序的状态。
action：描述状态的变化。
reducer：根据 action 更新状态。

Redux 的工作流程

Redux 的工作流程可以分为以下几个步骤：

创建一个 store，将 reducer 传递给 createStore 方法。
通过 dispatch 一个 action 来改变状态。
reducer 根据 action 更新状态。
使用 getState 方法获取新的状态。

Redux 示例代码

// javascriptcn.com 代码示例
// 定义 reducer
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

// 创建 store
const store = createStore(counter);

// 监听状态变化
store.subscribe(() => console.log(store.getState()));

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

React Redux 的使用

React 和 Redux 可以结合使用，将 Redux 存储的状态传递给 React 组件。React Redux 提供了 connect 方法，可以将组件和 Redux store 连接起来。

React Redux 示例代码

// javascriptcn.com 代码示例
import React from 'react';
import { connect } from 'react-redux';

class Counter extends React.Component {
  render() {
    return (
      <div>
        <p>You clicked {this.props.count} times</p>
        <button onClick={this.props.increment}>Click me</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    count: state.count,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

在上面的代码中，我们使用 connect 方法将 Counter 组件和 Redux store 连接起来。mapStateToProps 函数将 Redux store 中的状态映射到组件的 props 中，mapDispatchToProps 函数将 dispatch 方法映射到组件的 props 中。这样，我们就可以在组件中使用 Redux store 中的状态和 dispatch 方法了。

总结

本文介绍了 React 和 Redux 的基础知识，包括 React 组件、JSX、React 生命周期、Redux 的三个原则、核心概念和工作流程，以及如何在 React 中使用 Redux。希望本文能够帮助大家更好地理解 React 和 Redux，并在实际项目中使用它们。

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