精通 React Redux：极客精华篇-JavaScript中文网-JavaScript教程资源分享门户

React 和 Redux 是现代前端开发中最流行的技术之一，它们的出现彻底改变了前端开发的方式。在本文中，我们将深入探讨 React 和 Redux 的核心概念和用法，并提供实用的示例代码，帮助您更好地理解和掌握这两个技术。

React

React 是由 Facebook 开发的一种用于构建用户界面的 JavaScript 库。它采用组件化的思想，将页面拆分成多个可复用的组件，使得开发人员可以更加灵活地构建复杂的应用程序。React 的核心概念包括虚拟 DOM、组件、状态和生命周期方法。

虚拟 DOM

虚拟 DOM 是 React 的一个重要概念，它是一个 JavaScript 对象，用于描述页面上的元素及其属性。React 通过比较两个虚拟 DOM 对象的差异，来决定如何更新页面的实际 DOM 结构，从而提高页面渲染的效率。

以下是一个简单的虚拟 DOM 对象的示例：

// www.javascriptcn.com code example
const vdom = {
  type: 'div',
  props: {
    className: 'container',
    children: [
      {
        type: 'h1',
        props: {
          children: 'Hello, World!'
        }
      },
      {
        type: 'p',
        props: {
          children: 'This is a React component.'
        }
      }
    ]
  }
}

组件

组件是 React 中的一个重要概念，它是一个可复用的 UI 元素，可以包含其他组件或 HTML 元素。组件有两种类型：函数组件和类组件。

函数组件是一个简单的 JavaScript 函数，它接收一个 props 对象作为参数，并返回一个 React 元素。以下是一个简单的函数组件的示例：

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

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));

类组件是一个继承自 React.Component 的 JavaScript 类，它可以包含状态和生命周期方法。以下是一个简单的类组件的示例：

// www.javascriptcn.com code example
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>Count: {this.state.count}</p>
        <button onClick={() => this.handleClick()}>Click me</button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));

状态

状态是 React 组件中的一个重要概念，它用于存储组件的数据。状态可以在组件内部修改，并且修改后会触发组件的重新渲染。使用状态可以使得组件的行为更加灵活和可定制。

以下是一个简单的状态的示例：

// www.javascriptcn.com code example
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>Count: {this.state.count}</p>
        <button onClick={() => this.handleClick()}>Click me</button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));

生命周期方法

生命周期方法是 React 组件中的一种特殊方法，它会在组件的生命周期中被自动调用。生命周期方法可以用于在组件挂载、更新或卸载时执行一些特定的操作。

以下是一些常用的生命周期方法：

componentDidMount(): 组件挂载后执行。
componentDidUpdate(prevProps, prevState): 组件更新后执行。
componentWillUnmount(): 组件卸载前执行。

以下是一个简单的生命周期方法的示例：

// www.javascriptcn.com code example
class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  render() {
    return (
      <div>
        <p>Seconds: {this.state.seconds}</p>
      </div>
    );
  }
}

ReactDOM.render(<Timer />, document.getElementById('root'));

Redux

Redux 是一个用于管理应用程序状态的 JavaScript 库。它采用单一状态树的思想，将应用程序的状态存储在一个对象中，并使用纯函数来修改状态。Redux 的核心概念包括 store、action 和 reducer。

store

store 是 Redux 中的一个重要概念，它是一个包含应用程序状态的对象。store 可以通过 dispatch 方法来触发 action，并使用 reducer 函数来修改状态。store 还可以使用 subscribe 方法来监听状态的变化。

以下是一个简单的 store 的示例：

// www.javascriptcn.com code example
import { createStore } from 'redux';

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;
  }
}

const store = createStore(counterReducer);

store.subscribe(() => {
  console.log(store.getState());
});

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

action

action 是 Redux 中的一个重要概念，它是一个描述状态变化的纯 JavaScript 对象。action 包含一个 type 属性，用于描述状态变化的类型，以及一些额外的数据。

以下是一个简单的 action 的示例：

const incrementAction = { type: 'INCREMENT' };
const decrementAction = { type: 'DECREMENT' };

reducer

reducer 是 Redux 中的一个重要概念，它是一个纯函数，用于根据 action 来修改状态。reducer 接收当前状态和一个 action 对象作为参数，并返回一个新的状态。

以下是一个简单的 reducer 的示例：

// www.javascriptcn.com code example
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;
  }
}

示例代码

以下是一个使用 React 和 Redux 构建的计数器应用程序的示例代码：

// www.javascriptcn.com code example
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';

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;
  }
}

const store = createStore(counterReducer);

class Counter extends React.Component {
  handleClick() {
    store.dispatch({ type: 'INCREMENT' });
  }

  render() {
    return (
      <div>
        <p>Count: {store.getState().count}</p>
        <button onClick={() => this.handleClick()}>Click me</button>
      </div>
    );
  }
}

store.subscribe(() => {
  ReactDOM.render(<Counter />, document.getElementById('root'));
});

ReactDOM.render(<Counter />, document.getElementById('root'));

在上面的示例代码中，我们使用了 React 和 Redux 来构建一个计数器应用程序。我们首先定义了一个 counterReducer 函数来管理状态的变化，然后使用 createStore 方法创建了一个 store 对象。接着，我们定义了一个 Counter 组件来展示当前的计数器值，并使用 store.subscribe 方法来监听状态的变化。最后，我们使用 ReactDOM.render 方法将 Counter 组件渲染到页面上，并在 handleClick 方法中使用 store.dispatch 方法来触发状态的变化。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d8d637a941bf7134f74e7f

精通 React Redux：极客精华篇