React中的ref

· 2 min read

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

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

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

  2. 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>;
  });
}

相关文档