React ref 从原理到应用

时间:2021-08-25 02:14:08

React ref 从原理到应用

提到 ref或者 refs 如果你用过React 16以前的版本 第一印象都是用来访问DOM或者修改组件实例的,

正如官网所介绍的这样:

React ref 从原理到应用

然后到了React 16.3出现的 createRef 以及16.8 hooks中的 useRef出现时,发现这里的ref好像不仅仅只有之前的绑定到DOM/组件实例的 作用?本文将带你逐一梳理这些知识点,并尝试分析相关源码。

前置知识

 

这部分知识点不是本文重点,每个点展开都非常庞大,了方便本文理解先在这里简单提及。

Fiber架构

 

Fiber是React更新时的最小单元,是一种包含指针的数据结构,从数据结构上看Fiber架构 ≈ 树 + 链表。

Fiber单元是从 jsx createElement之后根据ReactElement生成的,相比 ReactElement,Fiber单元具备动态工作能力。

React 的工作流程

 

使用chrome perfomance录制一个react应用渲染看函数调用栈会看到下面这张图

React ref 从原理到应用

这三块内容分别代表: 1.生成react root节点 2.reconciler 协调生成需要更新的子节点 3.将节点更新commit 到视图

Hooks基础知识

 

在函数组件中每执行一次use开头的hook函数都会生成一个hook对象。

  1. type Hook = { 
  2.   memoizedState: any,   // 上次更新之后的最终状态值 
  3.   queue: UpdateQueue, //更新队列 
  4.   next, // 下一个 hook 对象 
  5. }; 

其中memoizedState会保存该hook上次更新之后的最终状态,比如当我们使用一次useState之后就会在memoizedState中保存初始值。

React 中大部分 hook 分为两个阶段:第一次初始化时`mount`阶段和更新`update`时阶段

hooks函数的执行分两个阶段 mount和 update,比如 useState只会在初始化时执行一次,下文中将提到的

useImperativeHandle 和 useRef也包括在内。

调试源码

 

本文已梳理摘取了源码相关的函数,但你如果配合源码调试一起食用效果会更加。

本文基于React v17.0.2。

拉取React代码并安装依赖

将react,scheduler以及react-dom打包为commonjs

yarn build react/index,react-dom/index,scheduler --type NODE

3.进入build/node_modules/react/cjs 执行yarn link 同理 react-dom

4.在 build/node_modules/react/cjs/react.development.js中加入link标记console以确保检查link状态

5.使用create-react-app创建一个测试应用 并link react,react-dom

ref prop

 

组件上的ref属性是一个保留属性,你不能把ref当成一个普通的prop属性在一个组件中获取,比如:

  1. const Parent = () => { 
  2.     return <Child ref={{test:1}}> 
  3. const Child = (props) => { 
  4.   console.log(props); 
  5.   // 这里获取不到ref属性 
  6.     return <div></div> 

这个ref去哪里了呢, React本身又对它做了什么呢?

我们知道React的解析是从createElement开始的,找到了下面创建ReactElement的地方,确实有对ref保留属性的处理。

  1. export function createElement(type, config, children) { 
  2. let propName; 
  3.   // Reserved names are extracted 
  4.   const props = {}; 
  5.   let ref = null
  6.   if (config != null) { 
  7.     if (hasValidRef(config)) { 
  8.       ref = config.ref; 
  9.     } 
  10.     for (propName in config) { 
  11.       if ( 
  12.         hasOwnProperty.call(config, propName) && 
  13.         !RESERVED_PROPS.hasOwnProperty(propName) 
  14.       ) { 
  15.         props[propName] = config[propName]; 
  16.       } 
  17.     } 
  18.   } 
  19.   return ReactElement( 
  20.     type, 
  21.     key
  22.     ref, 
  23.     props, 
  24.     ... 
  25.   ); 

从createElement开始就已经创建了对ref属性的引用。

createElement之后我们需要构建Fiber工作树,接下来主要讲对ref相关的处理。

React对于不同的组件有不通的处理

先主要关注 FunctionComponent/ClassComponent/HostComponent(原生html标签)

FunctionComponent

  1. function updateFunctionComponent(current, workInProgress, Component, nextProps, renderLanes) { 
  2.       try { 
  3.         nextChildren = renderWithHooks(current, workInProgress, Component, nextProps, context, renderLanes); 
  4.       } finally { 
  5.         reenableLogs(); 
  6.       } 
  7.       reconcileChildren(current, workInProgress, nextChildren, renderLanes); 
  8.       return workInProgress.child; 
  9. functin renderWithHooks(current, workInProgress, Component, props, secondArg, nextRenderLanes){ 
  10.             children = Component(props, secondArg); // 这里的Component就是指我们的函数组件 
  11.                 return children; 

我们可以看到函数组件在渲染的时候就是直接执行。

Class组件和原生标签的ref prop

 

ClassComponent

  1. function updateClassComponent(current, workInProgress, Component, nextProps, renderLanes) { 
  2.   ... 
  3.   { 
  4.     ... 
  5.     constructClassInstance(workInProgress, Component, nextProps); 
  6.         .... 
  7.   } 
  8.   var nextUnitOfWork = finishClassComponent(current, workInProgress, Component, shouldUpdate, hasContext, renderLanes); 
  9.     ... 
  10.   return nextUnitOfWork; 
  11. function constructClassInstance(workInProgress, ctor, props) { 
  12.     .... 
  13.   var instance = new ctor(props, context); 
  14.   // 把instance实例挂载到workInProgress stateNode属性上 
  15.   adoptClassInstance(workInProgress, instance); 
  16.     ..... 
  17.   return instance; 
  18. function finishClassComponent(current, workInProgress, Component, shouldUpdate, hasContext, renderLanes) { 
  19.   // 标记是否有ref更新 
  20.   markRef(current, workInProgress); 
  21. function markRef(current, workInProgress) { 
  22.   var ref = workInProgress.ref; 
  23.   if (current === null && ref !== null || current !== null && current.ref !== ref) { 
  24.     // Schedule a Ref effect 
  25.     workInProgress.flags |= Ref; 
  26.   } 

ClassComponent则是通过构造函数生成实例并标记了ref属性。

回顾一下之前提到的React工作流程,既然是要将组件实例或者真实DOM赋值给ref那肯定不能在一开始就处理这个ref,而是根据标记到commit阶段再给ref赋值。

  1. function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork, committedLanes) { 
  2.     .... 
  3.   { 
  4.     if (finishedWork.flags & Ref) { 
  5.       commitAttachRef(finishedWork); 
  6.     } 
  7.   } 
  8.   .... 
  9. function commitAttachRef(finishedWork) { 
  10.   var ref = finishedWork.ref; 
  11.   if (ref !== null) { 
  12.     var instance = finishedWork.stateNode; 
  13.     var instanceToUse; 
  14.     switch (finishedWork.tag) { 
  15.       case HostComponent: 
  16.         // getPublicInstance 这里调用了DOM API 返回了DOM对象 
  17.         instanceToUse = getPublicInstance(instance); 
  18.         break; 
  19.       default
  20.         instanceToUse = instance; 
  21.     }  
  22.     // 对函数回调形式设置ref的处理 
  23.     if (typeof ref === 'function') { 
  24.       { 
  25.         ref(instanceToUse); 
  26.       } 
  27.     } else { 
  28.       ref.current = instanceToUse; 
  29.     } 
  30.   } 

在commit阶段,如果是原生标签则将真实DOM赋值给ref对象的current属性, 如果是class componnet 则是组件instance。

函数组件的ref prop

 

如果你对function组件未做处理直接加上ref,react会直接忽略并在开发环境给出警告

React ref 从原理到应用

函数组件没有实例可以赋值给ref对象,而且组件上的ref prop会被当作保留属性无法在组件中获取,那该怎么办呢?

forwardRef

 

React提供了一个forwardRef函数 来处理函数组件的 ref prop,用起来就像下面这个示例:

  1. const Parent = () => { 
  2.     const childRef = useRef(null
  3.   return <Child ref={childRef}/> 
  4. const Child = forWardRef((props,ref) => { 
  5.     return <div>Child</div> 
  6. }} 

这个方法的源码主体也非常简单,返回了一个新的elementType对象,这个对象的render属性包含了原本的这个函数组件,而$$typeof则标记了这个特殊组件类型。

  1. function forwardRef(render) { 
  2.   .... 
  3.   var elementType = { 
  4.     $$typeof: REACT_FORWARD_REF_TYPE, 
  5.     render: render 
  6.   } 
  7.   .... 
  8.   return elementType; 
  9.  } 

那么React对forwardRef这个特殊的组件是怎么处理的呢

  1. function beginWork(current, workInProgress, renderLanes) { 
  2.     ... 
  3.   switch (workInProgress.tag) { 
  4.     case FunctionComponent: 
  5.       { 
  6.        ... 
  7.         return updateFunctionComponent(current, workInProgress, _Component, resolvedProps, renderLanes); 
  8.       } 
  9.     case ClassComponent: 
  10.       { 
  11.                 .... 
  12.         return updateClassComponent(current, workInProgress, _Component2, _resolvedProps, renderLanes); 
  13.       } 
  14.     case HostComponent: 
  15.       return updateHostComponent(current, workInProgress, renderLanes); 
  16.     case ForwardRef: 
  17.       { 
  18.                 .... 
  19.         // 第三个参数type就是forwardRef创建的elementType 
  20.         return updateForwardRef(current, workInProgress, type, _resolvedProps2, renderLanes); 
  21.       } 
  22.    
  23. function updateForwardRef(current, workInProgress, Component, nextProps, renderLanes) { 
  24.     .... 
  25.   var render = Component.render; 
  26.   var ref = workInProgress.ref; // The rest is a fork of updateFunctionComponent 
  27.   var nextChildren; 
  28.   { 
  29.         ... 
  30.     //  将ref引用传入renderWithHooks 
  31.     nextChildren = renderWithHooks(current, workInProgress, render, nextProps, ref, renderLanes); 
  32.     ... 
  33.   } 
  34.   workInProgress.flags |= PerformedWork; 
  35.   reconcileChildren(current, workInProgress, nextChildren, renderLanes); 
  36.   return workInProgress.child; 

可以看到和上面 FunctionComponent的主要区别仅仅是把ref保留属性当成普通属性传入 renderWithHooks方法!

那么又有一个问题出现了,如果只是传了一个ref引用,而没有像Class组件那样可以attach的实例,岂不是没有办法操作子函数组件的行为?

用上面的例子验证一下

  1. const Parent = () => {   
  2.   const childRef = useRef(null
  3.   useEffect(()=>{ 
  4.     console.log(childref) // { current:null } 
  5.   }) 
  6.   return <Child ref={childRef}/> 
  7. const Child = forwardRef((props,ref) => { 
  8.     return <div>Child</div> 
  9. }} 
  10.                           
  11.  const Parent = () => {  
  12.   const childRef = useRef(null
  13.   useEffect(()=>{ 
  14.     console.log(childref) // { current: div } 
  15.   }) 
  16.   return <Child ref={childRef}/> 
  17. const Child = forwardRef((props,ref) => { 
  18.     return <div ref={ref}>Child</div> 
  19. }} 

结合输出可以看出如果单独使用forwardRef仅仅只能转发ref属性。如果ref最终没有绑定到一个ClassCompnent或者原生DOM上那么这个ref将不会改变。

假设一个业务场景,你封装了一个表单组件,想对外暴露一些接口比如说提交的action以及校验等操作,这样应该如何处理呢?

useImperativeHandle

 

react为我们提供了这个hook来帮助函数组件向外部暴露属性

先看下效果

  1. const Parent = () => {   
  2.   const childRef = useRef(null
  3.   useEffect(()=>{ 
  4.     chilRef.current.sayName();// child 
  5.   }) 
  6.   return <Child ref={childRef}/> 
  7. const Child = forwardRef((props,ref) => { 
  8.   useImperativeHandle(ref,()=>({ 
  9.     sayName:()=>{ 
  10.         console.log('child'
  11.     } 
  12.   })) 
  13.     return <div>Child</div> 
  14. }} 

看一下该hook的源码部分(以hook mount阶段为例):

  1. useImperativeHandle: function (ref, create, deps) { 
  2.       currentHookNameInDev = 'useImperativeHandle'
  3.       mountHookTypesDev(); 
  4.       checkDepsAreArrayDev(deps); 
  5.       return mountImperativeHandle(ref, create, deps); 
  6.  } 
  7. function mountImperativeHandle(ref, create, deps) { 
  8.   { 
  9.     if (typeof create !== 'function') { 
  10.       error('Expected useImperativeHandle() second argument to be a function ' + 'that creates a handle. Instead received: %s.'create !== null ? typeof create : 'null'); 
  11.     } 
  12.   } // TODO: If deps are provided, should we skip comparing the ref itself? 
  13.   var effectDeps = deps !== null && deps !== undefined ? deps.concat([ref]) : null
  14.   var fiberFlags = Update
  15.   return mountEffectImpl(fiberFlags, Layout, imperativeHandleEffect.bind(nullcreate, ref), effectDeps); 
  16. function imperativeHandleEffect(create, ref) { 
  17.   if (typeof ref === 'function') { 
  18.     var refCallback = ref; 
  19.     var _inst = create(); 
  20.     refCallback(_inst); 
  21.     return function () { 
  22.       refCallback(null); 
  23.     }; 
  24.   } else if (ref !== null && ref !== undefined) { 
  25.     var refObject = ref; 
  26.     { 
  27.       if (!refObject.hasOwnProperty('current')) { 
  28.         error('Expected useImperativeHandle() first argument to either be a ' + 'ref callback or React.createRef() object. Instead received: %s.''an object with keys {' + Object.keys(refObject).join(', ') + '}'); 
  29.       } 
  30.     } 
  31.         // 这里执行了传给hook的第二个参数 
  32.     var _inst2 = create(); 
  33.     refObject.current = _inst2; 
  34.     return function () { 
  35.       refObject.current = null
  36.     }; 
  37.   } 

其实就是将我们需要暴露的对象及传给useImperativeHandle的第二个函数参数执行结果赋值给了ref的current对象。

同一份引用

 

到此为止我们大致梳理了组件上ref prop 的工作流程,以及如何在函数组件中使用ref prop,貌似比想象中简单。

上面的过程我们注意到从createElement再到构建WorkInProgess Fiber树到最后commit的过程,ref似乎是一直在被传递。

中间过程的代码过于庞大复杂,但是我们可以通过一个简单的测试来验证一下。

  1. const isEqualRefDemo = () => { 
  2.     const isEqualRef = useRef(1) 
  3.   return <input key="test" ref={isEqualRef}> 

对于 class component 和 原生标签来说 就是 createElement 到 commitAttachRef之前:

React ref 从原理到应用

React ref 从原理到应用

在createElement里将ref挂载给window对象,然后在commitAttachRef里判断一下这两次的ref是否全等。

React ref 从原理到应用

对于函数组件来说就是 createElement 到 hook执行 imperativeHandleEffect 之前:

  1. const Parent = () => {   
  2.   const childRef = useRef(1) 
  3.   useEffect(()=>{ 
  4.     chilRef.current.sayName();// child 
  5.   }) 
  6.   return <Child ref={childRef}/> 
  7. const Child = forwardRef((props,ref) => { 
  8.   useImperativeHandle(ref,()=>({ 
  9.     sayName:()=>{ 
  10.         console.log('child'
  11.     } 
  12.   })) 
  13.     return <div>Child</div> 
  14. }} 

 React ref 从原理到应用

React ref 从原理到应用

从createElement添加ref到React整个渲染过程的末尾(commit阶段)被赋值前,这个ref都是同一份引用。

这也正如 ref单词的本意 reference引用一样。

小节总结

 

1.ref出现在组件上时是一个保留属性

2.ref在组件存在的生命周期内维护了同一个引用(可变对象 MutableObject)

3.当ref挂载的对象是原生html标签时会ref对象的current属性会被赋值为真实DOM 而如果是React组件会被赋值为React"组件实例"

4.ref挂载都在commit阶段处理

创建ref的方式

 

ref prop相当于在组件上挖了一个“坑” 来承接 ref对象,但是这样还不够我们还需要先创建ref对象

字符串ref & callback ref

 

这两种创建ref的方式不再赘述,官网以及社区优秀文章可供参考。

https://zh-hans.reactjs.org/docs/refs-and-the-dom.html

https://blog.logrocket.com/how-to-use-react-createref-ea014ad09dba/

createRef & useRef

 

createRef

16.3引入了createRef这个api

React ref 从原理到应用

createRef的源码就是一个闭包,对外暴露了 一个具有 current属性的对象。

我们一般会这样在class component中使用createRef

  1. class CreateRefComponent extends React.Component { 
  2.   constructor(props) { 
  3.     super(props); 
  4.     this.myRef = React.createRef() 
  5.   } 
  6.   componentDidMount() { 
  7.     this.myRef.current.focus() 
  8.     console.log(this.myRef.current
  9.     // dom input 
  10.   } 
  11.   render() { 
  12.     return <input ref={this.myRef} /> 
  13.   } 

为什么不能在函数组件中使用createRef

 

结合第一节的内容以及 createRef的源码,我们发现,这不过就是在类组件内部挂载了一个可变对象。因为类组件构造函数不会被反复执行,因此这个createRef自然保持同一份引用。但是到了函数组件就不一样了,每一次组件更新, 因为没有特殊处理createRef会被反复重新创建执行,因此在函数组件中使用createRef将不能达到只有同一份引用的效果。

  1. const CreateRefInFC = () => { 
  2.   const valRef = React.createRef();  // 如果在函数组件中使用createRef 在这个例子中点击后ref就会被重新创建因此将始终显示为null 
  3.   const [, update] = React.useState(); 
  4.   return <div> 
  5.     value: {valRef.current
  6.     <button onClick={() => { 
  7.       valRef.current = 80; 
  8.       update({}); 
  9.     }}>+ 
  10.     </button> 
  11.   </div> 

 useRef

 

React 16.8中出现了hooks,使得我们可以在函数组件中定义状态,同时也带来了 useRef

React ref 从原理到应用

React ref 从原理到应用

再来看moutRef和updateRef所做的事:

  1. function mountRef(initialValue) { 
  2.   var hook = mountWorkInProgressHook(); 
  3.   { 
  4.     var _ref2 = { 
  5.       current: initialValue 
  6.     }; 
  7.     hook.memoizedState = _ref2; 
  8.     return _ref2; 
  9.   } 
  10. function updateRef(initialValue) { 
  11.   var hook = updateWorkInProgressHook(); 
  12.   return hook.memoizedState; 

借助hook数据结构,第一次useRef时将创建的值保存在memoizedState中,之后每次更新阶段则直接返回。

这样在函数组件更新时重复执行useRef仍返回同一份引用。

因此实际上和 createRef一样本质上只是创建了一个 Mutable Object,只是因为渲染方式的不同,在函数组件中做了一些处理。而挂载和卸载的行为全部交由组件本身来维护。

被扩展的ref

 

从 createRef开始我们可以看到,ref对象的消费不再和DOM以及组件属性所绑定了,这意味着你可以在任何地方消费他们,这也回答了本文一开始的那个问题。

useRef的应用

解决闭包问题

由于函数组件每次执行形成的闭包,下面这段代码会始终打印1

  1. export const ClosureDemo =  () => { 
  2.     const [ count,setCount ] = useState(0); 
  3.     useEffect(()=> { 
  4.         const interval = setInterval(()=>{ 
  5.           setCount(count+1) 
  6.         }, 1000) 
  7.         return () => clearInterval(interval) 
  8.       }, []) 
  9.     // count显示始终是1 
  10.     return <div>{ count }</div> 

将 count 作为依赖传入useEffect可以解决上面这个问题

  1. export const ClosureDemo =  () => { 
  2.     const [ count,setCount ] = useState(0); 
  3.     useEffect(()=> { 
  4.         const interval = setInterval(()=>{ 
  5.           setCount(count+1) 
  6.         }, 1000) 
  7.         return () => clearInterval(interval) 
  8.       }, [count]) 
  9.     return <div>{ count }</div> 

但是这样定时器也会随着count值的更新而被不断创建,一方面会带来性能问题(这个例子中没有那么明显),更重要的一个方面是它不符合我们的开发语义,因为很明显我们希望定时器本身是不变的。

另外一个方式也可以处理这个问题

  1. export const ClosureDemo =  () => { 
  2.     const [ count,setCount ] = useState(0); 
  3.     useEffect(()=> { 
  4.         const interval = setInterval(()=>{ 
  5.           setCount(count=> count + 1) // 使用setSate函数式更新可以确保每次都取到新的值 
  6.         }, 1000) 
  7.         return () => clearInterval(interval) 
  8.       }, []) 
  9.     return <div>{ count }</div> 

这样做确实可以处理闭包带来的影响,但是仅限于需要使用setState的场景,对数据的修改和触发setState是需要绑定的,这可能会造成不必要的刷新。

使用useRef创建引用

  1. export const ClosureDemo =  () => { 
  2.     const [ count,setCount ] = useState(0); 
  3.     const countRef = useRef(0); 
  4.     countRef.current = count 
  5.     useEffect(()=> { 
  6.         const interval = setInterval(()=>{ 
  7.           // 这里将更新count的逻辑和触发更新的逻辑解耦了 
  8.           if(countRef.current < 5){ 
  9.             countRef.current++ 
  10.           } else { 
  11.             setCount(countRef.current
  12.           } 
  13.         }, 1000) 
  14.         return () => clearInterval(interval) 
  15.       }, []) 
  16.     return <div>{ count }</div> 

 封装自定义hooks

useCreation

通过factory函数来避免类似于 useRef(new Construcotr)中构造函数的重复执行

  1. import { useRef } from 'react'
  2. export default function useCreation<T>(factory: () => T, deps: any[]) { 
  3.   const { current } = useRef({ 
  4.     deps, 
  5.     obj: undefined as undefined | T, 
  6.     initialized: false
  7.   }); 
  8.   if (current.initialized === false || !depsAreSame(current.deps, deps)) { 
  9.     current.deps = deps; 
  10.     current.obj = factory(); 
  11.     current.initialized = true
  12.   } 
  13.   return current.obj as T; 
  14. function depsAreSame(oldDeps: any[], deps: any[]): boolean { 
  15.   if (oldDeps === deps) return true
  16.   for (const i in oldDeps) { 
  17.     if (oldDeps[i] !== deps[i]) return false
  18.   } 
  19.   return true

usePrevious

通过创建两个ref来保存前一次的state

  1. import { useRef } from 'react'
  2. export type compareFunction<T> = (prev: T | undefined, next: T) => boolean; 
  3. function usePrevious<T>(state: T, compare?: compareFunction<T>): T | undefined { 
  4.   const prevRef = useRef<T>(); 
  5.   const curRef = useRef<T>(); 
  6.   const needUpdate = typeof compare === 'function' ? compare(curRef.current, state) : true
  7.   if (needUpdate) { 
  8.     prevRef.current = curRef.current
  9.     curRef.current = state; 
  10.   } 
  11.   return prevRef.current
  12. export default usePrevious; 

useClickAway

自定义的元素失焦响应hook

  1. import { useEffect, useRef } from 'react'
  2. export type BasicTarget<T = HTMLElement> = 
  3.   | (() => T | null
  4.   | T 
  5.   | null 
  6.   | MutableRefObject<T | null | undefined>; 
  7.    
  8.  export function getTargetElement( 
  9.   target?: BasicTarget<TargetElement>, 
  10.   defaultElement?: TargetElement, 
  11. ): TargetElement | undefined | null { 
  12.   if (!target) { 
  13.     return defaultElement; 
  14.   } 
  15.   let targetElement: TargetElement | undefined | null
  16.   if (typeof target === 'function') { 
  17.     targetElement = target(); 
  18.   } else if ('current' in target) { 
  19.     targetElement = target.current
  20.   } else { 
  21.     targetElement = target; 
  22.   } 
  23.   return targetElement; 
  24. // 鼠标点击事件,click 不会监听右键 
  25. const defaultEvent = 'click'
  26. type EventType = MouseEvent | TouchEvent; 
  27. export default function useClickAway( 
  28.   onClickAway: (event: EventType) => void, 
  29.   target: BasicTarget | BasicTarget[], 
  30.   eventName: string = defaultEvent, 
  31. ) { 
  32.   // 使用useRef保存回调函数 
  33.   const onClickAwayRef = useRef(onClickAway); 
  34.   onClickAwayRef.current = onClickAway; 
  35.   useEffect(() => { 
  36.     const handler = (event: any) => { 
  37.       const targets = Array.isArray(target) ? target : [target]; 
  38.       if ( 
  39.         targets.some((targetItem) => { 
  40.           const targetElement = getTargetElement(targetItem) as HTMLElement; 
  41.           return !targetElement || targetElement?.contains(event.target); 
  42.         }) 
  43. ) { 
  44.         return
  45.       } 
  46.       onClickAwayRef.current(event); 
  47.     }; 
  48.     document.addEventListener(eventName, handler); 
  49.     return () => { 
  50.       document.removeEventListener(eventName, handler); 
  51.     }; 
  52.   }, [target, eventName]); 

以上自定义hooks均出自ahooks

还有许多好用的自定义hook以及仓库比如react-use都基于useRef自定义了很多好用的hook。

参考资料

 

  • React Fiber https://juejin.cn/post/6844903975112671239#heading-10
  • React 官网ref使用 https://zh-hans.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper
  • React 前生今世 https://zhuanlan.zhihu.com/p/40462264
  • React ref源码分析 https://blog.csdn.net/qq_32281471/article/details/98473846

原文链接:https://mp.weixin.qq.com/s/Y6rCRrv0H92cKnvZsn1c0g