React 中的 Angular 服务答案

【问题标题】：Angular Services in ReactReact 中的 Angular 服务
【发布时间】：2020-09-18 11:43:06
【问题描述】：

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

例如，我想做以下事情：

从外部 API 以 json 格式获取数据
对数据做一些事情，例如修改每一项
使修改后的数据可用于应用的多个组件

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

这是如何在 React 中实现的？

【问题讨论】：

最好的解决方案可能取决于您使用什么作为状态机。例如，如果您使用 Redux，我建议使用 Redux Sagas 之类的东西来处理外部 API 请求/修改响应，然后使用 reducer 填充可以被连接到 store 的任何组件访问的 store。

标签： reactjs react-native

【解决方案1】：

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

由于 React 偏爱函数式方法，因此重用代码不一定要放在一个类中，而是可以用函数式组合来表示。

React 中的组件层次结构提供了依赖注入模式。它可以以几种常见的方式实现，以使数据（如服务实例）可用于整个应用程序或其中的一部分，例如通过深度传递的 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 属性注入依赖项。

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

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

【讨论】：

很好的答案！能否请您参考一个链接，了解更多关于这个 Angular 不需要的 DOM 元素的信息？
@AndreKnob 见angular.io/api/core/Directive#selector。 Angular 组件和指令应该存在于 DOM 中，以便由编译器编译（对于手动编译的实例可能不同）。因此，以与 React 相同的轻松方式堆叠组件将导致 Angular 中的 DOM 树混乱。
很好的解释，干杯

【解决方案2】：

您可以简单地使用 contextAPI。它提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递 props。访问 here 了解更多关于 Context

【讨论】：