在 MongoDB 中，如何配置副本集以实现读写分离？

一、React Context 原理

简单地说就是可以将一些数据注入到Context对象中，使其下辖的组件可以随时随地访问这些数据，省去了逐层传递的步骤。

相对于在组件里挖槽（比如{props.children}），使用Context应该更注重随时随地都可能有需求使用这些数据这个目的。

二、使用

// AppContext.js
import React from 'react';
const defaultValue = null
const AppContext = React.createContext(defaultValue);
export default AppContext;

// app.ts
import AppContext from './appContext';

class App extends Component<any, any> {
  state: any = {
    baseConfig: {value: 123}
  }


  //要渲染的页面
  render() {
    return (
      <AppContext.Provider value={this.state.baseConfig}>
          {this.props.children}
      </AppContext.Provider>
    )
  }
}

export default App

// 自组件使用
export function Component(props: any) {
  return <AppContext.Consumer>
    {
      (value) => <Customer_page_overview_data {...props} {...value} />
    }
  </AppContext.Consumer>
}

三、异步传递问题

异步获取的数据存储全局的context中，子组件中使用这个context的数据时，数据为空；

// app.ts
import AppContext from './appContext';

class App extends Component<any, any> {
  state: any = {
    baseConfig: {value: 123}
  }

  componentDidUpdate() {
      if (!this.state.baseConfig.value) {
        API_CONFIG.getLogo({queryParams: {var: "report.baseConfig.target"}}).then(baseConfig => {
          console.log(baseConfig, "-=-=--=-=-AppContext=-=-=-=")
          this.setState({baseConfig})
        })
      }
  }


  //要渲染的页面
  render() {
    return (
      <AppContext.Provider value={this.state.baseConfig}>
          {this.props.children}
      </AppContext.Provider>
    )
  }
}

export default App