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

Question

这是我的反应挂钩代码：

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 应该为空，第二次应该指向 div 的 DOM 对象。当运行这个时，这就是输出

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

它确实渲染了两次。然而，第二个渲染 th 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

class SimpleComponent extends React.Component{
  el = React.createRef(null)
  constructor(props){
    super(props)
    this.state = {
      st:0
    }
  }
  componentDidMount(){
    if(this.state.st<1)
      this.setState(prevState=>{
        return {st:prevState.st+1}
      })
  }

  render(){
    console.log('el.current',this.el.current,'st',this.state.st)
    return <div ref={this.el}>simple</div>
  }
}

ReactDOM.render(<SimpleComponent />,document.querySelector('#root') );

输出是

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

根据Documentation

ReactDOM.render（元素，容器[，回调]）

将 React 元素渲染到提供的容器中的 DOM 中，并 return 对组件的 reference（或 returns null 对于无状态组件).

由于您正在尝试引用一个功能组件，所以它可能是 reason.It 因为您的问题我遇到了一个有趣的场景。

此外，如果用作子组件，则输出符合预期

Answer 2

可能是因为您专注于渲染量，这在使用 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 将 re-render，但这并不意味着它会在第二次渲染时发生。

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

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

why is useRef not working in this example?

reactjs

react-hooks

use-ref