React 组件通信方式小结：props、context、redux-JavaScript中文网-JavaScript教程资源分享门户

React 是一个非常流行的前端框架，组件是 React 的核心概念之一。在 React 中，组件之间需要进行通信来实现一些功能，比如组件的状态和数据共享等。React 提供了多种组件通信方式，本文将对 React 组件通信方式进行小结，包括 props、context、redux 三种方式。

Props

Props 是 React 组件之间的一种传递数据的方式，可以在父组件中将数据传递给子组件，子组件通过 props 获取数据。Props 是 React 中的一个重要概念，也是最常用的组件通信方式之一。

应用

父组件可以将数据传递给子组件，子组件可以通过 props 对父组件的数据进行访问。这样不仅方便了数据的传递，同时也避免了组件之间直接操作 DOM，提高了代码的可维护性和可读性。

// javascriptcn.com 代码示例
import React from "react";
import ReactDOM from "react-dom";

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
      </div>
    );
  }
}

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent title="标题" content="这是内容" />
      </div>
    );
  }
}

ReactDOM.render(<ParentComponent />, document.getElementById("root"));

优点

简单易用
数据只能单向传递

缺点

只能层层传递，不能实现兄弟组件的通信
如果父组件的组合更改，会影响到子组件的 props，导致子组件需要重新渲染

Context

Context 是 React 核心中的一部分，可以让数据在组件树中传递而不必通过每个组件显式传递。使用 Context 可以避免将 props 逐层传递而造成的繁琐和烦恼。

应用

当需要在任何层级的组件中传递数据时，可以使用 Context。比如，主题样式可以被应用于整个应用程序，可以将主题存储在 Context 中，无需在每个组件中显式地将主题作为 props 传递。

// javascriptcn.com 代码示例
import React from "react";
import ReactDOM from "react-dom";

const ThemeContext = React.createContext('light');

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <ThemeContext.Consumer>
          {theme => (
            <h1 style={{ color: theme }}>{this.props.title}</h1>
          )}
        </ThemeContext.Consumer>
        <p>{this.props.content}</p>
      </div>
    );
  }
}

class ParentComponent extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="red">
        <ChildComponent title="标题" content="这是内容" />
      </ThemeContext.Provider>
    );
  }
}

ReactDOM.render(<ParentComponent />, document.getElementById("root"));

优点

可以避免将 props 逐层传递
数据可以在组件树的任何位置获取
可以实现跨级组件的通信

缺点

在传递的数据更新时，所有使用该 Context 的组件都会被重新渲染

Redux

Redux 是 React 中很好用的状态管理库，可以用于管理整个应用程序的状态，提供可预测的状态更新。

应用

当应用程序的状态管理变得复杂且无法通过直接传递 props 或使用 Context 解决时，可以考虑使用 Redux。

// javascriptcn.com 代码示例
import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider, connect } from "react-redux";

const initialState = {
  title: "标题",
  content: "这是内容"
};

// reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "UPDATE_TITLE":
      return Object.assign({}, state, {
        title: action.payload
      });
    case "UPDATE_CONTENT":
      return Object.assign({}, state, {
        content: action.payload
      });
    default:
      return state;
  }
};

// store
const store = createStore(reducer);

// actions
const updateTitle = title => ({
  type: "UPDATE_TITLE",
  payload: title
});

const updateContent = content => ({
  type: "UPDATE_CONTENT",
  payload: content
});

// child component
class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const { updateTitle, updateContent } = this.props;
    if (event.target.name === "title") {
      updateTitle(event.target.value);
    } else if (event.target.name === "content") {
      updateContent(event.target.value);
    }
  }

  render() {
    const { title, content } = this.props;
    return (
      <div>
        <input name="title" value={title} onChange={this.handleChange} />
        <textarea
          name="content"
          value={content}
          onChange={this.handleChange}
        ></textarea>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  title: state.title,
  content: state.content
});

const mapDispatchToProps = dispatch => ({
  updateTitle: title => dispatch(updateTitle(title)),
  updateContent: content => dispatch(updateContent(content))
});

const ChildComponentContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(ChildComponent);

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponentContainer />
      </div>
    );
  }
}

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

优点

可以全局管理应用程序的状态
易于实现时间旅行、记录日志等高级功能
可以方便地在不同的组件之间共享数据

缺点

小项目使用 Redux 可能过于繁琐，代码复杂度较高

总结

在 React 组件通信中，props、context、redux 三种方式各有优点和缺点。在使用时，需要根据实际情况选择合适的方式。如果是简单的数据传递，可以使用 props；如果是跨组件的数据传递，可以使用 context；如果应用程序的状态管理比较复杂，可以使用 redux 进行管理。

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