深究React Hooks之useRef和forwardRef的奥妙

2023-12-22 05:06:38

揭秘useRef的引用本质

React Hooks中的useRef是一个非常重要的钩子，它可以用来引用一个可变值，并且在组件的生命周期中保持不变。useRef的本质是一个引用，它指向一个普通的JavaScript对象，而这个对象的值在组件的生命周期中是不会改变的。

const ref = useRef(initialValue);

在使用useRef时，我们需要为它提供一个初始值。这个初始值可以是任何类型的数据，比如字符串、数字、对象、函数等等。一旦我们为useRef提供了初始值，它就会创建一个引用指向这个值，并且在组件的生命周期中保持不变。

const ref = useRef(null);

// 组件挂载后，将DOM元素引用赋值给ref
useEffect(() => {
  ref.current = ReactDOM.findDOMNode(this);
}, []);

useRef非常适用于引用DOM元素。在上面的示例中，我们使用useEffect钩子在组件挂载后将DOM元素引用赋值给ref。这样，我们就可以在组件的任何地方访问这个DOM元素，而不用担心它会因为组件的重新渲染而丢失。

巧妙运用forwardRef传递引用

forwardRef是一个非常特殊的React组件，它允许我们将父组件的引用传递给子组件。这对于某些需要访问父组件实例的子组件非常有用。

const MyComponent = forwardRef((props, ref) => {
  // 使用ref引用父组件实例
  const parentRef = ref;

  return <div>子组件</div>;
});

在上面的示例中，我们创建了一个名为MyComponent的React组件，并使用forwardRef将其包装起来。在MyComponent内部，我们可以通过ref参数访问父组件的实例。这样，我们就可以在子组件中调用父组件的方法或访问父组件的属性。

const ParentComponent = () => {
  const childRef = useRef(null);

  return (
    <div>
      <MyComponent ref={childRef} />

      <button onClick={() => {
        // 调用子组件的方法
        childRef.current.doSomething();
      }}>
        点击我
      </button>
    </div>
  );
};

在上面的示例中，我们创建了一个名为ParentComponent的React组件，并在其中使用MyComponent。我们在ParentComponent中使用ref属性将子组件的引用传递给childRef。这样，我们就可以在ParentComponent中调用子组件的方法。

深入理解useRef和forwardRef的应用场景

useRef和forwardRef在React开发中有着广泛的应用场景。以下是一些常见的应用场景：

引用DOM元素 ：useRef可以用来引用DOM元素，以便我们在组件的任何地方访问这个DOM元素。这对于需要与DOM元素交互的组件非常有用，比如表单组件、拖放组件、动画组件等等。
状态管理 ：useRef可以用来管理组件的内部状态。这对于需要在组件的生命周期中保持不变的状态非常有用，比如表单输入值、滚动位置、选中项等等。
性能优化 ：useRef可以用来优化组件的性能。通过使用useRef，我们可以避免在组件的重新渲染过程中重新创建某些昂贵的对象，比如函数、数组、对象等等。
组件通信 ：forwardRef可以用来在父组件和子组件之间进行通信。这对于需要父子组件之间共享数据的场景非常有用，比如表单组件、对话框组件、模态框组件等等。