React不使用JSX创建元素，以及传值

1. 不使用JSX创建元素:React.createElement(DOM名称，节点属性，DOM中写入的内容)

    const childa = React.createElement(
           'h1',
           {className:"childa"},
           'hello'
       )
       ReactDOM.render(
           childa,
           document.getElementById("app")
       )
   

2. 显示子元素：在组件的调用处中间可以写入DOM节点的内容（和cue插槽的内容相同）React.Children.map(this.props.children，回调函数)

3. Props验证：组件名.propTypes = {React.PropTypes.string},类似于vue props验证,当传入的数据和类型不同时，在控制台会抛出警告，函数组件props验证和类组件相同，出于性能方面的考虑，propTypes仅在开发模式下进行检查,在上线时，类型肯定需要保持正确性，所以直接把校验模块删除

4. 验证单个子元素：如果使用React.PropTypes.element.isRequired.传入的子元素（插槽）只能有一个（插槽的内容只能传入一个）

   children:React.Proptypes.element.isRequired
   

5. 组件默认值：组件名.defaultProps ={key:val}

6. React创建组件组件的三种方式

   class 组件名 extends React.Component{}
   函数function 组件名(){}
   es5:  let 变量名 = React.CreateClass({}) 和类方法基本一致
   

7. es5组件语法：

   使用props默认值：getDefaultProps() {return{}}

   使用state默认值：getInitialState(){return{}}

8. 事件：采用小驼峰式，如onClick,onChange,需要传入表达式，注意this指向，推荐在constructor修改this指向，比较直观

   调用方式:onClick= {this.add.bind(this)}
   		onClick = {()=>this.add(20)}
   

9. bind：bind方法用法和call，apply基本一致，bind（）会把原有的方法摧毁，返回一个改变过this指向的新方法

10. event：默认事件中有event事件对象，不用考虑兼容性，event事件对象和其他参数一起传入方法时，事件对象要放在形参末尾

11. 声明周期：概念同vue,钩子函数首次渲染只处罚前两个

    • componentWillMount：在渲染真实DOM前调用

    • componentDitMount：在第一次渲染DOM后调用

    • componentWillReceiveProps：接收一个新的props值调用，只接受props，不接受state时可使用该钩子函数

    • shouldComponentUpdate：返回一个布尔值，在组件接收到新的props或者state时被调用，在某些情况下，只变动state中的数据而不让视图发生变更时，可以调用该钩子函数

    • componentWillUpdate：组件变更前（还没有渲染）调用

    • componentDidUpdate：组件变更后（渲染DOM）调用

    • componentWillUnmount：在组件从DOM中移除之前立刻被调用