这是我的react hooks代码：
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，第二次is应该指向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') );
这可能是因为你专注于渲染的数量，这不一定是使用钩子时最好的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发生变化时该怎么办。
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
根据文件
ReactDOM.render(元素，容器[，回调](
将React元素渲染到所提供容器中的DOM中，并向组件返回引用(或者对于无状态组件返回null(。
由于您试图引用一个功能组件，这可能是原因。因为你的问题，我遇到了一个有趣的场景。
此外，如果用作子组件，则输出与预期一样