reactjs - 为什么 useRef 在此示例中不起作用？

Question

这是我的 react 钩子(Hook)代码:

function Simple(){
    var [st,set_st]=React.useState(0)
    var el=React.useRef(null)
    if (st<1)
        set_st(st+1)//to force an extra render for a grand total of 2
    console.log('el.current',el.current,'st',st)
    return <div ref={el}>simple</div>
}
ReactDOM.render(<Simple />,document.querySelector('#root') );

我认为它应该渲染两次。第一次 el.current 应该为 null，第二次应该指向 div 的 DOM 对象。运行时，这是输出

el.current null st 0
el.current null st 1

是的，它确实渲染了两次。但是，第二次渲染 el.current 仍然为空。为什么？

解决方案:如下 Gireesh Kudipudi 所描述。我添加了useEffect

function Simple(){
    var [st,set_st]=React.useState(0)
    var el=React.useRef(null)
    if (st<1)
        set_st(st+1)//to force an extra render for a grand total of 2
    console.log('el.current',el.current,'st',st)
    React.useEffect(_=>console.log('el.current',el.current,'st',st)) //this prints out the el.current correctly
    return <div ref={el}>simple</div>
}
ReactDOM.render(<Simple />,document.querySelector('#root') );

Answer 1

您可能专注于渲染量，这不一定是使用 hooks 时最好的 React 心态。心态应该更像我的世界发生了什么变化。

从那时起，尝试添加 useEffect 并告诉它您有兴趣查看 ref 在我的世界中何时发生变化。尝试以下示例，并亲自查看行为。

let renderCounter = 0;

function Simple() {
  const [state, setState] = useState()
  const ref = React.useRef(null)

  if (state < 1) {
    /** 
     * We know this alter the state, so a re-render will happen
     */
    setState('foo')
  }

  useEffect(() => {
    /**
     * We don't know exactly when is `ref.current` going to
     * point to a DOM element. But we're interested in logging
     * when it happens.
     */
    if (ref.current) {
      console.log(ref.current)

      /**
       * Try commenting and uncommenting the next line, and see
       * the amount of renderings
       */
       setState('bar');
    }

  }, [ref]);

  renderCounter = renderCounter + 1
  console.log(renderCounter);

  return <div ref={el}>simple</div>
}

当 ref 已用值初始化时，React 将重新渲染，但这并不意味着它会在第二次渲染时发生。

为了回答你的问题，你还没有告诉react当ref改变时要做什么。