react.js入门笔记
react.js使用jsx语法，script标签的type值必须为“text/jsx“！
在jsx语法中遇到HTML标签（以<开头），就用HTML规则解析；遇到代码块（以{开头），就用js规则解析。
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。
数组：
var arr = [
<span>hello</span>,
<span>world</span>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById(“example")
)
输出：
<div><span>hello</span><span>world</span></div>
ReactDOM.render是React的基本方法，用于将模板转为HTML，并插入指定的DOM节点：(第一个参数为模板，第二个参数为dom对象)
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘example')
)
React.createClass是React创建组件的方法，组件标签必须首字母大写， 组件中包含：
1. this.props对象，用来获取属性值, {…this.props}用来复制组件的所有属性，如：
var CheckLink = React.createClass({
render: function() {
// 这样会把 CheckList 所有的 props 复制到 <a>
return <a {...this.props}>{'√ '}{this.props.children}</a>;
}
});
ReactDOM.render(
<CheckLink href="/checked.html" target="_blank">
Click here!
</CheckLink>,
document.getElementById('example')
);
可以使用结构赋值的方式传递属性：
var FancyCheckbox = React.createClass({
render: function() {
var {checked, ...other} = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} {...other}>
{this.props.children}
</div>
);
}
});
React.render(
<FancyCheckbox checked={true} name="myname" onClick={console.log.bind(console)}>
Hello world!
</FancyCheckbox>,
document.getElementById('example')
);
这里的...other会包含checked属性外的其他（name, onClick）属性
2.this.props.children用来获取标签内的所有子节点
3.propTypes对象用来验证组件实例的属性，如：
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1>{this.props.title}</h1>;
}
})
这里验证title属性的值必须存在，且必须是字符串，否则在控制台给出警告！
4.getDefaultProps方法用来设置组件属性的默认值:
var Mytitle = React.createClass({
getDefaultProps : function() {
return {
title : 'hello world'
};
},
render: function() {
return <h1>{this.props.title}</h1>;
}
})
ReactDOM.render(
<Mytitle title="haha" />,
document.getElementById('example')
)
5.ref用来获取真实的DOM：
var MyForm = React.createClass({
myClick: function() {
this.refs.myInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myInput" />
<input type="button" value="click" onClick={this.myClick} />
</div>
)
}
})
6.this.state，用来改变组件的状态，以便和用户交流，getInitialState方法用于定义初始状态，返回一个对象！这个对象可以通过this.state属性读取！
var MyTest = React.createClass({
getInitialState: function() {
return {
stated: true
}
},
myClick: function() {
this.setState({stated : !this.state.stated});
},
render: function() {
var text = this.state.stated ? 'yes, I can!' : 'no, I can\'t';
return (
<div>
<span>Can you speak English?</span>
<input type="button" value="回答" onClick={this.myClick} />
<div>{text}</div>
</div>
)
}
})
ReactDOM.render(
<MyTest />,
document.getElementById('example')
)
（由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。 ）表单的值需要通过this.state+onchange获取操作：
var MyForm = React.createClass({
getInitialState: function() {
return {
value: ''
}
},
myChange: function(e) {
var value = e.target.value,
value = /^\d*$/.test(value) ? value : '';
this.setState({value: value});
},
render: function() {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.myChange} />
请填写电话号码！
<div>{value}</div>
</div>
)
}
})
二.组件的生命周期
组件的生命周期分为三个状态：
Mounting: 已插入真实DOM
Updating: 正在被重新渲染
Unmounting: 已移除真实DOM
React为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did函数在进入状态之后调用，三种状态共有五种处理函数：
componentWillMount() componenrDidMount() componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object nextProps, object nextState) componentWillUnmount()
此外,React还提供两种特殊状态处理函数：
componentWillReceiveProps(object nextProps): 已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState): 组件判断是否重新渲染时调用
组件style属性的设置方式需要写成style={{display: this.state.display}}
