1、Hello React 简单组件搭建。
var HelloReact = React.createClass({
render: function() {
return (
<div>Hello React!</div>
)
}
});
ReactDOM.render(
<HelloReact />,
document.querySelector('body');
)
2、React 生命周期(初始化、更新和销毁);
- getDefaultProps // 创建组建props
- getInitalState // 实例化状态
- componentWillMount // 挂载前
- componentDidMount // 挂载后
- componentWillReceiveProps // 属性被改变时
- shouldComponentUpdate // 是否跟新
- componentWillUpdate // 更新前
- componentDidUpdate // 更新后
- componentWillUnmount // 销毁前
3、React 数据初始化，而React为我们提供了两种方式来向组件传递数据，即 props 和 state。
// props 传递
var HelloReact = React.createClass({
getDefaultProps: function() {
return {
data: " "
}
},
render: function() {
return (
<div>
{this.props.data}
</div>
)
}
})
ReactDOM.render(
<HelloReact data={" Hello React! "} />,
document.querySelector("body")
)
// state 不通过外部传递
var HelloReact = React.createClass({
getInitialState:function() { return data: " " },
componentDidMount:function() { this.requestData(); },
requestData: function() {
$.ajax({
url: " http://www.baidu.com ",
data: {},
success: function(data) {
this.setState({
data: data
})
}
}.bind(this));
},
render: function() {
return (
<div>
{ this.state.data }
</div>
)
}
});
React.render(
<HelloReact />,
document.querySelector("body");
)