反应HOC模式 - 处理异步方法

Question

我想创建一个异步更改其状态的HOC容器。

它将由两个组件使用。

这些组件订阅HOC异步方法成功/失败并相应更新其内部状态的最佳方法是什么？

Answer 1

也可以使用REDUX。

1. 你的组件必须是纯净的并且可重复使用，不要将它们绑定到状态 因为应用程序只会浪费系统资源做一些重要的事情 渲染。国家的使用应该尽可能地限制。什么时候 你使用州，你冒着引入一些的风险 （有时是微妙的）行为和渲染的错误 组件。如果您决定使用属性来定义初始值 州;你的属性可能会改变，留下你的初始状态 基于陈旧数据的计算。你还引入紧耦合 需要定义的属性和内部属性之间 组件的状态。

2. 一般规则是不对静态组件使用state。如果你 那么，基于外部因素，组件不需要改变 不要使用州。最好在计算中计算渲染值 render（）方法。链接https://www.youtube.com/watch?v=ymJOm5jY1tQ。

   https://medium.com/@mweststrate/3-reasons-why-i-stopped-using-react-setstate-ab73fc67a42e#.h3ioly71l

＆＃13;
＆＃13;
import React, {Component} from 'react';

export const fetchResource = msg => WrappedComponent =>
  class extends Component {
    constructor(props){
      super(props);

      this.state = {
        resource: null,
        msg: null
      };
    }

    componentDidMount(){
      this.setState({msg})
        axios.get('https://api.github.com/users/miketembos/repos')
        .then((response)=>{
          console.log(response);
          if(response.status===200){
            return response.data;
          } else {
            throw new Error("Server response wasn't ok");
          }

        })
        .then((responseData)=>{
          this.setState({resource:responseData});
        }).catch((error)=>{
          this.props.history.pushState(null, '/error');
        });
    }

    render(){
      const {resource} = this.state
      //check if the resource is valid eg not empty or null
      if(!resource){return <div>Loading...... or show any othe component you want load.....</div>}
      return <Post {...this.props} {...resource } />
    }
  }
＆＃13;
＆＃13;
＆＃13;