关于为什么使用React新特性Hook的一些实践与浅见

更新日期: 2019-12-27阅读: 2.1k标签: Hook

关于Hook的定义官方文档是这么说的:

Hook 是 react 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

简单来说,就是在使用函数式组件时能用上state,还有一些生命周期函数等其他的特性。

如果想了解Hook怎么用,官方文档和阮一峰的React Hooks 入门教程都讲得很清楚了,我建议直接看官方文档和阮大神的文章即可。

本篇博客只讲为什么要用React的Hook新特性,以及它解决了什么问题。


为什么使用Hook?

让我们先看看别人怎么说。

阮大神的文章中给了一个示例代码

import React, { Component } from "react";

export default class Button extends Component {
  constructor() {
    super();
    this.state = { buttonText: "Click me, please" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(() => {
      return { buttonText: "Thanks, been clicked!" };
    });
  }
  render() {
    const { buttonText } = this.state;
    return <button onClick={this.handleClick}>{buttonText}</button>;
  }
}

并且提出:

这个组件类仅仅是一个按钮,但可以看到,它的代码已经很"重"了。
真实的 React App 由多个类按照层级,一层层构成,复杂度成倍增长。
再加入 Redux,就变得更复杂。

实际上,上面这个代码的“重”有部分来源于写法问题,他可能并没有“重”,让我们看看下面这种class写法:

import React, { Component } from "react";

export default class Button extends Component {
  state = {
    buttonText: "Click me, please"
  }
  handleClick = () => {
    this.setState(() => {
      return { buttonText: "Thanks, been clicked!" };
    });
  }
  render() {
    const { buttonText } = this.state;
    return <button onClick={this.handleClick}>{buttonText}</button>;
  }
}

然后再对比下使用了Hook的函数式组件:

import React, { useState } from "react";

export default function Button() {
  const [buttonText, setButtonText] = useState("Click me,   please");

  function handleClick() {
    return setButtonText("Thanks, been clicked!");
  }

  return <button onClick={handleClick}>{buttonText}</button>;
}

即使是我们简化过的class写法,比起Hook的看起来好像也确实“重”了点。

Hook的语法确实简练了一些,但是这个理由并不是那么充分。

阮大神同时列举了Redux 的作者 Dan Abramov 总结了组件类的几个缺点:

大型组件很难拆分和重构,也很难测试。

业务逻辑分散在组件的各个方法之中,导致重复逻辑或关联逻辑。(这里我认为阮大神写的可能有点问题,应该是是各个生命周期方法更为准确)

组件类引入了复杂的编程模式,比如 render props 和高阶组件。

这三点都是事实,于是有了函数化的组件,但之前的函数化组件没有state和生命周期,有了Hook那么就可以解决这个痛点。

而且Hook并不只是这么简单,通过自定义Hook,我们可以将原有组件的逻辑提取出来实现复用。


用useEffect解决生命周期导致的重复逻辑或关联逻辑

上面举的几个缺点,第一点和第三点你可能很容易理解,第二点就不容易理解了,所以我们需要深入到具体的代码中去理解这句话。

我们看看下面这段代码:

import React, { Component } from "react";

export default class Match extends Component {
  state={
    matchInfo:''
  }
  componentDidMount() {
    this.getMatchInfo(this.props.matchId)
  }
  componentDidUpdate(prevProps) {
    if (prevProps.matchId !== this.props.matchId) {
      this.getMatchInfo(this.props.matchId)
    }
  }
  getMatchInfo = (matchId) => {
    // 请求后台接口获取赛事信息
    // ...
    this.setState({
      matchInfo:serverResult // serverResult是后台接口的返回值
    })
  }

  render() {
    const { matchInfo } = this.state
    return <div>{matchInfo}</div>;
  }
}

这样的代码在我们的业务中经常会出现,通过修改传入赛事组件的ID,去改变这个赛事组件的信息。

在上面的代码中,受生命周期影响,我们需要在加载完毕和Id更新时都写上重复的逻辑和关联逻辑。

所以现在你应该比较好理解这句话:业务逻辑分散在组件的各个生命周期方法之中,导致重复逻辑或关联逻辑

为了解决这一点,React提供了useEffect这个钩子。

但是在讲这个之前,我们需要先了解到React带来的一个新的思想:同步。

我们在上面的代码中所做的实际上就是在把组件内的状态和组件外的状态进行同步。

所以在使用Hook之前,我们需要先摒弃生命周期的思想,而用同步的思想去思考这个问题。

现在再让我们看看改造后的代码:

import React, { Component } from "react";

export default function Match({matchId}) {
  const [ matchInfo, setMatchInfo ] = React.useState('')
  React.useEffect(() => {
    // 请求后台接口获取赛事信息
    // ...
    setMatchInfo(serverResult) // serverResult是后台接口的返回值
  }, [matchId])
  
  return <div>{matchInfo}</div>;
}

看到这个代码,再对比上面的代码,你心中第一反应应该就是:简单。

React.useEffect接受两个参数,第一个参数是Effect函数,第二个参数是一个数组。

组件加载的时候,执行Effect函数。

组件更新会去判断数组中的各个值是否变动,如果不变,那么不会执行Effect函数。

而如果不传第二个参数,那么无论加载还是更新,都会执行Effect函数。

顺便提一句,这里有组件加载和更新的生命周期的概念了,那么也应该是有组件卸载的概念的:

import React, { Component } from "react";

export default function Match({matchId}) {
  const [ matchInfo, setMatchInfo ] = React.useState('')
  React.useEffect(() => {
    // 请求后台接口获取赛事信息
    // ...
    setMatchInfo(serverResult) // serverResult是后台接口的返回值

    return ()=>{
      // 组件卸载后的执行代码
    }
  }, [matchId])
  
  return <div>{matchInfo}</div>;
}
}

这个常用于事件绑定解绑之类的。


用自定义Hook解决高阶组件

React的高阶组件是用来提炼重复逻辑的组件工厂,简单一点来说就是个函数,输入参数为组件A,输出的是带有某逻辑的组件A+。

回想一下上面的Match组件,假如这个组件是页面A的首页头部用来展示赛事信息,然后现在页面B的侧边栏也需要展示赛事信息。

问题就在于页面A的这块UI需要用div,而页面B侧边栏的这块UI需要用到span。

保证今天早点下班的做法是复制A页面的代码到页面B,然后改下render的UI即可。

保证以后早点下班的做法是使用高阶组件,请看下面的代码:

import React from "react";

function hocMatch(Component) {
  return class Match React.Component {
    componentDidMount() {
      this.getMatchInfo(this.props.matchId)
    }
    componentDidUpdate(prevProps) {
      if (prevProps.matchId !== this.props.matchId) {
        this.getMatchInfo(this.props.matchId)
      }
    }
    getMatchInfo = (matchId) => {
      // 请求后台接口获取赛事信息
    }
    render () {
      return (
        <Component {...this.props} />
      )
    }
  }
}

const MatchDiv=hocMatch(DivUIComponent)
const MatchSpan=hocMatch(SpanUIComponent)

<MatchDiv matchId={1} matchInfo={matchInfo} />
<MatchSpan matchId={1} matchInfo={matchInfo} />

但是实际上有的时候我们的高阶组件可能会更复杂,比如react-redux的connect,这就是高阶组件的复杂化使用方式。

又比如:

hocPage(
  hocMatch(
    hocDiv(DivComponent)
  )
)

毫无疑问高阶组件能让我们复用很多逻辑,但是过于复杂的高阶组件会让之后的维护者望而却步。

而Hook的玩法是使用自定义Hook去提炼这些逻辑,首先看看我们之前使用了Hook的函数式组件:

import React, { Component } from "react";

export default function Match({matchId}) {
  const [ matchInfo, setMatchInfo ] = React.useState('')
  React.useEffect(() => {
    // 请求后台接口获取赛事信息
    // ...
    setMatchInfo(serverResult) // serverResult是后台接口的返回值
  }, [matchId])
  
  return <div>{matchInfo}</div>;
}

然后,自定义Hook:

function useMatch(matchId){
  const [ matchInfo, setMatchInfo ] = React.useState('')
  React.useEffect(() => {
    // 请求后台接口获取赛事信息
    // ...
    setMatchInfo(serverResult) // serverResult是后台接口的返回值
  }, [matchId])
  return [matchInfo]
}

接下来,修改原来的Match组件

export default function Match({matchId}) {
  const [matchInfo]=useMatch(matchId)
  return <div>{matchInfo}</div>;
}

相比高阶组件,自定义Hook更加简单,也更加容易理解。

现在我们再来处理以下这种情况:

hocPage(
  hocMatch(
    hocDiv(DivComponent)
  )
)

我们的代码将不会出现这种不断嵌套情况,而是会变成下面这种:

export default function PageA({matchId}) {
  const [pageInfo]=usePage(pageId)
  const [matchInfo]=useMatch(matchId)
  const [divInfo]=useDiv(divId)

  return <ul>
    <li>{pageInfo}</li>
    <li>{matchInfo}</li>
    <li>{divInfo}</li>
  </ul>
}

是否需要改造旧的class组件?

现在我们了解到了Hook的好,所以就需要去改造旧的class组件。

官方推荐不需要专门为了hook去改造class组件,并且保证将继续更新class相关功能。

实际上我们也没有必要专门去改造旧项目中的class组件,因为工作量并不小。

但是我们完全可以在新的项目或者新的组件中去使用它。


总结

Hook是对函数式组件的一次增强,使得函数式组件可以做到class组件的state和生命周期。

Hook的语法更加简练易懂,消除了class的生命周期方法导致的重复逻辑代码,解决了高阶组件难以理解和使用困难的问题。

然而Hook并没有让函数式组件能做到class组件做不到的事情,它只是让很多事情变得更加简单而已。

class组件并不会消失,但hook化的函数式组件将是趋势。

作者:韩子卢 
出处:https://www.cnblogs.com/vvjiang/ 


链接: https://www.fly63.com/article/detial/7072

分享 10 个可以使用 Vue.js 制作的有用的自定义钩hook

Vue.js 是我使用的第一个 JavaScript 框架。 我可以说 Vue.js 是我进入 JavaScript 世界的第一扇门之一。 目前,Vue.js 仍然是一个很棒的框架。 我认为有了组合 API,Vue.js 只会增长得更多

pytest插件探索——hook开发

conftest.py可以作为最简单的本地plugin调用一些hook函数,以此来做些强化功能。pytest整个框架通过调用如下定义良好的hooks来实现配置,收集,执行和报告这些过程:

React中useState Hook 示例

到 React 16.8 目前为止,如果编写函数组件,然后遇到需要添加状态的情况,咱们就必须将组件转换为类组件。编写 class Thing extends React.Component,将函数体复制到render()方法中,修复缩进,最后添加需要的状态。

useContext Hook 是如何工作的?

所有这些新的React Hook之间都有一个宗旨:就是为了使函数组件像类组件一样强大。useContext hook 与其它几个有点不一样,但它在特定场景下还是很有用的。React 的 Context API 是一种在应用程序中深入传递数据的方法

结合React的Effect Hook分析组件副作用的清除

我们在DidMount的时候通过ID订阅了好友的在线状态,并且为了防止内存泄漏,我们需要在WillUnmount清除订阅,但是当组件已经显示在屏幕上时,friend prop 发生变化时会发生什么?

结合高阶函数聊聊useMemo和useCallback

useCallback和useMemo是其中的两个 hooks,本文旨在通过解决一个需求,结合高阶函数,深入理解useCallback和useMemo的用法和使用场景。 之所以会把这两个 hooks 放到一起说,是因为他们的主要作用都是性能优化

React封装强业务hook的一个例子

最近因为使用列表展示的需求有点多,就想着把列表分页筛选的逻辑抽象一下。看了umi的一个useTable的hook,也不能满足业务需要,于是就自己写了一个,支持本地分页筛选和接口分页筛选。

React官方团队出手,补齐原生Hook短板

然而实际上,由于回调函数被useCallback缓存,形成闭包,所以点击的效果始终是sendMessage()。这就是「闭包陷阱」。以上代码的一种解决方式是「为useCallback增加依赖项」

实现一个自定义 React Hook:UseLocalStorageState

最近做需求,需要将数据保存到 localStorage 里,在组件初始化的时候获取,然后修改该值的时候,要保存到本地的 localStorage 中。很显然,这些逻辑完全可以封装为一个 React Hook

为什么Hook没有ErrorBoundary?

在很多全面使用Hooks开发的团队,唯一使用ClassComponent的场景就是使用ClassComponent创建ErrorBoundary。可以说,如果Hooks存在如下两个生命周期函数的替代品,就能全面抛弃ClassComponent了:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!