使用React Hooks复用复杂业务组件

dreamans 发布于2019-08-23 14:24 / 2960人阅读

摘要：前段时间也在复杂业务组件抽取上下了不少功夫。本文将使用近期非常火的特性抽取常用的业务组件，并比对业界已有方式，借此尝试探索出一套优雅的组件复用方案。即将同一业务模块的放置同一文件夹。下面使用排行榜复杂业务模块的封装来进行实例说明。

导语：复杂业务逻辑复用一直是React组件开发中的一大难题，团队目前同质化业务比较多，我们的想法是直接复用已有的逻辑代码，因为还要考虑到数据的拉取，展示，显然纯UI组件不能满足我们的需求。前段时间也在复杂业务组件抽取上下了不少功夫。本文将使用近期非常火的React Hook特性抽取常用的业务组件，并比对业界已有方式，借此尝试探索出一套优雅的组件复用方案。

背景

现有的业务采用Redux管理业务数据，各模块关注的Reducer、Action是分散的，并且所有数据使用唯一Store储存。如果直接通过拷代码的方式，需要同时关注Reducer、Action目录，然后修改顶层Store中关注的Reducer。这样的开发方式对二次开发者来说非常不友好，理清原有代码然后复用的时间消耗不亚于自己重写一套逻辑。为了减少不必要的开发耗时，封装常用的复杂业务模块迫在眉睫。

现阶段方式

首先我们将开发方式由纵向开发转为横向开发。即将同一业务模块的Reducer、Action、index放置同一文件夹。

目录结构如下：

component
    |———reducer
    |———action
    |———accets
    |___index.js
    |___index.less

这样还是和原始React+Redux的开发方式一样，而二次开发者只需要拷贝业务模块文件夹再做细节修改了。
其实这样的开发方式仅仅是减少了开发者在多个文件夹来回切换的耗时，他们还是需要梳理模块内部逻辑，并且需要在顶层Store中添加数据关注。除非我们使用更多的Props使得组件可以满足各种场景，开发者只需要传递相关属性，即可直接使用，这样就会使得我们的业务组件非常的重，有相当多作为判断用的鸡肋般的代码。

React Hooks

不了解React Hooks的同学可以先移步React Hooks的简单介绍

Hooks的实质是把面向生命周期编程变成了面向业务逻辑编程。此时我们业务组件的封装方式可以修改成
Hooks + UI Component。下面使用「排行榜」复杂业务模块的封装来进行实例说明。

1、Hooks逻辑

import React, { useEffect, useState } from "react"
import _ from "axios"

function useRank (cgi, params) {
  const [rankList, setRankList] = useState([])
  const [myRank, setMyRank] = useState({})
  const [isEnd, setIsEnd] = useState(0)

  // 第二个参数传递 [] 相当于将effect作为class Component中的componentDidMount使用
  useEffect(() => {
    let query = ""
    Object.keys(params).forEach((key, idx) => {
      query += idx === 0 ? `?${key}=${params[key]}` : `&${key}=${params[key]}`
    })
    // 拉取逻辑
    _.get(`${cgi}${query}`)
      .then(res => {
        const { myRank, rankList, isEnd } = camelcase(res.data.result)
        setRank(rankList)
        setMyRank(myRank)
        setIsEnd(isEnd)
      })
      .catch(e => console.log(e))
  }, [])

  return {
    myRank, rankList, isEnd
  }
}

2、UI Component

import React from "react"
import { useRank } from "./hooks"

const Rank = ({
  cgi = ""
  params = { off_set: 0, page_size: 10 },
}) => {
  
  // 使用自定义Hook
  const { rank = [], myRank, isEnd } = useRank(cgi, params)

  return (
    
        ...
    
  )
}

export default Rank

按这种方式我们可以在需要拉取rank数据的时候直接调用方法获取到，并且不同组件中数据相互独立，非常适用于多榜单切换的情况，如下图

const { rank = [], myRank, isEnd } = useRank(cgi, params)

业界其他方式

具体参考React Hooks深入不浅出

感谢阅读，祝大家新年快乐～～～～

参考

React Hooks的简单介绍
React Hooks深入不浅出
如何更优雅地使用 Redux

GPU云服务器云服务器 React hooks react-hooks React Hooks 文档重大更新！ java复杂业务逻辑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100564.html

从Mixin到hooks，谈谈对React16.7.0-alpha中即将引入的hooks的理解

摘要：已经被废除，具体缺陷可以参考二为了解决的缺陷，第二种解决方案是高阶组件简称。我们定义了父组件，存在自身的，并且将自身的通过的方式传递给了子组件。返回一个标识该的变量，以及更新该的方法。为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在Reac...

ZweiZhao 2019-08-02 11:52 评论0 收藏0
从Mixin到hooks，谈谈对React16.7.0-alpha中即将引入的hooks的理解

摘要：已经被废除，具体缺陷可以参考二为了解决的缺陷，第二种解决方案是高阶组件简称。我们定义了父组件，存在自身的，并且将自身的通过的方式传递给了子组件。返回一个标识该的变量，以及更新该的方法。为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在Reac...

funnyZhang 2019-08-29 17:09 评论0 收藏0
从Mixin到hooks，谈谈对React16.7.0-alpha中即将引入的hooks的理解

摘要：已经被废除，具体缺陷可以参考二为了解决的缺陷，第二种解决方案是高阶组件简称。我们定义了父组件，存在自身的，并且将自身的通过的方式传递给了子组件。返回一个标识该的变量，以及更新该的方法。为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在Reac...

wizChen 2019-08-23 12:39 评论0 收藏0
React Hooks入门: 基础

摘要：当组件安装和更新时，回调函数都会被调用。好在为我们提供了第二个参数，如果第二个参数传入一个数组，仅当重新渲染时数组中的值发生改变时，中的回调函数才会执行。前言　　首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励，希望大家多多关注呀！React 16.8中新增了Hooks特性，并且在React官方文档中新增...

mrli2016 2019-08-23 15:36 评论0 收藏0
React Hook起飞指南

摘要：起飞指南作者元潇方凳雅集出品目前放出来了个内置，但仅仅基于以下两个，就能做很多事情。行代码实现一个全局元潇根组件挂上即可子组件调用随时随地实现一个局部元潇的本质是的一个语法糖，感兴趣可以阅读一下的类型定义和实现。 React Hook起飞指南作者：元潇方凳雅集出品 16.8目前放出来了10个内置hook，但仅仅基于以下两个API，就能做很多事情。所以这篇文章不会讲很多API，...

姘搁『 2019-08-26 10:47 评论0 收藏0