React的ref是啥？强力一波

Cruise_Chan 发布于2019-08-05 16:58 / 697人阅读

摘要：原理就是父组件把的回调函数当做传递给子组件，然后子组件把这个函数和当前的绑定，最终的结果是父组件的存储的是子组件中的。

React ref

理解：通过指定ref获得你想操作的元素，然后进行修改

string 使用方法

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 (
            
                 { this.textInput = input }} />
            
        )
    }
}

input参数是哪来的

回调函数将接收当前的DOM元素作为参数，然后存储一个指向这个DOM元素的引用。那么在示例代码中，我们已经把input元素存储在了this.textInput中，在focus函数中直接使用原生DOM API实现focus聚焦。

回调函数什么时候被调用

答案是当组件挂载后和卸载后，以及ref属性本身发生变化时，回调函数就会被调用。

不能在无状态组件中使用ref

原因很简单，因为ref引用的是组件的实例，而无状态组件准确的说是个函数组件(Functional Component)，没有实例。

理解：class组件-对象组件-有实例无状态组件-函数组件-无实例

上代码：

function MyFunctionalComponent() {
    return ;
}

class Parent extends React.Component {
    render() {
        return (
             { this.textInput = input; }} />
        );
    }
}

父组件的ref回调函数可以使用子组件的DOM。

function CustomTextInput(props) {
    return (
        
            
        
    );
}

class Parent extends React.Component {
    render() {
        return (
             this.inputElement = el}
            />
        );
    }
}

原理就是父组件把ref的回调函数当做inputRefprops传递给子组件，然后子组件把这个函数和当前的DOM绑定，最终的结果是父组件的this.inputElement存储的DOM是子组件中的input。
同样的道理，如果A组件是B组件的父组件，B组件是C组件的父组件，那么可用上面的方法，让A组件拿到C组件的DOM。

理念

Facebook非常不推荐会打破组件的封装性的做法，多级调用确实不雅，需要考虑其他更好的方案去优化

idc机房托管超融合服务器这一波 ref Refs ref_time

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/59309.html

React的ref是啥？强力一波

摘要：原理就是父组件把的回调函数当做传递给子组件，然后子组件把这个函数和当前的绑定，最终的结果是父组件的存储的是子组件中的。 React ref 理解：通过指定ref获得你想操作的元素，然后进行修改 string 使用方法 var input = this.refs.myInput; var inputValue = input.value; var inputRect = input.g...

MorePainMoreGain 2019-08-26 18:27 评论0 收藏0
受控组件和非受控组件，强力一波

摘要：受控组件其值由控制的输入表单元素称为受控组件。如果让表单数据由处理时，替代方案为使用非受控组件。使用非受控组件时，通常你希望可以为其指定初始值，但不再控制后续更新。受控组件其值由React控制的输入表单元素称为受控组件。 class NameForm extends React.Component { constructor(props) { super(props);...

lavor 2019-08-05 16:57 评论0 收藏0
受控组件和非受控组件，强力一波

摘要：受控组件其值由控制的输入表单元素称为受控组件。如果让表单数据由处理时，替代方案为使用非受控组件。使用非受控组件时，通常你希望可以为其指定初始值，但不再控制后续更新。受控组件其值由React控制的输入表单元素称为受控组件。 class NameForm extends React.Component { constructor(props) { super(props);...

FrancisSoung 2019-08-26 18:27 评论0 收藏0
ES6：promise是啥？强力一波！

摘要：了解记录学习到的知识点，学习阮一峰大神书的一些心得回调地狱感受一下吓人不。。。。。改良一波舒服多了有没有是一种异步的解决方案，比传统的回调更合理且强大。简单来说就是一个容器，里面存在着某个未来发生的事件通常是一个异步操作的结果。 title: ES6：了解promisesubtitle: 记录学习到的知识点，学习阮一峰大神es6书的一些心得回调地狱感受一下： let...

adam1q84 2019-08-23 15:43 评论0 收藏0
ES6：promise是啥？强力一波！

摘要：了解记录学习到的知识点，学习阮一峰大神书的一些心得回调地狱感受一下吓人不。。。。。改良一波舒服多了有没有是一种异步的解决方案，比传统的回调更合理且强大。简单来说就是一个容器，里面存在着某个未来发生的事件通常是一个异步操作的结果。 title: ES6：了解promisesubtitle: 记录学习到的知识点，学习阮一峰大神es6书的一些心得回调地狱感受一下： let...

SnaiLiu 2019-08-05 18:12 评论0 收藏0