JIYIK CN >

When we use a string as a reference in a function component, we get the error "Function components cannot have string refs". To fix the error, we need to use useRef()the hook to get a mutable ref object that we can use as a ref inside the component.

The following is an example of how the error occurs.

export default function App() {
  // 在严格模式树中找到了字符串 ref。
  // Function components cannot have string refs.
  // 我们建议改用 useRef()。
  return (
    <div>
      <input type="text" id="message" ref="msg" />
    </div>
  );
}

The problem in your code snippet is that we use strings as references.

To work around this error, use useRefthe hook to get a mutable ref object instead.

import {useEffect, useRef} from 'react';

export default function App() {
  const refContainer = useRef(null);

  useEffect(() => {
    // 这是对输入元素的引用
    console.log(refContainer.current);

    refContainer.current.focus();
  }, []);

  return (
    <div>
      <input type="text" id="message" ref={refContainer} />
    </div>
  );
}

useRef()The hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .currentattributes are initialized to the passed argument.

注意, we have to access the current property of the ref object to access the input element on which we set the ref attribute.

When we pass <input ref={myRef} />a ref object like this, React sets the .current property of the ref object to the corresponding DOM node.

The useRef hook creates a normal JavaScript object but gives us the same ref object on every render. In other words, it’s almost a memoized object value with a .current property.

It is important to note that changing the value of the ref's current attribute will not cause a re-render.

For example, the ref does not have to be included useEffectin the dependencies array of the hook, since changing its current properties will not cause a re-render.

import {useEffect, useRef} from 'react';

export default function App() {
  const refContainer = useRef(null);

  const refCounter = useRef(0);

  useEffect(() => {
    // 👇️ 这是对输入元素的引用
    console.log(refContainer.current);
    refContainer.current.focus();

    // 👇️ 增加 ref 值不会导致重新渲染
    refCounter.current += 1;
    console.log(refCounter.current);
  }, []);


  return (
    <div>
      <input type="text" id="message" ref={refContainer} />
    </div>
  );
}

The hook in the example useEffectis only run twice because useRef does not notify us when its content changes.

Changing the current properties of an object will not cause a re-render.