React中的ref

发表于 2022-03-01 更新于 2023-10-22 阅读次数：本文字数： 2.8k 阅读时长 ≈ 3 分钟

React中ref还是很常用的，它使父组件具备操作子组件/原生DOM的能力，比如控制一个modal组件弹窗显示等等。但使用上有时会遇到一个不注意的坑，这里梳理下。

ref挂载元素成功后，并不会触发组件重新渲染

有时会将useEffect依赖中增加ref或者ref.current，但实际上当ref中引用的组件被挂载后，ref.current虽然已经保存了实例引用，但组件并不会触发重新渲染，更别说effect重新执行了，因此遇到此类需求需要修改方案来解决，方法如下

ref的使用，可以直接ref对象赋值，也可以callback，两种方式本身作用是一致的，唯一区别是如果想在挂载时执行一些动作，可以使用callback，举个🌰

function App() {
  const pElRef = useRef<any>();
  const [refresh, setRefresh] = useState(0);
  useEffect(() => {
    console.log('render?');
  }, [refresh]);

  const onAttached = useCallback((ref) => {
    if (refresh === 0) {
      setRefresh(refresh + 1);
    }
    pElRef.current = ref;
  }, [refresh]);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo"/>
        <p ref={onAttached}>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

如上，增加state参refresh，在挂载成功时修改从而做到重新渲染。

HOC下的ref传递

使用组件时有几个参数是特殊的，比如key，又或者是ref。它们并非属于props，react下会进行特殊处理，比如在HOC下，就需要注意。

举个🌰，如下代码中，App组件中希望可以利用SayRef来操作User组件，但是User组件并不直接提供给App消费，而是HOC进行了下包裹。这里props在传给User时并不会将ref传递，ref引用将指向的是SayHoc，因此这里点击不会work。

export function SayHoc({ boss }: { boss: string }) {
  return (props: any) => {
    return <h1>
      from:{boss} say hello:
      <User {...props}/>
    </h1>;
  };
}


const User = React.forwardRef((props: { name: string }, ref) => {
  useImperativeHandle(ref, () => {
    return ({
      say: () => alert(props.name),
    });
  });
  return <>{props.name}</>;
});


const Say = SayHoc({ boss: 'L' });

function App() {
  const sayRef = useRef<any>();
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo"/>
        <Say name={'2121'} ref={sayRef}/>
        <button onClick={() => {
          sayRef.current?.say();
        }}>
          say alert
        </button>
      </header>
    </div>
  );
}

export default App;

解决办法如下，利用React.forwardRef。

export function SayHoc({ boss }: { boss: string }) {
  return React.forwardRef((props: any, ref) => {
    return <h1>
      from:{boss} say hello:
      <User ref={ref} {...props}/>
    </h1>;
  });
}

HOC下的ref传递

相关文档