useRef 与 createRef 的异同之别及 useRef 的多面用途

useRef 与 createRef 的异同之别

1. 创建方式

useRef 是一个函数，而 createRef 是一个对象。

2. 使用方式

useRef 的使用方式更加简单，直接在组件内部使用即可。

const ref = useRef();

而 createRef 需要在组件外部创建一个对象，然后将其传递给组件内部使用。

const ref = createRef();
<Component ref={ref} />

3. 引用类型

useRef 可以引用任何值，包括 DOM 元素、组件实例、对象等。

const ref = useRef(null);
const ref = useRef({});
const ref = useRef(() => {});

而 createRef 只可以引用 DOM 元素。

const ref = createRef();
// 报错：createRef() can be used only on class components
<Component ref={ref} />

4. 生命周期

useRef 在组件的整个生命周期中都存在，而 createRef 仅在组件挂载后和卸载前存在。

5. 应用场景

useRef 可以用于以下场景：

• 访问 DOM 元素
• 获取组件实例
• 保存状态
• 实现代码复用

createRef 可以用于以下场景：

• 访问 DOM 元素

总体来说，useRef 更加通用，因为它可以引用任何值，并且在组件的整个生命周期中都存在。而 createRef 只可以引用 DOM 元素，并且仅在组件挂载后和卸载前存在。因此，在需要引用 DOM 元素时，可以使用 createRef，而在其他情况下，则可以使用 useRef。

useRef 的其他用途

除了上述常见的用法之外，useRef 还可以用于以下场景：

1. 性能优化

useRef 可以用来缓存昂贵的计算结果，从而提高性能。例如，以下代码使用 useRef 来缓存一个对象的计算结果，避免每次重新计算：

const ref = useRef();

const expensiveCalculation = () => {
  // 昂贵的计算
  return 42;
};

const Component = () => {
  if (!ref.current) {
    ref.current = expensiveCalculation();
  }

  return <div>{ref.current}</div>;
};

2. 代码复用

useRef 可以用来保存组件的状态，从而实现代码复用。例如，以下代码使用 useRef 来保存一个组件的输入值，以便在组件重新渲染时保持其值不变：

const ref = useRef('');

const Component = () => {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
};

3. 实现受控组件

useRef 可以用来实现受控组件。受控组件是指组件的状态由父组件控制的组件。例如，以下代码使用 useRef 来实现一个受控输入组件：

const ref = useRef(null);

const Component = () => {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      ref={ref}
    />
  );
};

父组件可以使用 ref.current.value 来获取输入组件的值。

结语

useRef 和 createRef 都是 React 中非常有用的工具，可以帮助您实现各种需求。useRef 更加通用，因为它可以引用任何值，并且在组件的整个生命周期中都存在。createRef 只可以引用 DOM 元素，并且仅在组件挂载后和卸载前存在。除了常见的用法之外，useRef 还可以用于性能优化、代码复用和实现受控组件。