IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> ZF_react hooks useEffect的实现 useRef useImperativeHandle的实现,react整体功能实现完毕 -> 正文阅读

[JavaScript知识库]ZF_react hooks useEffect的实现 useRef useImperativeHandle的实现,react整体功能实现完毕

useEffect的实现

  • (纯函数:不能修改参数,不能修改函数作用域外的变量),除此之外都是副作用
  • 在函数组件主体内(React渲染阶段)改变DOM,添加订阅,设置定时器,记录日志以及其他包含副作用的操作都是不被允许的,因为这会产生莫名其妙的bug并破坏UI的一致性。
  • 使用useEffect完成副作用操作,useEffect会在当前组件渲染到dom之后执行。可以把effect看作从React的纯函数式世界通往命令式世界的逃生通道。

    在这里插入图片描述
    本质想让他一秒加一次1,但是结果却都是1,为什么?
    因为react渲染每次都会产生新的闭包。或者说每次函数执行的时候产生的上下文互不影响。
    看这个例子:
    在这里插入图片描述
function FunCom() {
  let number = 0;
  function useEffect() {
    number++;
    return number;
  }
  return useEffect;
}

const useEffect = FunCom();
useEffect(); // number = 1
FunCom(); //
FunCom(); //
useEffect(); // number = 2

假设这个FunCom就是一个组件,他第一次执行的时候返回一个useEffect。此时useEffect执行一遍。number++变为1。然后这个组件再执行的时候,会产生一个新的上下文,该上下文与上一个函数产生的上下文无关,所以他不会影响到上一个useEffect。也就是说useEffect里面拿到的number永远是第一次执行的时候的number,而不管FunCom再执行多少次,都不会影响到。
在这里插入图片描述

  • 把他类比成我们的useEffect,因为我们的useEffect没有加依赖项,导致下一次组件渲染的时候,该UseEffect已经跟新的变量失去了联系,他拿到的Number永远都是第一次组件执行的时候产生的Number,永远是1。所以为什么说组件更新都会产生一个新的闭包,或者是一个新的执行上下文,他们互不影响!!!
  • 在这里插入图片描述
    而当我们有依赖项的时候,useEffect会在依赖项改变的时候执行,返回的销毁函数一般用来清除副作用,如上图就是用来关闭定时器。返回的销毁函数会在useEffect下一次执行之前执行。
  • 根据这些特性,我们可以简单实现一下
    在这里插入图片描述
    跟其他hooks一样的道理,将可能返回的销毁函数以及依赖项存储起来,然后每次进来执行都判断是否改变。改变就执行销毁函数以及重新执行函数,使用setTimeout模拟,开启宏任务,防止阻塞渲染。
    看一下效果:
    在这里插入图片描述
    在这里插入图片描述

可以正常执行。并且每次拿到的number都是最新的。
这样useEffect也就实现了,思路跟其他hooks的实现差不多,也是每次渲染的时候比对依赖项,改变了才进行更改。

useRef的实现

其实很简答,就是存储起来,并且返回一个对象,属性值为current。
在这里插入图片描述
在这里插入图片描述
渲染到该属性的时候,创建div的时候会判断当前div上有ref,就给我们的refBox赋值。

  • 为什么useRef还可以用来贯穿组件的生命周期呢?就是用它来存储值得时候,组件重新渲染值还是不变,但也不会引起更新。
  • 从实现思路我们可以看出来,第一次执行创建的对象被存在了hookState这个全局变量上,所有不管组件怎么执行,全局变量的值都不会改变,所以说useRef就跟一个全局变量一样,可以贯穿整个react生命周期。
    React.creactRef每次返回的都是一个新对象(没存储在外部变量),React.useRef返回的是同一个对象(存储在了外部变量)。

useLayoutEffect的实现

  • 参数与useEffect相同,但是其调用时间会在所有dom变更之后同步调用effect。
  • useEffect不会阻塞浏览器渲染,而useLayoutEffect会阻塞浏览器渲染。
  • useEffect会在浏览器渲染结束后执行,useLayoutEffect则是在Dom更新完毕后,浏览器绘制之前是执行。
  • useEffect在源码中是需要调度实现的。
    在这里插入图片描述
    useEffect在红任务队列里面执行,而useLayoutEffect在微任务队列里面执行,就是这个区别。
    在这里插入图片描述
    实现还是一摸一样的,只不过使用queueMicrotask代替了setTimeout,实现微任务。
    在这里插入图片描述
    使用useEffect的时候,可以明显看出效果:
    请添加图片描述

而使用useLayoutEffect的时候
请添加图片描述
没有动画效果,这也是两者的区别。一个是微任务,在浏览器绘制之前执行。一个是宏仁无,在浏览器渲染完毕后执行。

实现forwardRef和useImperativeHandle

forwardRef将ref从父组件转发到自组建的dom元素上,子组件接受props和ref作为参数。useImeperativeHandle可以在使用ref的时候自定义暴露给父组件的实例值。
在这里插入图片描述
实现点击获取焦点
在这里插入图片描述
正确。
forwardRef之前已经实现过了,
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
但是这种ref,我们还可以对Input进行删除操作,子组件完全无法限制。
在这里插入图片描述
所以useImperativeHandle应运而生
在这里插入图片描述
用来控制父组件能操作的方法。第二个参数就是返回的对象。
实现也是很简单,直接调用第二个参数,将其返回的对象作为ref.current的值就行
在这里插入图片描述
看效果:
在这里插入图片描述
在这里插入图片描述
完成。

总结

自此,react整个功能差不多都实现了,从类组件,到状态的处理(全局变量控制批量更新),从事件处理绑定到document,从各种组件,函数组件,类组件,provider组件,consumer组件,forwardRef组件,memo组件等。
而且所有的hooks差不多完成了,其实现的思路是借助外部(hookState和索引(链表))的变量存储状态,react是存储在fiber上的。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-28 12:18:13  更:2021-10-28 12:18:48 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/28 18:04:31-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码