javascript - 在 React 应用程序中，启动初始 API 服务调用以加载数据的最佳位置在哪里？

Question

在 React 应用程序中，初始 API 服务调用应该在哪里进行？它应该存在于与功能相关的组件中还是单独的服务组件中？

这是如何运作的？我来自一个 Angular 背景。试图理解这一点。

Answer 1

componentDidMount组件的钩子(Hook)是获取数据的好地方。对于更复杂的共享状态，您可能需要查看状态库，例如 Redux或 MobX .

示例 ( JS Bin )

function getData() {
  return new Promise(resolve => setTimeout(() => {
    resolve('bar');
  }, 2000));
}

class App extends React.Component {
  state = {
    data: 'foo'
  };
  componentDidMount() {
    getData().then(data => {
      this.setState({ data });
    })
  }
  render() {
    return <div> {this.state.data} </div>;
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);