没有平地雷，如何填坑，React Hooks之useRef&forwardRef

React Hooks指南中的useRef是React Hooks之一，用于在函数组件中存储可变值，而不会破坏函数组件的纯函数特性。

useRef的初始化形式为const count = useRef(0)。你可以使用count.current读取useRef返回的对象的current属性值。

React Hooks指南中的forwardRef是一个更高阶的函数，它可以将父组件的ref传递给子组件，以便父组件可以访问子组件的DOM元素。

使用useRef和forwardRef，你可以轻松地将可变值存储在函数组件中，并允许父组件访问子组件的DOM元素。这在处理表单、动画和其他需要在组件之间共享状态的场景中非常有用。

在React中，如果你需要在组件不断render时保持一个值不变，那么可以使用useRef。例如，你可以使用useRef来存储一个计数器，该计数器在每次组件render时都会增加。

const MyComponent = () => {
  const count = useRef(0);

  useEffect(() => {
    count.current++;
  });

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

在上面的示例中，useRef被用来创建一个名为count的ref对象。该ref对象有一个current属性，它保存了计数器的当前值。每次组件render时，useEffect钩子都会被调用，并且计数器会增加。

除了存储可变值之外，useRef还可以用来存储其他类型的数据，例如DOM元素、函数或对象。例如，你可以使用useRef来存储一个表单元素，以便稍后可以访问它。

const MyComponent = () => {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
};

在上面的示例中，useRef被用来创建一个名为inputRef的ref对象。该ref对象有一个current属性，它保存了表单元素的当前值。useEffect钩子被用来在组件挂载后将焦点设置到表单元素上。

forwardRef是一个更高阶的函数，它可以将父组件的ref传递给子组件。这允许父组件访问子组件的DOM元素。例如，你可以使用forwardRef来创建一个按钮组件，以便父组件可以访问该按钮的DOM元素。

const Button = forwardRef((props, ref) => {
  return <button ref={ref} {...props} />;
});

const MyComponent = () => {
  const buttonRef = useRef();

  useEffect(() => {
    buttonRef.current.focus();
  }, []);

  return <Button ref={buttonRef} />;
};

在上面的示例中，forwardRef被用来创建一个名为Button的组件。该组件接受一个ref参数，该ref参数可以从父组件传递过来。然后，该ref参数被传递给button元素，以便父组件可以访问该元素。useEffect钩子被用来在组件挂载后将焦点设置到按钮元素上。

useRef和forwardRef是两个非常有用的React Hooks。它们可以用来在函数组件中存储可变值，并允许父组件访问子组件的DOM元素。这在处理表单、动画和其他需要在组件之间共享状态的场景中非常有用。