剧场模式
首页前端ReactReact 进阶提高 - 技巧篇 - 第 1 季

React 进阶提高 #10 用高阶组件来重构代码

海外散仙厉飞雨 · 真仙发布于
3

重构前

src/components/User.js

import React, { Component } from 'react';

class User extends Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      user: null
    };
  }

  componentDidMount() {
    fetch('https://randomuser.me/api/')
      .then(res => res.json())
      .then(user => {
        this.setState({
          loading: false,
          user: user
        });
      })
  }

  render() {
    if(this.state.loading) {
      return (
        <div>loading</div>
      )
    } else {
      return (
        <h1>{this.state.user.results[0].email}</h1>
      )
    }
  }
}

export default User;

src/components/Joke.js

import React, { Component } from 'react';

class Joke extends Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      jokes: null
    };
  }

  componentDidMount() {
    fetch('http://api.icndb.com/jokes/random/3')
      .then(res => res.json())
      .then(jokes => {
        this.setState({
          loading: false,
          jokes: jokes
        });
      })
  }

  render() {
    if(this.state.loading) {
      return (
        <div>loading</div>
      )
    } else {
      return (
        <div>
          {
            this.state.jokes.value.map(joke => (
              <p key={ joke.id }>{ joke.joke }</p>
            ))
          }
        </div>
      )
    }
  }
}

export default Joke;

重构后

src/hoc/withFetch.js

import React, { Component } from 'react';

const withFetch = (url) => (View) => {
  return class extends Component {
    constructor() {
      super();
      this.state = {
        loading: true,
        data: null
      };
    }

    componentDidMount() {
      fetch(url)
        .then(res => res.json())
        .then(data => {
          this.setState({
            loading: false,
            data: data
          });
        })
    }

    render() {
      if(this.state.loading) {
        return (
          <div>loading</div>
        )
      } else {
        return <View data={ this.state.data } />
      }
    }
  }
}

export default withFetch;

src/components/Joke.js

import React from 'react';
import withFetch from '../hoc/withFetch';

const Joke = withFetch('http://api.icndb.com/jokes/random/3')(props => {
  return (
    <div>
      {
        props.data.value.map(joke => (
          <p key={ joke.id }>{ joke.joke }</p>
        ))
      }
    </div>
  )
})

export default Joke;

src/components/User.js

import React from 'react';
import withFetch from '../hoc/withFetch';

const User = withFetch('https://randomuser.me/api/')(props => {
  return (
    <h1>{props.data.results[0].email}</h1>
  )
})

export default User;
5 条回复
课程目录

1Freereact 技巧 #1 如何用 netlify 云服务部署 react 应用

2Freereact 技巧 #2 把 react 应用部署到 GitHub Pages

3Freereact 技巧 #3 react-router 教程 part 1

4Freereact 技巧 #4 react-router 教程 part 2

5ProReact 进阶提高 #5 React.PureComponent

6ProReact 进阶提高 #6 Fragment

7FreeReact 进阶提高 #7 context(上下文)

8ProReact 进阶提高 #8 高阶组件

9ProReact 进阶提高 #9 强大酷炫好玩的 web IDE 工具(鼠标点击生成代码,缩减 N 倍开发时间)

FreeReact 进阶提高 #10 用高阶组件来重构代码

11ProReact 进阶提高 #11 我最爱的 React 库 - 功能强大的可插入组件 (简化代码)

12ProReact 进阶提高 #12 返回多个组件的正确方式

13FreeReact 进阶提高 #13 netlifyctl 一键部署前端应用

14FreeReact 进阶提高 #14 defaultProps 和 类型检查 PropTypes part 1

15ProReact 进阶提高 #15 类型检查 PropTypes part 2

16ProReact 进阶提高 #16 用 Render Props 代替 HOC(高阶组件)

17ProReact 进阶提高 #17 错误边界和生命周期函数 componentDidCatch

18FreeReact 进阶提高 #18 升级到 16.3

19FreeReact 进阶提高 #19 探索 bind (this) 的写法

20FreeReact 进阶提高 #20 React 16.3 全新的 Context API

21ProReact 进阶提高 #21 React 16.3 全新的 Context API - 实践

22ProReact 进阶提高 #22 从 Redux 迁移到 React 16.3 的 Context API 之实践

23ProReact 进阶提高 #23 对象,数组,可变数据

24ProReact 进阶提高 #24 React.Children API 和 props.children 讲解

25ProReact 进阶提高 #25 如何使用 styled-components

26ProReact 进阶提高 #26 如何使用 styled-components(实践篇)

27ProReact 进阶提高 #27 你应该使用 redux-form(介绍)

28ProReact 进阶提高 #28 你应该使用 redux-form(实践篇)

29ProReact 进阶提高 #29 React Portals(学习方法)

30ProReact 进阶提高 #30 使用 React Portals 实现 Modal 框(part 1)

31ProReact 进阶提高 #31 使用 React Portals 实现 Modal 框(part 2)

32ProReact 进阶提高 #32 使用 React Portals 实现 Modal 框(part 3)

33ProReact 进阶提高 #33 使用 React Portals 实现 Modal 框(part 4)

学员
xiao_ran · 太乙玉仙Qujoe · 真仙baimifan2017 · 金仙后期l617388617 · 金仙后期何林澎 · 真仙开心就好 · 金仙后期徐潇宇 · 金仙后期anywayshe · 真仙demi · 金仙巅峰00Jane · 金仙后期Kepler · 大罗巅峰kaixuan1992 · 道祖HiroTang · 大罗h23 · 大罗Super-Ps · 金仙后期itlaowang520 · 太乙巅峰Life of PI · 真仙不冰 · 真仙timorTm · 太乙巅峰psdf · 太乙巅峰iosLongFeng · 太乙巅峰suifengmidi · 金仙中期zhangzhiqiang_zzz · 真仙qianduan · 真仙nicholasyih · 大罗巅峰xuezh · 太乙巅峰bafvhxk03 · 大罗liunian1993 · 金仙后期ryuusennka · 大罗巅峰wsxiaotongtong · 金仙后期xiaoliu666 · 道祖jianglinhub · 金仙后期与UIuoi89898 · 道祖chrisliume · 大罗
最新动态
xiao_ran · 太乙玉仙学习到了6:37
Qujoe · 真仙学习到了6:33
baimifan2017 · 金仙后期学习到了5:52
l617388617 · 金仙后期学习到了1:13
何林澎 · 真仙学习到了2:09

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:32

Top