Let you understand Ref in React and share knowledge points worth knowing.-JS Tutorial-php.cn

This article will take you to understand Ref in React and introduce some knowledge points you need to know about Ref. I hope it will be helpful to everyone!

Let you understand Ref in React and share knowledge points worth knowing.

Intro

In React projects, there are many scenarios whereRefis needed. For example, use therefattribute to obtain the DOM node and obtain the ClassComponent object instance; use theuseRefHook to create a Ref object to solve problems such assetIntervalnot being able to obtain the latest state. Question; you can also call theReact.createRefmethod to manually create aRefobject. [Related recommendations:Redis Video Tutorial]

AlthoughRefis very simple to use, it is inevitable to encounter problems in actual projects. This article will From the perspective ofsource code, sort out various issues related toRef, and clarify what is done behind the APIs related toref. After reading this article, you may have a deeper understanding ofRef.

Ref related type declaration

First of allrefis the abbreviation ofreference, which is a reference. In the type declaration file ofreact, you can find several types related to Ref, and they are listed here.

RefObject/MutableRefObject

interface RefObject { readonly current: T | null; } interface MutableRefObject { current: T; }

Copy after login

When usinguseRefHook returns RefObject/MutableRefObejct. Both types define a{ current: T }object structure, the difference is that the current property ofRefObjectisread-only. IfrefObject.currentis modified, Typescript will warn⚠️.

const ref = useRef(null) ref.current = '' // Error

Copy after login

TS Error: Cannot assign to "current" because it is a read-only property.

View the definition of theuseRefmethod.Function overloadingis used here. When passing in generic parametersTwill returnRefObjectwhen it does not containnull, andMutableRefObject## when it containsnull. #.

function useRef(initialValue: T): MutableRefObject; function useRef(initialValue: T | null): RefObject;

Copy after login

So if you want the current property of the created ref object to be modifiable, you need to add

| null.

const ref = useRef(null) ref.current = '' // OK

Copy after login

When calling the

React.createRef()method, it also returns aRefObject.

createRef

export function createRef(): RefObject { const refObject = { current: null, }; if (__DEV__) { Object.seal(refObject); } return refObject; }

Copy after login

RefObject/MutableRefObjectwas added in version16.3, if you use an earlier version , need to useRef Callback.

RefCallback

Using

Ref Callbackis to pass a callback function. When react calls back, the corresponding instance will be passed back. You can save it yourself for convenience. transfer. The type of this callback function isRefCallback.

type RefCallback = (instance: T | null) => void;

Copy after login

Using

RefCallbackExample:

import React from 'react' export class CustomTextInput extends React.Component { textInput: HTMLInputElement | null = null; saveInputRef = (element: HTMLInputElement | null) => { this.textInput = element; } render() { return (  ); } }

Copy after login

Ref/LegacyRef

In the type declaration, there is also the Ref/LegacyRef type , they are used to refer to Ref types generally.

LegacyRefis a compatible version. In the previous old version,refcan also bestring.

type Ref = RefCallback | RefObject | null; type LegacyRef = string | Ref;

Copy after login

Only when you understand the types related to Ref can you become more comfortable writing Typescript.

Passing of Ref

Special props

When using

refon a JSX component, we pass ## The #refattribute sets aRef. We all know that the syntax ofjsxwill be compiled into the form ofcreateElementby tools such as Babel.

// jsx <App ref={ref} id="my-app" ></App> // compiled to React.createElement(App, { ref: ref, id: "my-app" });

Copy after login

It seems that

ref

is no different from other props, but if you try to print props.ref inside the component, it isundefined. And thedevenvironment console will give a prompt.

Trying to access it will result in

undefined
being returned. If you need to access the same value within the child component, you should pass it as a different prop.

React 对 ref 做了啥？在 ReactElement 源码中可以看到，ref是RESERVED_PROPS，同样有这种待遇的还有key，它们都会被特殊处理，从 props 中提取出来传递给Element。


        
         const RESERVED_PROPS = { key: true, ref: true, __self: true, __source: true, };
         
          Copy after login
         
        
        所以ref是会被特殊处理的“props“。
        forwardRef
        在16.8.0版本之前，Function Component 是无状态的，只会根据传入的 props render。有了 Hook 之后不仅可以有内部状态，还可以暴露方法供外部调用（需要借助forwardRef和useImperativeHandle）。
        如果直接对一个Function Component用ref，dev 环境下控制台会告警，提示你需要用forwardRef进行包裹起来。
        
         function Input () { return  } const ref = useRef() 
         
          Copy after login
         
        
        
         Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
        
        forwardRef为何物？查看源码ReactForwardRef.js将__DEV__相关的代码折叠起来，它只是一个无比简单的高阶组件。接收一个 render 的 FunctionComponent，将它包裹一下定义$$typeof为REACT_FORWARD_REF_TYPE，return回去。
        
        跟踪代码，找到resolveLazyComponentTag，在这里$$typeof会被解析成对应的 WorkTag。
        
        REACT_FORWARD_REF_TYPE对应的 WorkTag 是 ForwardRef。紧接着ForwardRef又会进入updateForwardRef的逻辑。
        
         case ForwardRef: { child = updateForwardRef( null, workInProgress, Component, resolvedProps, renderLanes, ); return child; }
         
          Copy after login
         
        
        这个方法又会调用renderWithHooks方法，并在第五个参数传入ref。
        
         nextChildren = renderWithHooks( current, workInProgress, render, nextProps, ref, // 这里 renderLanes, );
         
          Copy after login
         
        
        继续跟踪代码，进入renderWithHooks方法，可以看到，ref会作为Component的第二个参数传递。到这里我们可以理解被forwardRef包裹的FuncitonComponent第二个参数ref是从哪里来的（对比 ClassComponent contructor 第二个参数是 Context）。
        
        了解如何传递 ref，那下一个问题就是 ref 是如何被赋值的。
        ref 的赋值
        打断点（给 ref 赋值一个 RefCallback，在 callback 里面打断点） 跟踪到代码commitAttachRef，在这个方法里面，会判断 Fiber 节点的 ref 是function还是 RefObject，依据类型处理 instance。如果这个 Fiber 节点是 HostComponent (tag = 5) 也就是 DOM 节点，instance 就是该 DOM 节点；而如果该 Fiber 节点是 ClassComponent (tag = 1)，instance 就是该对象实例。
        
         function commitAttachRef(finishedWork) { var ref = finishedWork.ref; if (ref !== null) { var instanceToUse = finishedWork.stateNode; if (typeof ref === 'function') { ref(instanceToUse); } else { ref.current = instanceToUse; } } }
         
          Copy after login
         
        
        以上是 HostComponent 和 ClassComponent 中对 ref 的赋值逻辑，对于 ForwardRef 类型的组件走的是另外的代码，但行为基本是一致的，可以看这里imperativeHandleEffect。
        接下里，我们继续挖掘 React 源码，看看 useRef 是如何实现的。
        useRef 的内部实现
        通过跟踪代码，定位到 useRef 运行时的代码ReactFiberHooks
        
        这里有两个方法，mountRef和updateRef，顾名思义就是对应Fiber节点mount和update时对ref的操作。
        
         function updateRef(initialValue: T): {|current: T|} { const hook = updateWorkInProgressHook(); return hook.memoizedState; } function mountRef(initialValue: T): {|current: T|} { const hook = mountWorkInProgressHook(); const ref = {current: initialValue}; hook.memoizedState = ref; return ref; }
         
          Copy after login
         
        
        可以看到mount时，useRef创建了一个RefObject，并将它赋值给hook的memoizedState，update时直接将它取出返回。
        不同的 Hook memoizedState 保存的内容不一样，useState中保存state信息，useEffect中 保存着effect对象，useRef中保存的是ref对象...
        mountWorkInProgressHook，updateWorkInProgressHook方法背后是一条 Hooks 的链表，在不修改链表的情况下，每次 render useRef 都能取回同一个 memoizedState 对象，就这么简单。
        应用：合并 ref
        至此，我们了解了在 React 中ref的传递和赋值逻辑，以及useRef相关的源码。用一个应用题来巩固以上知识点：有一个 Input 组件，在组件内部需要通过 innerRefHTMLInputElement来访问DOM节点，同时也允许组件外部 ref 该节点，需要怎么实现？
        
         const Input = forwardRef((props, ref) => { const innerRef = useRef(null) return (  ) })
         
          Copy after login
         
        
        考虑一下上面代码中的???应该怎么写。
        ============ 答案分割线 ==============
        通过了解 Ref 相关的内部实现，很明显我们这里可以创建一个RefCallback，在里面对多个ref进行赋值就可以了。
        
         export function combineRefs( refs: Array | RefCallback> ): React.RefCallback { return value => { refs.forEach(ref => { if (typeof ref === 'function') { ref(value); } else if (ref !== null) { ref.current = value; } }); }; } const Input = forwardRef((props, ref) => { const innerRef = useRef(null) return (  ) })
         
          Copy after login
         
        
        更多编程相关知识，请访问：编程入门！！
        The above is the detailed content of Let you understand Ref in React and share knowledge points worth knowing.. For more information, please follow other related articles on the PHP Chinese website!