сводка использования useRef

React.js

На следующем рисунке показан демонстрационный рендеринг useRef, который обобщает некоторые точки знаний через «родительский компонент вкладывает дочерний компонент».

demo

родительский компонент

Резюме очков знаний

  1. useRef — это метод, а useRef возвращает изменяемый объект ref (объект!!!)
  2. InitialValue присваивается объекту .current, возвращаемое значение которого
  3. Может содержать любой тип значения: любое различимое значение, такое как dom, объект и т. д.
  4. Разница между объектом ref и самодельным объектом {current: ''} заключается в том, что useRef будет возвращать один и тот же объект ref каждый раз при его рендеринге, то есть возвращаемый объект ref останется неизменным на протяжении всего жизненного цикла компонента. Самостоятельно созданные объекты создают новый каждый раз, когда они визуализируются.
  5. После изменения значения объекта ref компонент не будет перерисовываться. Есть хитрость: поместите действие бокового изменения перед useState().
  6. По сути, useRef — это «ящик», свойство .current которого содержит изменяемое значение. В настоящее время я использую pageRef и sortRef для сохранения информации о подкачке и информации о сортировке соответственно.

пример кода

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>这是外层组件</h2>
      <div
        onClick={() => {
          console.log("ref:deom", domRef, domRef.current);
          domRef.current.focus();
          domRef.current.value = 'hh';
        }}
      >
       <label>这是一个dom节点</label><input ref={domRef} />
      </div>
      <br />
      <p onClick={showChild} style={{ marginTop: "20px" }}>
        这是子组件
      </p>
      <div style={{ border: "1px solid", padding: "10px" }}>
        <Child ref={childRef} />
      </div>
    </div>
  );
};
export default RefDemo;

Подсборка

Резюме очков знаний

  1. UseimperaticHandle (Ref, CreateHandle, [DEPS]) может настроить значение экземпляра, подверженного воздействию родительского компонента. Если не используется, Ref (Chidlref) (Chidlref) не может получить доступ к какому-либо значению (ChildRef.Current == NULL)
  2. useImperativeHandle следует использовать с forwradRef
  3. React.forwardRef создаст компонент React, который может перенаправить свойство ref, которое он принимает, другому компоненту в своем дереве компонентов.
  4. React.forward принимает функцию рендеринга в качестве аргумента, React вызовет эту функцию с prop и ref в качестве аргументов.

пример кода


const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    say: sayHello,
  }));
  const sayHello = () => {
    alert("hello,我是子组件");
  };
  return <h3>子组件</h3>;
});


等同于 =>

const ChildComponent = (props, ref) => {
  useImperativeHandle(ref, () => ({
    say: sayHello,
  }));
  const sayHello = () => {
    alert("hello,我是子组件");
  };
  return <h3>子组件</h3>;
};
const Child = forwardRef(ChildComponent);
Категории