开发者学堂课程【React前端开发入门与实战：React 基础知识——事件和组合 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/365/detail/4356
React 基础知识——事件和组合
内容介绍：
一、Event 事件
二、组合
三、组合 CHILDREN
一、Event 事件
开发客户端编程，不可避免的是要去挖事件，事件和传统的 HTML 是不一样的，react 把我们想要处理的操作和 UI 放在一起，进行内聚，但是传统的不可避免是需要全局变量污染，后面状态维护会很难搞，而 React 解决了全局污染问题。
可以通过设置原生 dom 组件的 onEventType 属性来监听 dom 事件，例如 onClick, onMouseDown ，在加强组件内聚性的同时,避免了传统 html 的全局变量污染，把组件所有的行为状态放入组件内部，组件可渲染很多个，因为每个组件都是自己的 。
var LikeButton = React.createclass({
getInitialState: function) {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function( {
var text = this.state.liked ? 'like' : "haven\'t liked';
return (
<p onClick={this.handleclick}>
You {text} this. click to toggle.
</p>
);
React.render(
<LikeButton />,
Document.getElementById(‘container’)
)
代码运行结果：
二、组合
推荐组合不推荐继承，react 不支持继承，可以像使用原生 dom 组件一样使用自定义的组件：
var A = React.createClass(i
render(i
return <a href=*#'>a</a>
}
});
var B = React.createClass({
render(){
return <i><A />!</i>;
};
React.render(<B /> , document.getElementById( ' container ' ));
代码运行结果：
三、组合 CHILDREN
自定义组件中可以通过 this.props.children 访问自定义组
件的子节点
var B = React.createClass(i
render(i
return <ul>
{React.Children.map(this.props.children, function(c){
return <li>{c}</li>;
})}
</ul>;
}
});
React.render(<B>a href=#">1</a>2
</B> ,document.getElementById( ' container' ;）
代码运行结果：
