剧场模式
首页前端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 条回复
加微信(qiuzhi99666)入群官方服务号
随机课程
React & Redux & React-Router & Nodejs 实战 crud 项目

React & Redux & React-Router & Nodejs 实战 crud 项目

18 个视频1 小时 54 分钟中级

Pro¥ 139.00¥ 111.20

Redux已完结

课程目录

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)

学员(83)
迅捷斥候tony · 大乘Hichank · 太乙NullPointerException · 太乙穆博嘉 · 真仙liuboyu520 · 大乘xiaoxi · 真仙AphasiaPatient · 真仙highcker · 太乙阿震 · 真仙sailorook · 金仙周淼 · 元婴YanXinhua · 道祖
最新动态
迅捷斥候tony · 大乘学习到了6:37
Hichank · 太乙学习到了6:26
NullPointerException · 太乙学习到了6:17
穆博嘉 · 真仙学习到了6:37
liuboyu520 · 大乘学习到了6:26
统计信息
    学员: 15266
    视频数量: 883
    帖子数量: 433

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

Top