React学习小记1.16

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")      );