React组件中的refs

Refs to components

 原文地址：http://facebook.github.io/react/docs/more-about-refs.html

这次学习用到了refs，遇到了点问题，所以去看了一下官方文档，本文是跟据官方文档中介绍的refs总结其中的用法。

其实一句React的实现原理，组件的状态变化都是依据数据流的流动而改变的，从原则上讲获取组件实例的状况是不应该出现的，但是情况也不是绝对的，有的时候还是有这样的需求的。

1.The Ref returned from ReactDOM.render

从ReactDOM.render方法返回的ref

我们都知道，当我们的组件结构全部搭建完成，渲染我们的顶级组件时用的就是这个方法，但可能大家不知道的是，这个方法返回的就是我们顶级组件的组件实例对象。

var myComponent = ReactDOM.render(<MyComponent />, myContainer);

这里，我们获取的myComponent就是组件实例。注意，这个方法只是在顶级组件中有效。

2.The Ref Callback Attribute

当我们渲染一个组件时，可以给组件添加ref属性，我们给这个属性添加一个回调方法，当组件渲染（mounted）完毕时，就会调用这个回调函数。

render: function() {
return (
<TextInput
ref={function(input) {
if (input != null) {
input.focus();
}
}} />
);
},


可以看到，上边的TextInput是我们的组件，ref属性后边赋予了一个函数，这就是回调函数，传入的参数就是我们的组件实例。
当我们在dom节点如div中添加ref属性时，返回的是真实的dom节点，我们可以直接操作。

但是如果渲染的是组件的话，如上面的TextInput，我们只能调用在组件中定义的方法，上边调用的focus()方法就是在TextInput组件中定义的方法。

如果我们想要获取组件对应的浏览器中的对象，可以使用ReactDOM.findDOMNode(input)来获取dom节点。

3.The Ref String Attribute

ref的另外一个使用方法就是给ref属性一个字符串，相当于给组件起了一个名字，渲染完成后，就可以使用this.ref.name的方式获取组件类的实例。

同样，如果是div一类的，获取到的是dom节点。如果是自定义组件，获取到的是组件类实例。

var App = React.createClass({
componentDidMount : function(){
var node1 = this.refs.myinput;
var node2 = ReactDOM.findDOMNode(this.refs.myson);
},
render: function() {
return (
<div>
<input ref="myinput" />
<Son className="son" ref="myson"/>
</div>
);
}
});以上就是ref的使用方法。
下面是文档中的一个例子：

var MyComponent = React.createClass({
handleClick: function() {
// Explicitly focus the text input using the raw DOM API.
if (this.myTextInput !== null) {
this.myTextInput.focus();
}
},
render: function() {
// The ref attribute is a callback that saves a reference to the
// component to this.myTextInput when the component is mounted.
return (
<div>
<input type="text" ref={(ref) => this.myTextInput = ref} />
<input type="button" value="Focus the text input" onClick={this.handleClick}/>
</div>
);
}
});

ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);


可以看到，在MyComponent中的input的ref是一个回调函数，在回调函数中将this.myTextInut赋予了返回的实例(this的指向就是当前的MyConponent实例)，之后，又在下一个input点击响应事件函数中调用了这个实例对象。
下面来翻译一下文档中的summary，有助于我们理解ref到底是做什么的。（注：可能不十分正确，但大意应该没错）

Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive

props

and

state

.

如果你觉得依靠互动性的props和state向某个特定子实例中传递消息不是很好的方式的话，refs是一个很好的解决办法。

They should, however, not be your go-to abstraction for flowing data through your application.

ref不应该成为你的应用中抽象的传递数据的方法。

By default, use the Reactive data flow and save

ref

s for use cases that are inherently non-reactive.

所以，在应用互动数据流的同时，refs适合于那些非互动性的实例。

补充一点：ref在stateless function中没法用的。

什么是stateless function呢？

function HelloMessage(props) {
return <div>Hello {props.name}</div>;
}
var ins = ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

HelloMessage就是一个stateless function。同时，这里的ins也是null。
This simplified component API is intended for components that are pure functions of their props. These components must not retain internal state, do not have backing instances, and do not have the component lifecycle methods.

这是文档中对sateless function的解释。

它是一个只依靠传递下来的props的纯函数，它们不包含state，实例，也没有组件生命周期对应的方法。

In an ideal world, most of your components would be stateless functions because in the future we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. This is the recommended
pattern, when possible.

文档的最后说道，在理想情况下，你的大部分的组件都应该是stateless function，这也是设计人员所憧憬的情况。