React ref
react ref
理解：通过指定ref获得你想操作的元素，然后进行修改
string 使用方法
<input ref="myInput" />var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();ref作为回调函数的方式去使用
class Input extends Component {
constructor(props){
super(props);
}
focus = () => {
this.textInput.focus();
}
render(){
return (
<div>
<input ref={(input) => { this.textInput = input }} />
</div>
)
}
}input参数是哪来的
回调函数将接收当前的dom元素作为参数，然后存储一个指向这个DOM元素的引用。那么在示例代码中，我们已经把input元素存储在了this.textInput中，在focus函数中直接使用原生DOM api实现focus聚焦。
回调函数什么时候被调用
答案是当组件挂载后和卸载后，以及ref属性本身发生变化时，回调函数就会被调用。
不能在无状态组件中使用ref
原因很简单，因为ref引用的是组件的实例，而无状态组件准确的说是个函数组件(Functional Component)，没有实例。
理解：class组件-对象组件-有实例 无状态组件-函数组件-无实例
上代码：
function MyFunctionalComponent() {
return <input />;
}
class Parent extends React.Component {
render() {
return (
<MyFunctionalComponent
ref={(input) => { this.textInput = input; }} />
);
}
}父组件的ref回调函数可以使用子组件的DOM。
function CustomTextInput(props) {
return (
<div>
<input ref={props.inputRef} />
</div>
);
}
class Parent extends React.Component {
render() {
return (
<CustomTextInput
inputRef={el => this.inputElement = el}
/>
);
}
}原理就是父组件把ref的回调函数当做inputRefprops传递给子组件，然后子组件<CustomTextInput>把这个函数和当前的DOM绑定，最终的结果是父组件<Parent>的this.inputElement存储的DOM是子组件<CustomTextInput>中的input。
同样的道理，如果A组件是B组件的父组件，B组件是C组件的父组件，那么可用上面的方法，让A组件拿到C组件的DOM。
理念
Facebook非常不推荐会打破组件的封装性的做法，多级调用确实不雅，需要考虑其他更好的方案去优化
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
