react 生命周期函数 componentDidMount 为什么不能保证可以拿到真实的dom？

Question

问题：react 生命周期函数 componentDidMount 为什么不能保证可以拿到真实的dom？

示例代码：

componentDidMount(){
    console.log(this.test) //大概率会得到null
}

render(){
    return(
        <div ref={(test) => {this.test = test}}>123<div>
    )
}

Answer 1

回答

React 保证在 componentDidMount 和 componentDidUpdate 之前设置 refs，但仅仅是在确定子组件已经渲染后。

以下情况都有可能无法立即获取到 refs

1) 设置条件渲染

render() {
  if (this.state.isLoading) {
    return <h1>Loading</h1>;
  }

  return <div ref={this._setRef} />;
}

2）子组件包裹造成未渲染。

<MyComponent>
  <div ref={this.setRef} />
</MyComponent>

function MyComponent(props) {
  // 未渲染子组件
  return <h1>Oops, no refs for you today!</h1>;
}

3) 使用 ReactDOM.render 嵌套渲染

<MyModal>
    <div ref={this.setRef}></div>
</MyModal>

function MyModal() {
    componentDidUpdate() {
        ReactDOM.render(this.props.children, $dom)
    }
    render() {
        return null;
    }
}

// 这种情况可以使用 createPortal
render() {
    return ReactDOM.createPortal(this.props.children, $dom)
}

总结出来就一句话：设置 ref 的组件或者元素渲染之后才能获取到对应的 ref

Answer 2

不是this.state.test么