快速学习 React 和 Redux 三大核心-JavaScript中文网-JavaScript教程资源分享门户

React 和 Redux 是目前最流行的前端框架和状态管理器，也是很多公司招聘前端工程师的必备技能。本文将介绍 React 和 Redux 的三大核心概念，包括组件、Props 和 State、Redux Store 和 Reducer，以及它们的使用方法和实际应用。

组件、Props 和 State

React 的核心概念是组件，它可以是一个简单的按钮或者是一个复杂的表单，它们可以被嵌套在一起形成一个完整的应用程序。组件可以接受一些参数，称为 Props，这些参数可以用来控制组件的行为和样式。例如，一个按钮组件可以接受 Props 来定义按钮的文本和样式。

组件还有一个重要的概念，称为 State，它是组件内部的状态。State 可以用来存储组件的数据和状态，例如一个表单组件可以用 State 存储用户输入的数据。当 State 发生变化时，组件会重新渲染，从而更新界面。

下面是一个简单的组件示例，它接受 Props 和 State 并将它们渲染为一个按钮：

// www.javascriptcn.com code example
import React from 'react';

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

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

  render() {
    const { text, style } = this.props;
    const { count } = this.state;
    return (
      <button style={style} onClick={this.handleClick}>
        {text} ({count})
      </button>
    );
  }
}

export default Button;

Redux Store 和 Reducer

Redux 是一个状态管理器，它可以用来管理整个应用程序的状态。Redux 的核心概念是 Store 和 Reducer。

Store 是一个包含整个应用程序状态的对象，它可以被读取和更改。Redux 中的 State 是不可变的，因此每次更改 State 都必须返回一个新的 State 对象。这可以通过 Reducer 函数来实现。

Reducer 接受当前的 State 和一个 Action，返回一个新的 State。Action 是一个描述 State 更改的对象，它通常包含一个类型和一些数据。Reducer 根据 Action 的类型来更新 State，然后返回一个新的 State。

下面是一个简单的 Redux Store 和 Reducer 示例，它存储一个计数器的值：

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

// 定义 Action 类型
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// 定义 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
const store = createStore(counterReducer);

// 订阅 Store 变化
store.subscribe(() => {
  console.log(store.getState());
});

// 发起 Action
store.dispatch({ type: INCREMENT });
store.dispatch({ type: INCREMENT });
store.dispatch({ type: DECREMENT });

实际应用

React 和 Redux 的组合可以用来构建复杂的应用程序。下面是一个简单的 Todo List 应用程序示例，它演示了如何使用 React 和 Redux。

首先，我们需要定义 Todo List 的 State，它包含一个 Todo 列表和一个输入框的值：

const initialState = {
  todos: [],
  input: '',
};

然后，我们需要定义 Action 类型和 Action Creator 函数：

// www.javascriptcn.com code example
const ADD_TODO = 'ADD_TODO';
const UPDATE_INPUT = 'UPDATE_INPUT';

function addTodoAction(text) {
  return { type: ADD_TODO, payload: { text } };
}

function updateInputAction(text) {
  return { type: UPDATE_INPUT, payload: { text } };
}

接下来，我们需要定义 Reducer 函数来处理这些 Action：

// www.javascriptcn.com code example
function todoReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, { text: action.payload.text }],
        input: '',
      };
    case UPDATE_INPUT:
      return {
        ...state,
        input: action.payload.text,
      };
    default:
      return state;
  }
}

然后，我们需要创建 Redux Store 并将 Reducer 传入：

const store = createStore(todoReducer);

现在，我们可以将 TodoList 组件连接到 Redux Store 并使用 Props 和 State：

// www.javascriptcn.com code example
import React from 'react';
import { connect } from 'react-redux';
import { addTodoAction, updateInputAction } from './actions';

class TodoList extends React.Component {
  handleAddTodo = () => {
    const { input, addTodo } = this.props;
    addTodo(input);
  };

  handleInputChange = (event) => {
    const { updateInput } = this.props;
    updateInput(event.target.value);
  };

  render() {
    const { todos, input } = this.props;
    return (
      <div>
        <ul>
          {todos.map((todo, index) => (
            <li key={index}>{todo.text}</li>
          ))}
        </ul>
        <input value={input} onChange={this.handleInputChange} />
        <button onClick={this.handleAddTodo}>Add</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    todos: state.todos,
    input: state.input,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    addTodo: (text) => dispatch(addTodoAction(text)),
    updateInput: (text) => dispatch(updateInputAction(text)),
  };
}

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

最后，我们需要将 TodoList 组件渲染到页面上：

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

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

现在，我们已经学会了 React 和 Redux 的三大核心概念，并且可以用它们来构建复杂的应用程序。在实践中，我们还需要学习更多的技术，例如 React Router、Redux Thunk 等，以及最佳实践和性能优化。

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

快速学习 React 和 Redux 三大核心

组件、Props 和 State

Redux Store 和 Reducer

实际应用

接着读