reactjs - React 中的 Angular 服务

Question

我来自 Angular，正在尝试学习 React(Native)。我们如何在 React 中实现 Angular 的“服务”概念？

例如，我想执行以下操作:

1. 从外部 API 获取 json 数据
2. 对数据进行一些操作，例如修改每一项
3. 使修改后的数据可供应用的多个组件使用

这在 Angular 中使用服务并将该服务注入(inject)到需要访问数据的任何组件中是非常简单和方便的。

这是如何在 React 中实现的？

Answer 1

原生 React 中服务的直接对应物是组件。与 Angular 不同，React 组件不必存在于 DOM 中。与 Angular 中的服务和组件/指令类似，React 中的关注点分离可以通过 container and presentational components 提供。 。容器组件可以处理业务逻辑，而表示逻辑则交给表示组件。

由于 React 更喜欢函数式方法，因此重用的代码不一定会进入类，而是可以用函数式组合来表达。

React 中的组件层次结构提供了依赖注入(inject)模式。它可以通过几种常见的方式来实现，以使数据(如服务实例)可用于整个应用程序或其中的一部分，例如通过深度传递的 props、上下文 API、第三方状态管理(Redux、MobX)。

const fetchData = () => fetch(...).then(res => res.json());
const processData = data => ...;
const fetchProcessedData = () => fetchData().then(processData);

class ContainerComponent extends React.Component {
  state = {};

  componentDidMount() {
    fetchProcessedData().then(data => {
      this.setState({ data });
    });
  }

  render() {
    return {this.state.data && <PresentationalComponent data={data}/>};
  }
}

PresentationalComponent 通过 data 属性注入(inject)依赖项。

可以使用 Angular 组件实现相同的示例，但这会导致不需要的 DOM 元素。

当 Redux 用于状态管理时，诸如获取(副作用)之类的事情由用于此目的的扩展来处理，例如redux-thunk、redux-saga等。而同步处理则由reducers处理。