建湖做网站哪家最好百度seo推广计划类型包含

字符串 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'))

注意

• 不论哪种形式的 ref 都不要过度使用，否则会影响运行效率
• 当回调函数绑定的节点，跟回调中需要操作的节点是相同的时，可以通过event.target去获取元素，从而避免使用ref