React HOC 模式 - 处理异步方法

Posted 2023-02-19

【中文标题】React HOC 模式 - 处理异步方法

【英文标题】：React HOC pattern - dealing with async methods

【发布时间】：2016-10-20 19:40:54

【问题描述】：

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

它将被两个组件使用。

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

【参考方案1】：

也可以使用REDUX。

您的组件必须是纯的和可重复使用的，不要将它们绑定到状态 导致应用程序只会浪费系统资源做不必要的重新 使成为。状态的使用应该尽可能地受到限制。什么时候 你使用状态，你冒着引入一些的风险 （有时是细微的）您的行为和渲染中的错误 成分。如果您决定使用属性来定义您的初始 状态;你的属性可能会改变，留下你的初始状态 基于陈旧数据的计算。您还引入了紧耦合 在需要定义的属性和内部 组件的状态。

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

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

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  />
    
  

【讨论】：

请不要发代码图片，而是发代码。

React / Facebook 的原始参考模式 Flux 也是一个很好的起点。 Redux 是从它派生的众多 *ux 模式之一。 facebook.github.io/flux/docs/overview.html