React 学习笔记 —— refs 属性

本文主要是介绍React 学习笔记 —— refs 属性，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

字符串 ref

注意：过度使用字符串ref 会存在效率问题，该方式可能会在未来的版本中移除

class Demo extends React.Component {handleChange = () => {// 可以通过 refs 访问到被引用的标签this.refs.p.innerText = this.refs.input.value}render () {return (<div>// 通过 ref 对标签进行引用<input ref="input" type="text" onChange={this.handleChange}/><p ref="p"></p></div>)}
}ReactDOM.render(<Demo />, document.getElementById('app'))

回调 ref

传入内联回调，在更新时，该内联回调会调用两次
第一次，接收到的参数为 null，是为了清空状态
第二次，接收到的参数为绑定的标签

class Demo extends React.Component {handleChange = () => {// 在组件实例上访问this.p.innerText = this.input.value}render () {return (<div>// 传入一个回调函数，该函数被调用时第一个参数为所在标签// 可以在回调函数体内，将所在标签挂在组件实例上<input ref={c => this.input = c} type="text" onChange={this.handleChange}/><p ref={c => this.p = c}></p></div>)}
}ReactDOM.render(<Demo />, document.getElementById('app'))

传入非内联函数，在更新时，不会重复调用

class Demo extends React.Component {handleChange = () => {// 在组件实例上访问this.p.innerText = this.input.value}bindInput = (c) => {this.input = c}bindP = (c) => {this.p = c}render () {return (<div>// 传入一个回调函数，该函数被调用时第一个参数为所在标签// 可以在回调函数体内，将所在标签挂在组件实例上<input ref={this.bindInput} type="text" onChange={this.handleChange}/><p ref={this.bindP}></p></div>)}
}ReactDOM.render(<Demo />, document.getElementById('app'))

createRef

被 React 推荐使用的形式

class Demo extends React.Component {// 使用 createRef 创建一个标签节点容器inputRef = React.createRef()pRef = React.createRef()handleChange = () => {this.pRef.current.innerText = this.inputRef.current.value}render () {return (<div>{/* 在标签节点上通过 ref 属性 传入容器，则该容器会自动包含该节点 */}<input ref={this.inputRef} type="text" onChange={this.handleChange}/><p ref={this.pRef}></p></div>)}
}ReactDOM.render(<Demo />, document.getElementById('app'))