current里是null的现象

由于打印时，this.modalRef才刚刚声明，current是null，但是current是个引用值，展开时访问的是最后的结果

class Modal extends React.Component {constructor(props) {super(props)this.modalRef = React.createRef()console.log('刚创建时', this.modalRef)}componentDidMount() {console.log('componentDidMount', this.modalRef)}componentDidUpdate() {console.log('componentDidUpdate', this.modalRef)}render() {return (<divref={this.modalRef}style={{width: '300px',border: '1px solid #000',display: this.props.toOpen ? 'block' : 'none'}}><h1>This is a Modal</h1><p>This is a super Modal</p></div>)}
}

在这里插入图片描述

ref有不同的使用方式

ref放在html元素上 → current: 真实DOM
ref放在class组价上 → current: 组件实例
ref放在函数组件（没有实例）→ 无法附加到组件上

class App extends React.Component {constructor(props) {super(props)this.refInApp = React.createRef()}state = {toOpen: false,}componentDidMount() {console.log('【APP】componentDidMount', this.refInApp)}changeStatus = (toOpen) => {this.setState({toOpen})}render() {return (<><Modal toOpen={this.state.toOpen} ref={this.refInApp} /><button onClick={() => this.changeStatus(true)}>打开</button><button onClick={() => this.changeStatus(false)}>关闭</button></>)}
}

在这里插入图片描述

函数组件使用hooks获取dom实例

function Test() {const divRef = React.useRef(null)React.useEffect(() => {console.log('函数组件使用hooks获取ref', divRef)}, [])return (<div ref={divRef}>Test函数组件</div>)
}