- 父组件向子组件通过可以通过props,但是父组件如果想要访问子组件的DOM元素或者子组件本身（虽然这种情况比较少见），可以用refs。
父组件访问子组件的推荐办法：使用函数
render: function() {
return (
<TextInput
ref={function(input) {
if (input != null) {
input.focus();
}
}} />
);
},
这个ref函数在装载后或者消毁时执行，参数input就是TextInput这个组件的实例，这样就可以直接对组件实例本身进行操作。中间的判断是基于组件消毁时为null的情况进行规避，防止内存泄漏。
表单元素在react中非常特殊，因为要和用户交互相关联，所以和其它HTML元素不太一样。
在JSX中可以嵌入各种表达式，只需要将它们用{}包起来就行。在JSX中也可以使用各类的JS语法，也必须用{}包起来。大原则就是：使用<>来使用HTML语法，使用{}来调用JS语法。
JSX允许在模板中插入一JS变量，如果该变量是一个数组，就会展开这个数组的所有成员。
<script type="text/babel">
let names = [
<h1 key={'a'}>Hello World!</h1>,
<h2 key={'b'}>React is coool!</h2>,
<h3 key={'c'}>Now I'm learning it~</h3>
]
ReactDOM.render(
<div>
{names}
</div>,
document.getElementById('root')
)
</script>
- 创建组件
- 创建组建有多种办法，React.createClass()是比较常用的一种ES5方法，除此之外还有class方法和函数式方法。推荐使用class方法。
- 组建只能包含一个顶层标签。
- 在组件一级可以加入任意属性，实例化后通过this.props可以使用这些属性。
- 添加组件属性，for要写成htmlFor，class要写成className，因为保留字的关系。
6. 获取组件的子节点：this.props.children。一般搭配React.Children使用，这是一个例外情况，单独记。
- 使用propTypes来验证组件属性的类型
<script type="text/babel">
let Hello = React.createClass({
propTypes: {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired,
},
render: function () {
return <h1>Hello, {this.props.name}, my age is {this.props.age}</h1>
}
})
ReactDOM.render(
<Hello name={'小明'} age={11} />,
document.getElementById('root')
)
</script>
- JSX模板中样式的写法
style={{opacity: this.state.opacity}}
第一个大括号是JS语法，第二个是对象。
- AJAX
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
}
在组件装载成功后，发出请求，但是这个请求本身是异步的；有可能组件缷载时请求还没完，所以要在组件将要缷载时废止这个请求。
