React.createClass()
说明
用于创建组件
参数为一个对象 或 {}包裹的对象
使用示例
必不可少的结构:render :function(){return React.DOM.*(…);
var counter = React.createClass({
name : "counter",
Mixin:[logMixin],
propTypes:{
count: React.PropTypes.number.isRequired,
},
render :function(){
return React.DOM.span(null,this.props.count);
}
});
工厂方法创建组件
//创建一个实例
var myComponent = React.createClass({
render: function(){
return React.DOM.span(null,"I'm so custom");
}
});
//工厂方法
var ComponentFactory = React.createFactory(myComponent);
ReactDOM.render(ComponentFactory(), document.getElementById("2") );
React.DOM.*()
说明
React.DOM.* 是预定义好的HTML集合
第一个参数:属性 null 或 {属性1,… ,属性n}
第二个及以后:子元素 也可以是 React.DOM. 可以没有子元素,如下列 React.DOM.textarea只有属性
使用示例
React.DOM.div(null,
React.DOM.textarea({
value : this.state.text,
onChange: this._textChange,
}),
Counter
);
React.render()
说明
这是用于渲染的方法,注意是用,将各参数隔开,代码嵌套太长容易忘记
使用示例
ReactDOM.render(
React.createElement(Textarea,{defaultText:"Bob",}),
document.getElementById('app')
);
React.createElement()
说明
用于创建节点
第一个参数:创建节点使用的组件
第二个参数:组件属性
第三各及以后:子元素(可以没有)
使用示例
React.createElement(Textarea,{defaultText:"Bob",})
综合代码示例
生命周期
var logMixin = {
_log: function(methodName, args) {
console.log(this.name + '::' + methodName, args);
},
componentWillUpdate: function() {this._log('componentWillUpdate', arguments);},
componentDidUpdate: function() {this._log('componentDidUpdate', arguments);},
componentWillMount: function() {this._log('componentWillMount', arguments);},
componentDidMount: function() {this._log('componentDidMount', arguments);},
componentWillUnmount: function() {this._log('componentWillUnmount', arguments);},
};
var Counter = React.createClass({
name: 'Counter',
mixins: [logMixin],
propTypes: {
count: React.PropTypes.number.isRequired,
},
render: function() {
return React.DOM.span(null, this.props.count);
}
});
var TextAreaCounter = React.createClass({
name: 'TextAreaCounter',
mixins: [logMixin],
propTypes: {
defaultValue: React.PropTypes.string,
},
getInitialState: function() {
return {
text: this.props.defaultValue,
}
},
_textChange: function(ev) {
this.setState({
text: ev.target.value,
});
},
render: function() {
var counter = null;
if (this.state.text.length > 0) {
counter = React.DOM.h3(null,
React.createElement(Counter, { count: this.state.text.length, })
);
}
return React.DOM.div(null,
React.DOM.textarea({
value: this.state.text,
onChange: this._textChange,
}),
counter
);
}
});
var myTextAreaCounter = ReactDOM.render(
React.createElement(TextAreaCounter,{ defaultValue: "Bob", }),
document.getElementById("app")
);
注意的点
setState()的用法,里面放调用组件的属性子集
示例
_***Change: function(ev){
this.setState({
//某属性 :事件发生后的新值
//eg:
text : ev.target.value,
}