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异常不引荐会突破组件的封装性的做法，多级挪用确切不雅观，须要斟酌其他更好的计划去优化