React Hooks:useRef Hook为什么.current为null?

时间:2019-06-11 10:07:47

标签: reactjs react-hooks

我有一个简单的组件示例:

function App() {
  const observed = useRef(null);
  console.log(observed.current);

  return (
    <div ref={observed} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我希望observed.current的类型为element,而current不会为空,而是具有所有属性的div元素。我的理解是:

  1. 该引用初始化为空
  2. 空值被ref
  3. 覆盖

但事实证明,.current仍然为空。这很不好,因为我想将观察值传递给需要一个Element类型参数的函数。

https://codesandbox.io/embed/purple-forest-0460k

3 个答案:

答案 0 :(得分:3)

Ref.current为null,因为直到函数返回并呈现内容后才设置ref。每当传递给它的数组内容的值更改时,useEffect钩子就会触发。通过在数组中传递observed并通过将observed记录到控制台的回调,可以利用useEffect挂钩完成任务。

  useEffect(() => {
    console.log(observed.current);
  }, [observed]);

Code Sandbox

答案 1 :(得分:2)

这是我最后要做的,因为在useEffect上调用rlvRef并没有捕获所有事件。

const rlvRef = useRef()
const [refVisible, setRefVisible] = useState(false)

useEffect(() => {
  if (!refVisible) { 
    return
  }
  // detected rendering
}, refVisible)

return (
<RecyclerListView
              ref={el => { rlvRef.current = el; setRefVisible(!!el); }}
... />
)

答案 2 :(得分:0)

function getRandomString() { return Math.random() .toString(36) .substring(7); } var config = { events: [{ url: "foo" }, { url: "baz" } ] }; function otherFunction(element) { console.info(element.url); } for (let i = 0; i < 5; i++) { var str = "&randomParam=" + getRandomString(); config.events.forEach(element => { otherFunction(Object.assign({}, element, { url: element.url + str })); }); }发生时,console.log尚未设置。尝试将ref放入console.log钩子中,它会按您的意愿工作。

useEffect