浅谈ReactDOM的refs方法

众所周知,在react中我们可以利用ReactDOM中的render方法得到一个组件的实例,然后对组件进行一些操作,但在组件内,JSX是不会返回一个组件的实例的,如果要拿到一个DOM节点,那么就要用到refs方法;

refs只是React组件中一个特殊的props,可以附加到任何一个组件上,组件被调用的时候会创建一个该组件的实例,而refs指向的就是这个实例;

refs 可以是一个回调函数,且在组件被挂载后立即执行:

浅谈ReactDOM的refs方法_第1张图片
此例中我们得到input 组件的是真实实例,所以可以通过点击事件来调用focus(),把refs放到了原生的DOM组件input中,我们也可以通过refs 来获取DOM节点

refs同样支持字符串,操作DOM,我们不仅可以使用findDOMNode方法,也可以用refs;


浅谈ReactDOM的refs方法_第2张图片
获取一个React组件的引用,既可以使用this来获取当前React组件,也可以使用refs获取你拥有的子组件的引用

在React中为了防止内存泄漏,当卸载一个组件的时候,组件中所有的refs就会变成null

注意:findDOMNode和refs都无法用于无状态组件中,因为无状态组件挂载时只是方法的调用,没有新建实例。

你可能感兴趣的:(浅谈ReactDOM的refs方法)