The following is a demo of useRef, using the “parent component nested with a subgroup” piece to summarize some of the points.

demo

The parent component

Knowledge summary

  1. UseRef is a method, and useRef returns a mutable ref object (object!!
  2. InitialValue The.current object assigned to its return value
  3. You can hold any type of value: DOM, object, any discernible value
  4. The difference between a ref object and a {current: ‘ ‘} object is that useRef returns the same ref object every time it renders, meaning that the returned REF object remains the same throughout the life of the component. A custom object is created each time it is rendered.
  5. A change in the value of the ref object does not trigger component rerendering. One trick is to place its edging action before useState().
  6. In essence, useRef is a “box” of mutable values that its.current property holds. So far I’m using pageRef and sortRef to hold paging and sorting information, respectively.

Code sample

import React, {
  useRef,
  useEffect,
  useImperativeHandle,
  forwardRef,
} from "react";

const RefDemo = () => {
  const domRef = useRef(1);
  const childRef = useRef(null);
  useEffect(() => {
    console.log("ref:deom-init", domRef, domRef.current);
    console.log("ref:child-init", childRef, childRef.current);
  });
  const showChild = () => {
    console.log("ref:child", childRef, childRef.current);
    childRef.current.say();
  };
  return (
    <div style={{ margin: "100px", border: "2px dashed", padding: "20px"}} > < h2 > this is the outer component < / h2 > < div onClick = {() = > {the console. The log ("ref:deom", domRef, domRef.current);
          domRef.current.focus();
          domRef.current.value = 'hh'; }} >< label> this is a DOM node </label><input ref={domRef} /> </div> <br /> <p onClick={showChild} style={{{marginTop:"20px"}}> This is the child component </p> <div style={{border:"1px solid", padding: "10px" }}>
        <Child ref={childRef} />
      </div>
    </div>
  );
};
export default RefDemo;
Copy the code

Child components

Knowledge summary

  1. UseImperativeHandle (ref,createHandle,[DEps]) allows you to customize the instance value exposed to the parent component. If not, the parent component’s ref(chidlRef) does not access any value (childref.current ==null)
  2. UseImperativeHandle should be used in conjunction with forwradRef
  3. The React. ForwardRef creates a React component that forwards the ref properties it receives to another component in its component tree.
  4. React. Forward takes the render function as arguments. React will call this function using prop and ref as arguments.

Code sample


const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    say: sayHello,
  }));
  const sayHello = () => {
    alert("Hello, I'm a child component");
  };
  return< H3 > child component </h3>; }); Const ChildComponent = (props, ref) => {useImperativeHandle(ref, () => ({say: sayHello,})); const ChildComponent = (props, ref) => {useImperativeHandle(ref, () => ({say: sayHello,})); const sayHello = () => { alert("Hello, I'm a child component");
  };
  return< H3 > child component </h3>; }; const Child = forwardRef(ChildComponent);Copy the code