Reactjs 为什么在这个例子中useRef不起作用？

这是我的代码：

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') );

是的，它渲染了两次。但是，第二个渲染当前值仍然为空。为什么?

解决方案：如下Gireesh Kudipudi所述。我加了一个效果

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') );

输出为

el.current null st 0
el.current <div>​simple​</div>​ st 1

据

ReactDOM.renderelement，容器[，回调]

将React元素呈现到提供的容器中的DOM中，并返回对组件的引用，或为无状态组件返回null

由于您试图引用一个功能组件，这可能是一个原因。因为您的问题，我遇到了一个有趣的场景

此外，如果用作子组件，则输出与预期一致

输出为

el.current null st 0
el.current <div>​simple​</div>​ st 1

据

ReactDOM.renderelement，容器[，回调]

将React元素呈现到提供的容器中的DOM中，并返回对组件的引用，或为无状态组件返回null

由于您试图引用一个功能组件，这可能是一个原因。因为您的问题，我遇到了一个有趣的场景

---

此外，如果用作子组件，则输出与预期一样

，这可能是因为您专注于渲染的数量，这不一定是使用挂钩时的最佳反应心态。心态应该更像是我的世界发生了什么变化

从这一点出发，尝试添加一个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>
}

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

---

为了回答您的问题，您没有告诉react在ref发生变化时应该做什么。

可能是因为您专注于渲染的数量，这不一定是使用挂钩时最佳的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>
}

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

---

要回答您的问题，您还没有告诉react当ref更改时该怎么做。

ref对象是一个可变对象，它在重新渲染时持有相同的引用。将其作为依赖项添加到useEffect不会重新触发效果。它记录正确值的原因是，useEffect在渲染阶段之后运行。ref对象是一个可变对象，在重新渲染时保持相同的引用。将其作为依赖项添加到useEffect不会重新触发效果。它记录正确值的原因是useEffect在渲染阶段之后运行