11

将钩子的 setter 函数useState用作回调 ref 函数是否安全？这会对 Suspense 或其他即将到来的 React 更改造成麻烦吗？如果“是的，这没关系”，那就太酷了！如果“不”为什么不呢？如果“也许”，那么什么时候可以，什么时候不行？

我问是因为我的一个组件需要安装三个 ref 才能调用 DOM API。其中两个必需的引用是通过 JSX 属性在同一组件中分配的“普通”引用ref。稍后将通过 React 上下文将另一个 ref 分配到深度嵌套的组件中。我需要一种方法来在所有三个 ref 都安装后强制重新渲染父组件，并useEffect在卸载任何 ref 时强制进行清理。

最初我编写了自己的回调 ref 处理程序，它调用了useState我存储在上下文提供程序中的 setter。但后来我意识到，useStatesetter 做了我自己的回调 ref 所做的一切。仅使用 setter 而不是编写我自己的回调 ref 函数是否安全？还是有更好和/或更安全的方法来做我想做的事情？

我尝试了谷歌搜索"useState" "callback ref"（和其他类似的关键字变体），但结果没有帮助，除了@theKashey的优秀use-callback-ref包，我肯定会在其他地方使用（例如，当我需要将回调引用传递给组件时）需要一个 RefObject，或者当我既需要回调又需要在本地使用 ref 时），但在这种情况下，所有回调需要做的就是在 ref 更改时设置一个状态变量，所以 Anton 的包在这里看起来有点矫枉过正。

下面是一个简化的示例，位于https://codesandbox.io/s/dreamy-shockley-5dc74。

import * as React from 'react';
import { useState, forwardRef, useEffect, createContext, useContext, useMemo } from 'react';
import { render } from 'react-dom';

const Child = forwardRef((props, ref) => {
  return <div ref={ref}>This is a regular child component</div>;
});

const refContext = createContext();
const ContextUsingChild = props => {
  const { setValue } = useContext(refContext);
  return <div ref={setValue}>This child uses context</div>;
};

const Parent = () => {
  const [child1, setChild1] = useState(null);
  const [child2, setChild2] = useState(null);
  const [child3, setChild3] = useState(null);

  useEffect(() => {
    if (child1 && child2) {
      console.log(`Child 1 text: ${child1.innerText}`);
      console.log(`Child 2 text: ${child2.innerText}`);
      console.log(`Child 3 text: ${child3.innerText}`);
    } else {
      console.log(`Child 1: ${child1 ? '' : 'not '}mounted`);
      console.log(`Child 2: ${child2 ? '' : 'not '}mounted`);
      console.log(`Child 3: ${child3 ? '' : 'not '}mounted`);
      console.log(`In a real app, would run a cleanup function here`);
    }
  }, [child1, child2, child3]);

  const value = useMemo(() => ({ setValue: setChild3 }), []);

  return (
    <refContext.Provider value={value}>
      <div className="App">
        This is text in the parent component
        <Child ref={setChild1} />
        <Child ref={setChild2} />
        <ContextUsingChild />
      </div>
    </refContext.Provider>
  );
};

const rootElement = document.getElementById('root');
render(<Parent />, rootElement);
4

2 回答 2

0

每次出现目标元素时，您都会有额外的重新渲染（因为它可能会被有条件地渲染，它可能会发生不止一次）。

否则它应该工作得很好。除了，它可能会让未来的代码读者感到困惑。

我宁愿使用额外的功能 +useRef来减少认知负担（又名“混乱”）。甚至更多：我们可能不需要回调 ref，因为我们有useEffect：

const childRef = useRef();

useEffect(() => {
 ... do something
}, [childRef.current]);

<div ref={childRef} ...

但可以肯定的是，在非常普遍的情况下，这可能不适合我们，因为ref每个目标元素的生命周期只调用两次回调，而useEffect如果列表中有更多依赖项，则可能会更频繁地触发。但还是。

于 2021-08-15T19:49:24.100 回答
0

useState“setter”函数在渲染周期中保持相同的引用，因此它们应该可以安全使用。甚至提到它们可以在依赖数组中省略：

（setCount 函数的身份保证是稳定的，因此可以安全地省略。）

您可以直接传递 setter 函数：

<refContext.Provider value={setChild3}>

...然后阅读：

const ContextUsingChild = props => {
  const setChild3 = useContext(refContext);
  return <div ref={setChild3}>This child uses context</div>;
};
于 2021-03-12T03:59:17.650 回答