React基础学习二

一、React.createElement的理解使用

根据指定的第一个参数创建一个react元素

React.createElement(
  type,
  [props],
  [...children]
)

第一个参数（必填）：传入类似html的标签，比如：ul、li
第二个参数（选填）：表示的是属性，比如：className
第三个参数（选填）：子节点，比如：要显示的文本
例子：

var child1 = React.createElement('li', null, 'one');
var child2 = React.createElement('li', null ,'two');
var content = React.CreateElement('ul', {
    
    className: 'textStyle'}, child1, child2);
ReactDOM.render(content, document.getElementByid("example"));

二、ReactDOM.render的理解和使用

react最基本的方法，用于将模板转换为HTML语言，渲染DOM，并插入指定的DOM节点

ReactDOM.render(
  element: React$Element<any>, //元素
  container: Container, //挂载得到的节点
  callback: ?Function //渲染完的回调函数
)

三、React.createClass()的理解和使用

1、用于生成一个组件类
2、所有组件类都必须有自己的render方法，用于输出组件
3、组件类的第一个字母必须大写，否则会报错
4、只能包含一个顶层标签，否则会报错
5、给组件标签添加属性时，需要注意两个地方，就是把class属性写成className，for属性写成htmlFor，这是因为class和for时JS里面的保留字
6、与extends React.Component的区别

第一、语法的区别

extends React.Component： 使用的是ES6类，通常这会与Babel之类的一起使用，将ES6编译为ES5在浏览器中工作。 通过上面的写法，用到了constructor，需要调用super()将props传递给React.Componen。对于React更改，我们从React.Component扩展得到一个名为“Contacts”的类， 而不是直接调用React.createClass，减少了的React模板的使用，更多的用到了JavaScript。
React.createClass： 指定React类的变量Contacts ， 运用render函数来完成一个典型的基础组件定义

第二、propTypes and getDefaultProps

extends React.Component： propTypes属性是一个Object，我们可以在其中声明每个prop的类型。 getDefaultProps属性是一个返回Object来创建初始props的函数。
React.createClass： 将propTypes、getDefaultProps用作实际Contacts类的属性，而不是作为createClass定义Object的的属性。

第三、State区别

extends React.Component： 将所有状态声明为构造函数中的一个简单的初始化属性
React.createClass： getInitialState函数，它只是返回一个初始状态的对象。

第四、“this”的区别

extends React.Component： 不会自动绑定
React.createClass： 使用React.createClass会自动绑定this的值到组件上

第五、Mixins

extends React.Component： 不支持React mixins
React.createClass： 可以使用mixins属性将mixin添加到组件，该属性需要一个可用的mixin数组

示例：
React.createClass

import React from 'react';
var SomeMixin = {
    
    
  doSomething() {
    
    
  }
};
const Contacts = React.createClass({
    
    
  mixins: [SomeMixin],
  // 是一个Object，我们可以在其中声明每个prop的类型
  propTypes: {
    
    
  },
  // 是一个返回Object来创建初始props的函数
  getDefaultProps() {
    
    
    return {
    
    
    };
  },
  // 返回一个初始状态的对象
  getInitialState () {
    
    
    return {
    
    
    };
  },
  handleClick() {
    
    
    console.log(this); // React Component instance
  },
  render() {
    
    
    return (
      <div onClick={
    
    this.handleClick}></div>
    );
  }
});
export default Contacts;

extends React.Component：

import React from 'react';
class Contacts extends React.Component {
    
    
  constructor(props) {
    
    
    super(props);
    this.state={
    
    };
    this.handleClick2 = this.handleClick2.bind(this);
  }
  handleClick1() {
    
    
    console.log(this); // null
  }
  handleClick2() {
    
    
    console.log(this); // React Component instance
  }
  handleClick3() {
    
    
    console.log(this); // React Component instance
  }
  render() {
    
    
    return (
      <div>
        <div onClick={
    
    this.handleClick1}></div>
        <div onClick={
    
    this.handleClick2}></div>
        <div onClick={
    
    this.handleClick3.bind(this)}></div>
      </div>
    );
  }
}
Contacts.propTypes = {
    
    
};
Contacts.defaultProps = {
    
    
};
export default Contacts;