ref

[ZWkang]

render方法后，组件是不会返回实例供我们操作使用的。

Refs提供了一种访问DOM节点或在render方法中创建的React元素的方法。

它组件被调用会新建一个实例，而refs就会指向这个实例

简单的input ref获取值例子
16.3以后的例子

我们也可以通过获得dom的引用从而去修改值
https://codesandbox.io/s/4jp88wk7kx
不过建议尽量少用。(refs中的值同样支持字符串。)

对类组件进行ref操作
https://codesandbox.io/s/3831340jkp
获得组件实例后的this。

对高阶包裹子组件如何获得ref引用呢？

https://codesandbox.io/s/p9r2qkl1jm
如果我们直接对wrappercomponennt进行使用ref，获取的是外部组件
子组件不能穿透获取。

那我们想。如果我们使用类似callback技术，将callback function在传递给childcomponent。我们是不是就能简单拿到了childcomponent的实例了呢。

example:
https://codesandbox.io/s/6jmlnmr3r

16.3以后的版本还多了一个forwardRef的功能 用来转发我们的ref
https://codesandbox.io/s/lxlmn93l0l

这使得我们不用再增加一些无用的get this的function去获取实例。

方便快捷

---

resource:

• ref官方文档
• ref gist
• 深入理解react技术栈