React Hooks 中批量使用 useRef 的方法及场景

2023-12-14 16:47:56

使用数组循环赋值 ref

第一种批量使用 useRef 的方法是使用数组循环赋值 ref。这种方法非常简单，只需要创建一个数组来存储 ref，然后使用循环将 ref 赋值给数组中的每个元素。

const refs = [];

for (let i = 0; i < 10; i++) {
  refs.push(useRef());
}

之后，就可以使用数组中的 ref 来访问相应的元素。

const firstRef = refs[0];
const secondRef = refs[1];

这种方法的优点是简单易用，缺点是当需要使用大量 ref 时，代码可能会变得冗长。

组件抽离

第二种批量使用 useRef 的方法是组件抽离。这种方法需要创建一个新的组件，并将需要使用 ref 的元素都放在这个组件中。然后，在父组件中使用这个组件，并将 ref 传递给子组件。

const ChildComponent = (props) => {
  const ref = useRef();

  return (
    <div ref={ref}>
      {props.children}
    </div>
  );
};

const ParentComponent = () => {
  const ref = useRef();

  return (
    <div>
      <ChildComponent ref={ref}>
        Hello world!
      </ChildComponent>
    </div>
  );
};