Question

首先，我已经与React一起工作了三个月，并且我正在构建的应用程序是可测试的，性能良好的……等等。我在React之前的经验来自Angular世界，这是最佳实践，通常没有反应，反之亦然...我不认为我在做什么对我正在构建的应用程序是错误的不想错过任何大事。

长话短说，在我的App.tsx文件中（使用TypeScript），我正在创建一个单例服务的新实例，并将其导出为命名导出。例如，我的应用程序组件看起来像：

import * as React from 'react'
... axios import here

import { HttpService } from './core/http.service';
import { Spinner } from './shared/spinner';

const axiosInstance = Axios.create({config here});
const httpService = new HttpService(axiosInstance);

class App extends React.Component {

  props: any;
  state: any;

  constructor(props: any) {
    super(props);
  }

  render() {
    return(<App Root Component Here...>)
  }
}

export { httpService };
export default App;

想象一下应用程序中某个需要使用我的单例服务的组件。就我的问题而言，我将组件命名为Home（home / Home.tsx）。

import * as React from 'react'

import { httpService } from '../App';

class Home extends React.Component {

  props: HomeProps;
  state: HomeState;

  constructor(props: HomeProps) {
    super(props);
    this.state = {
      isLoading: false,
      myData: []
    }

    this.loadData = this.loadData.bind(this);
  }

  componentDidMount() {
    this.loadData();
  }

  // Using httpService here.
  loadData() {
    this.setState({isLoading: true});
    httpService.get('/api/somedataurl').then((response) => {
      const { data } = response;
      this.setState({myData: data});
    }).then(() => {
      this.setState({isLoading: false});
    });
  }

  myDataList() {
    return (<ul>...{map of this.state.myData}</ul>)
  }

  render() {
    return this.state.isLoading ? (<Spinner>) : this.myDataList();
  }
}

export default Home;

我之所以决定使用此实现，是因为我知道我始终可以依赖App组件，并且没有服务器端渲染的计划。

作为一个简单的解决方案，将我的单例服务作为命名导出并根据需要导入到其他组件中是否存在严重缺陷？

反应-从合成根目录提供全局单例

0 个答案: