React Hooks的999999个好处

Stella981
• 阅读 726

最近前几个月开始,新项目都开始完全使用typescript+hooks,先不说typescript吧,hooks是真的香🤣

1.更好的分离页面和逻辑,重用逻辑的方法

现在前端项目的组件化,一般都是基于最基础的UI组件库(里面也有组件的功能逻辑),加上业务逻辑,封装一个个component,container。

组件是 UI + 逻辑的复用,但逻辑复用能力等于 0。

而在项目中,很难做到轻松的把 UI 和逻辑分开。(这里的逻辑并不是简单的能抽离的那种工具函数)。在此之前,React有Mixin(ES6Class就已经废弃了,不谈了),HOC,render props来抽离逻辑。

HOC

HOC并不是react提供的api,而是基于react特性的一种模式,常见的例子就是大家常见的react-redux中的connect函数,antd的form.create函数,HOC是一个函数,参数接受一个组件,返回一个新组件

render props

render props 我理解是平级组件之间单向依赖的一种模式,和HOC一样也不是什么react提供的api,也是一种模式,由React Trainning成员的一个大佬提出替代HOC的一种更好的模式。首先需要一个提供可变数据源的组件,然后给这个组件传入一个叫render函数的props(叫啥名字都行,提出者只是想强调这是一个拥有类似render功能的props..),特点就是这个props属性不是对象不是简单类型变量,就是一个函数,这个函数的参数就是希望用到可变数据源中的数据,返回结果就是一个jsx的UI结构。如果替代HOC,render的参数就可以是一个组件,react router4的withRouter即是这样实现:

import React from 'react'
import PropTypes from 'prop-types'
import hoistStatics from 'hoist-non-react-statics'
import Route from './Route'

/**
 * A public higher-order component to access the imperative API
 */
const withRouter = (Component) => {
  const C = (props) => {
    const { wrappedComponentRef, ...remainingProps } = props
    return (
      <Route render={routeComponentProps => (
        <Component {...remainingProps} {...routeComponentProps} ref={wrappedComponentRef}/>
      )}/>
    )
  }

  C.displayName = `withRouter(${Component.displayName || Component.name})`
  C.WrappedComponent = Component
  C.propTypes = {
    wrappedComponentRef: PropTypes.func
  }

  return hoistStatics(C, Component)
}

export default withRouter

仔细体会render props的用处和例子,可参考:1 2

hooks

HOOK是真正意义上的复用逻辑的武器。render props是把嵌套的HOC改成了一种平级传render函数的props的方法,但是当状态多个复用的时候,就也会变成不断嵌套的难看的结构。这里引用一下蚂蚁的一篇文章的例子:

<WindowSize>
  (size)=> (
        <Mouse>
        (position)=> <OurComponent size={size} mouse={position}/>
    </Mouse>
    )
</WindowSize> 

又想监听size又想监听position,甚至还有scroll状态的时候。。。

使用react的hook模式,比如react-use库,我们只用一行代码就解决了:

const mousePosition = useMouse(ref);

且对typescript支持更好,我们可以在use函数中做类型校注。

参考: react-use可看相关源码参考实现,秒啊 蚂蚁金服的文章 官方react自定义hook介绍

总的来说,hook目前还算完美干净的结局了逻辑重用的问题,把react组件化思想又深进了一步,且把页面与逻辑拆开也有利于代码的长期维护啦。

2.xxx 待更新喽 一大堆没时间写

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Nginx + lua +[memcached,redis]
精品案例1、Nginxluamemcached,redis实现网站灰度发布2、分库分表/基于Leaf组件实现的全球唯一ID(非UUID)3、Redis独立数据监控,实现订单超时操作/MQ死信操作SelectPollEpollReactor模型4、分布式任务调试Quartz应用
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Stella981 Stella981
3年前
React 组件逻辑复用的那些事儿
点上方蓝字关注公众号「前端从进阶到入院」,精选原创好文助你进入大厂。基本每个开发者都需要考虑逻辑复用的问题,否则你的项目中将充斥着大量的重复代码。那么React是怎么复用组件逻辑的呢?本文将一一介绍React复用组件逻辑的几种方法,希望你读完之后能够有所收获。如果你对这些内容已经非常清楚,那么略过本文即可。我已尽量对文中的
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
提升前端开发效率的五种实用技术
组件化开发是一种将页面拆分成独立的可重用组件的开发方式。通过组件化开发,我们能够将复杂的界面逻辑拆分成独立的模块,提高代码的复用性和维护性。常用的组件化框架如React、Vue和Angular,它们提供了强大的组件化开发能力,使我们能够轻松构建复杂的用户界面,并提供了组件的生命周期管理和状态管理机制。