React复合组件

1、组合实例：
var Avatar =React.createClass({
render: function() {
return (
<div>
<ProfilePicusername={this.props.username} />
<ProfileLinkusername={this.props.username} />
</div>
);
}
});

var ProfilePic =React.createClass({
render: function() {
return (
<img src={'http://graph.facebook.com/'+ this.props.username + '/picture'} />
);
}
});

var ProfileLink =React.createClass({
render: function() {
return (
<a href={'http://www.facebook.com/' +this.props.username}>
{this.props.username}
</a>
);
}
});

React.render(
<Avatar username="pwh" />,
document.getElementById('example')
);
上面例子中，Avatar 拥有 ProfilePic 和 ProfileLink 的实例。
组件不能修改自身的 props -它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的关键性原则。Avatar 拥有 div、ProfilePic 和ProfileLink 实例，div 是 ProfilePic 和 ProfileLink 实例的父级（但不是拥有者）。

2、子级
可以编写<Parent><Child/></Parent>,使两个节点进行嵌套，Parent通过专门的this.props.childrenprops读取子级。this.props.children是不透明的

React.Children工具类：

React.Children 为处理 this.props.children 这个封闭的数据结构提供了有用的工具。

React.Children.map
object React.Children.map(object children,function fn [, objectcontext])

在每一个直接子级（包含在 children 参数中的）上调用 fn 函数，此函数中的 this 指向 上下文。如果 children 是一个内嵌的对象或者数组，它将被遍历：不会传入容器对象到 fn 中。如果
children参数是 null 或者 undefined，那么返回 null 或者undefined 而不是一个空对象。

React.Children.forEach
React.Children.forEach(object children,function fn [, object context])

类似于 React.Children.map()，但是不返回对象。

React.Children.count
numberReact.Children.count(object children)

返回 children 当中的组件总数，和传递给 map 或者 forEach 的回调函数的调用次数一致。

React.Children.only
objectReact.Children.only(object children)

返回 children 中仅有的子级。否则抛出异常。

3、子组件状态管理
对于大多数状态没有什么关系，但是对于使用this.state来在多次渲染过程中里维持数据的状态化组件，这样做潜在很多问题。多数情况下，可以通过隐藏组件而不是删除他们来绕过这些问题。
// 第一次渲染
<Card> <p>Paragraph 1</p> <p>Paragraph 2</p>
</Card> // 第二次渲染 <Card> <pstyle={{display:'none'}}>Paragraph
1</p> <p>Paragraph 2</p> </Card>

4、动态子级
如果子组件的位置会改变，或者有新的组件添加到列表开头情况会变得复杂。如果子集要在多个渲染阶段保持自己的特征和状态，这种情况下，你可以通过子集设置唯一标识key来区分。
render：function（）{
var results =this.props.results;

return(

<ol>

{results.map{function(result){

return <li keyi={result.id}>{result..text}</li>

})}

</ol>

);
}

当 React校正带有 key 的子级时，它会确保它们被重新排序（而不是破坏）或者删除（而不是重用）。 务必 把 key 添加到子级数组里组件本身上，而不是每个子级内部最外层HTML
上：

//
错误！
var ListItemWrapper= React.createClass({
render: function() {
return <likey={this.props.data.id}>{this.props.data.text}</li>;
}
});
var MyComponent =React.createClass({
render: function() {
return (
<ul>
{this.props.results.map(function(result) {
return <ListItemWrapperdata={result}/>;
})}
</ul>
);
}
});

//正确 :)
var ListItemWrapper= React.createClass({
render: function() {
return<li>{this.props.data.text}</li>;
}
});
var MyComponent =React.createClass({
render: function() {
return (
<ul>
{this.props.results.map(function(result) {
return <ListItemWrapperkey={result.id} data={result}/>;
})}
</ul>
);
}
});

也可以传递object 来做有 key 的子级。object 的 key 会被当作每个组件的 key。但是一定要牢记JavaScript 并不总是保证属性的顺序会被保留。实际情况下浏览器一般会保留属性的顺序，除了 使用
32位无符号数字做为 key的属性。数字型属性会按大小排序并且排在其它属性前面。一旦发生这种情况，React 渲染组件的顺序就是混乱。可能在 key 前面加一个字符串前缀来避免：

render: function() {
var items = {};

this.props.results.forEach(function(result){
//如果 result.id看起来是一个数字（比如短哈希），那么
//对象字面量的顺序就得不到保证。这种情况下，需要添加前缀
//来确保 key是字符串。
items['result-' + result.id] =<li>{result.text}</li>;
});

return (
<ol>
{items}
</ol>
);
}

5、数据流
React；里，数据通过上面介绍的props从拥有着流向归属者。这就是高效的单向数据绑定（one-way
data binding）：拥有着通过他的props或者state计算出一些值，并把这些值绑定到他们拥有的组件props上。因为这个过程会递归地调用，所以数据变化会自动在所有被使用的地方自动反应出来。