React中的ref有什么用？

  在React中，ref是一个强大的特性，它允许开发者直接访问DOM元素或React组件的实例。ref通常用于那些需要直接操作DOM或与外部库集成的场景，这些操作通常不能仅通过React的声明式编程模型来完成。

1. 为什么使用refs？

1.1 Refs在以下场景中非常有用：

• 直接操作DOM：当你需要直接访问DOM节点以执行某些操作，如动画、测量尺寸或集成第三方库时，可以使用refs。
• 集成第三方库：许多第三方库（如选择器、图库、日历等）需要直接操作DOM或访问特定的DOM节点。
• 触发强制更新：在某些特定情况下，你可能需要强制组件重新渲染，即使其状态或props没有变化。

1.2 如何创建和使用refs？

  在React中，有几种方法可以创建和使用refs。

1.2.1 使用createRef方法

• createRef是React提供的用于创建refs的方法之一。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // 使用ref.current访问DOM节点
    console.log(this.myRef.current);
  }

  render() {
    return <div ref={this.myRef}>Here is a div</div>;
  }
}

1.2.2 使用useRef钩子

• 对于函数组件，可以使用useRef钩子来创建和访问refs。

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef();

  useEffect(() => {
    // 使用ref.current访问DOM节点
    console.log(myRef.current);
  }, []);

  return <div ref={myRef}>Here is a div</div>;
}

2. 使用场景

2.1使用ref进行DOM测量

import React, { useRef, useEffect } from 'react';

function ResizeableBox() {
  const ref = useRef(null);
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (ref.current) {
      const width = ref.current.offsetWidth;
      const height = ref.current.offsetHeight;
      setSize({ width, height });
    }
  }, []);

  return (
    <div ref={ref} style={{ width: size.width, height: size.height }}>
      Resize me!
    </div>
  );
}

  在这个示例中，我们使用useRef钩子创建了一个ref，并将其附加到一个div元素上。然后，我们使用useEffect钩子来监听size状态的变化，并使用ref来获取并设置div的当前尺寸。

2.2 集成第三方库

import React, { useRef } from 'react';
import SomeLibrary from 'some-third-party-library';

function IntegrationComponent() {
  const ref = useRef();

  useEffect(() => {
    // 初始化第三方库，并将ref传递给它
    const instance = SomeLibrary.create(ref.current);
    return () => {
      // 清理工作
      instance.destroy();
    };
  }, []);

  return <div ref={ref} />;
}

  在这个示例中，我们使用useRef创建了一个ref，并将其作为DOM引用传递给了第三方库。这是常见的与需要直接操作DOM的第三方库集成的模式。

3. Refs与函数组件

  在函数组件中，我们不能使用createRef，但可以使用useRef钩子。useRef返回一个对象，该对象有一个current属性，用于存储指向任何值的引用。

3.1 使用useRef钩子进行状态管理

import React, { useRef } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef(count);

  useEffect(() => {
    // 每次count变化时，更新prevCountRef.current
    prevCountRef.current = count;
  }, [count]);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(prevCountRef.current + 1)}>Increment</button>
    </div>
  );
}

  在这个示例中，我们使用useRef钩子来存储count的前一个值。这可以用于实现复杂的逻辑，例如，只有在count真正改变时才执行某些操作。