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