• 通过React.createRef → ref对象
• 通过元素的ref属性可以附加到React元素上
• 一般通过构造器中给this的属性赋值一个ref，方便整个组件使用
• ref只要传递到react元素中，就可以利用ref的current属性访问到该真实DOM节点
• ref在componentDidMount和componentDidUpdate触发前更新

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>)
}

• 若试图在函数组价上传ref属性会告警

<Test ref={this.refInApp} />