函数式编程看React Hooks(一)简单React Hooks实现

简介: 函数式编程(英语:functional programming)或称函数程序设计、泛函编程,是一种编程范式,它将计算机运算视为函数运算,并且避免使用程序状态以及易变对象。其中,λ演算(lambda calculus)为该语言最重要的基础。而且,λ演算的函数可以接受函数当作输入(引数)和输出(传出值)。

函数式编程看React Hooks(一)简单React Hooks实现


函数式编程看React Hooks(二)事件绑定副作用深度剖析


前言



函数式编程介绍(摘自基维百科)


函数式编程(英语:functional programming)或称函数程序设计、泛函编程,是一种编程范式,它将计算机运算视为函数运算,并且避免使用程序状态以及易变对象。其中,λ演算(lambda calculus)为该语言最重要的基础。而且,λ演算的函数可以接受函数当作输入(引数)和输出(传出值)。


面向对象编程介绍(摘自基维百科)


面向对象程序设计(英语:Object-oriented programming,缩写:OOP)是种具有对象概念的程序编程典范,同时也是一种程序开发的抽象方针。它可能包含数据、属性、代码与方法。对象则指的是类的实例。它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的重用性、灵活性和扩展性,对象里的程序可以访问及经常修改对象相关连的数据。在面向对象程序编程里,计算机程序会被设计成彼此相关的对象


函数式强调在逻辑处理中不变性。面向对象通过消息传递改变每个Object的内部状态。两者是截然不同的编程思想,都具有自己的优势,也因为如此,才使得我们从 class组件 转化到 函数组件式,有一些费解。


从 react 的变化可以看出,react 走的道路越来越接近于函数式编程,输入输出一致性。当然也不是凭空地去往这个方面,而是为了能够解决更多的问题。以下 三点是 react 官网所提到的 hooks 的动机 https://zh-hans.reactjs.org/docs/hooks-intro.html#motivation


  • 代码重用:在hooks出来之前,常见的代码重用方式是 HOC 和render props,这两种方式带来的问题是:你需要解构自己的组件,同时会带来很深的组件嵌套
  • 复杂的组件逻辑:在class组件中,有许多的lifecycle 函数,你需要在各个函数的里面去做对应的事情。这种方式带来的痛点是:逻辑分散在各处,开发者去维护这些代码会分散自己的精力,理解代码逻辑也很吃力
  • class组件的困惑:对于初学者来说,需要理解class组件里面的this是比较吃力的,同时,基于class的组件难以优化。


本文是为了给后面一篇文章作为铺垫,因为在之后文章的讲解过程中,你如果了理解了 React Hooks 的原理,再加上一步一步地讲解,你可能会对 React Hooks 中各种情况会恍然大悟。


一开始的时候觉得 hooks 非常地神秘,写惯了 class 式的组件后,我们的思维就会定格在那里,生命周期,state,this等的使用。因此会以 class 编写的模式去写函数式组件,导致我们一次又一次地爬坑,接下来我们就开始我们的实现方式讲解。(提示:以下是都只是一种简单的模拟方法,与实际有一些差别,但是核心思想是一致的)


开始



我们先写一个简单的 react 函数式组件。


image.png


在 React Hooks 还未出现的时候,我们的组件大多用来直接渲染,不含有状态存储,Function组件没有state,所以也叫SFC(stateless functional component),现在更新叫做FC(functional component)。


为了使得一个函数内有状态,react 使用了一个特别的方法就是 hooks, 其实这是利用闭包实现的一个类似作用域的东西去存储状态,我第一想到的就是利用对象引用存储数据,就像是面向对象一样的方式,存在一个对象中中,通过引用的方式来进行获取。但是 react 为了能够尽可能地分离状态,精妙地采用了闭包。


让我们看看他是如何实现的。(为了尽可能简化,我进行了改编)


useState


image.png

image.png


演示地址:https://codesandbox.io/s/dawn-bash-rqqoh


以上,不管 Counter 重新渲染多少次,通过闭包,依然能够访问到最新的 state,从而达到了存储状态的效果。


useEffect


再看看 useEffect, 先来看看使用方法。useEffect(callback,dep?), 以下是一个非常简单的使用例子。


image.png

image.png


因为函数式不像 class 那样有复杂的生命周期,已经对 hooks 已经熟悉使用的你,可能会知道 useEffect 可以当做, componentdidmount 来使用。但是在这里你直接将他按照顺序执行。在 return 前他会执行。


image.png


演示地址:https://codesandbox.io/s/ecstatic-glitter-w9kq7


至此,我们也实现了单个 useEffect。


useMemo


我们再来看看, useMemo,其实他也以上实现的方式一样,也是通过闭包来进行存储数据, 从而达到缓存提高性能的作用。


image.png


接下来我们来进行实现


image.png


演示地址:https://codesandbox.io/s/festive-platform-v04xw


useCallback


那么 useCallback 呢?其实就是 useMemo 的一个包装,毕竟你缓存函数的返回值,那么我我让返回值为一个函数不就行了?


image.png


可以看到,以上我们也轻松地实现了 useMemo 。但是有一个问题,以上只是单个函数使用方式,所以接下来我们还需要处理一下多个函数的情况。


完整版


我们可以按照 preact 的方法来实现。即用数组来实现多个函数的处理逻辑。


核心逻辑就是


  • 第一次声明的时候将 useState, useEffect, useMemo, useCallback 等钩子函数的状态依次存入数组。
  • 更新的时候,将前一次的函数状态值依次取出。


也可以通过以下图来理解


第一次渲染,将每个状态都缓存到数组中。


image.png


每次重新渲染,获取数组中每个的缓存状态。


image.png


以下为了能够清晰地让大家明白原理,进行了一些删减。但是核心逻辑不变。


image.png

image.png


现在用以上 43 行代码实现了一个简易的 React Hooks。


完整渲染过程



我们再通过一次整体的流程图来讲解完整版的实现。


https://codesandbox.io/s/loving-blackburn-o7g8g


image.png


初始化


image.png


第一次渲染


将所有的状态都存进闭包中。


image.png


事件触发


改变了第二个状态的value值。


image.png


第二次渲染


将所有状态依次取出,进行渲染。


image.png


后记



通过以上的实现,我们也可以明白一些 React Hooks 中看似有点奇怪的规定了。例如为什么不要在循环、条件判断或者子函数中调用?因为顺序很重要,我们将缓存(状态)按一定地顺序压入数组,所以取出上一次状态,也必须以同样的顺序去获取。否则的话,会导致获取不一致的情况。。。当然我们可以试想一下,如果每个状态单元,可以有唯一的名字,那么将不会受到这些规定的约束。但是这样会使得开发带来额外的传入参数,就是唯一的名字。也会带来名字冲突等问题,因此采用这样的方式来约定,一定程度上简化了开发者的开发成本,并且也能够消除不一致性。(ps: 如果有人有兴趣,可以实现一版不依赖于顺序,只依赖于名字的,当做小玩具~)


当然真实中的 react 是利用了单链表来代替数组的。略微有些不一样,但是本质的思路是一致的,以及 useEffect 是每次渲染完成后运行的。


以上都是站在巨人的肩膀上(有很多优秀的文章,看参考),再加上查看一些源码得出的整个过程。最后,留出一个小问题给大家,那么每次 useEffectreturn函数 的逻辑又是怎么样的呢?欢迎评论区说出实现方式~ 如果文章有任何问题,也欢迎在评论区指出~


参考



https://github.com/brickspert/blog/issues/26


https://segmentfault.com/a/1190000019824818


https://www.zhihu.com/question/306916142


https://zh-hans.reactjs.org/docs/hooks-faq.html#can-i-skip-an-effect-on-updates


https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e


https://github.com/preactjs/


https://zh-hans.reactjs.org/docs/hooks-intro.html#motivation



相关文章
|
3天前
|
前端开发 测试技术 开发工具
探索前端框架React Hooks的优势与应用
本文将深入探讨前端框架React Hooks的优势与应用。通过分析React Hooks的特性以及实际应用案例,帮助读者更好地理解和运用这一现代化的前端开发工具。
|
3天前
|
前端开发 JavaScript
react常用的hooks有哪些?
react常用的hooks有哪些?
16 0
|
1天前
|
前端开发
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
|
2天前
|
前端开发 JavaScript
React Hooks:让你轻松掌握函数组件的状态与管理
React Hooks:让你轻松掌握函数组件的状态与管理
|
3天前
|
缓存 前端开发
Web开发:深入探讨React Hooks的使用和最佳实践
Web开发:深入探讨React Hooks的使用和最佳实践
10 0
|
3天前
|
存储 前端开发 JavaScript
React Hooks实战:从useState到useContext深度解析
React Hooks 深度解析:useState用于函数组件的状态管理,通过初始化和更新状态实现渲染控制;useContext则提供跨组件数据传递。useState的状态更新是异步的,不支持浅比较,可结合useEffect处理副作用。useContext在多层组件间共享状态,但可能导致不必要的渲染。两者结合可创建复杂应用场景,如带主题切换的计数器。了解其工作原理和优化策略,能有效提升React应用性能。
20 0
|
3天前
|
前端开发 API 开发者
React Hooks API:自定义Hooks的创建与使用
【4月更文挑战第25天】本文介绍了React自定义Hooks的创建与使用。自定义Hooks是提升React开发效率的关键工具。
|
3天前
|
前端开发
探索React Hooks:一种全新的组件逻辑管理方式
React Hooks是React 16.8版本引入的一项新功能,它改变了我们编写React组件的方式。本文将从Hooks的起源讲起,逐步分析Hooks的优势,并通过具体示例展示Hooks在组件逻辑管理中的应用,旨在帮助读者更好地理解和运用React Hooks。
|
3天前
|
前端开发 JavaScript
使用React Hooks实现简单的计数器应用
使用React Hooks实现简单的计数器应用
|
3天前
|
前端开发 JavaScript
【边做边学】React Hooks (二)——useEffect Hook
【边做边学】React Hooks (二)——useEffect Hook

热门文章

最新文章