1.jsx就是React.createElement的语法糖，浏览器是不能直接识别的，需要通过babel，插件：babel-plugin-transfrom-react-jsx来进行转译，转换为react的内部方法。
    使用jsx的三点注意：
    （1）使用className,htmlFor来替代class,for关键字
    （2）尽量使用三目运算符而不是这种： 

    1. 0 && <div>ssdf</div> // 0

    (3)createElement接受三个参数： html标签名字、属性、子元素

    2.函数组件和类组件的区别
    （1）props加载的方式不同，函数组件通过参数，类组件通过继承
    （2）类组件里面可以定义更多的函数在实例上，直接通过this就可以调用，函数组件也可以通过定义内部函数变量使用或者定义在外面

    1. function Test(props) {
    2.     const getValue() {
    3.       if () {
    4.         props.xxxx();    
    5.     }
    6.   }
    7. }
    8. function getValue2() {}

    （3）其实二者在性能上的差别不是很大，只需要考虑是否需要维护自己内部的状态，如果是纯粹的UI展示组件，则可考虑函数组件。

    3.受控组件和非受控组件的最大区别： 当前组件的值是在state中还是自己维护。在项目中大多数情况下都是受控的。
    4.生命周期
    （1）挂载阶段：
    constructor .
    static getDerivedStateFromProps
    (componentWillMount)
    render
    componentDidMount
    （2）更新
    static getDerivedStateFromProps
    shoudcomponentUpdate
    (componentWillReceiveProps)
    (componentWillUpdate)
    render
    getSnapshotBeforeUpdate
    componentDidUpdate
    下面三个即将过时：

    （3）卸载
    componentWillUnmount
    思考： 应该在哪个生命周期发送请求？
    一般我们认为在生命周期约靠前越能更早获得加载结果，其实没有相差多少。
    最好放在componentDidMount，因为在服务端没有Dom的概念，所以不会执行该生命周期，如果放在componentWillMount里面，且用到window等这种浏览器相关的变量则无法获取到

    5.event事件

    1. clickHandle(e) {
    2.     const text = e.currentTarget.innerText;
    3.   setTimeout(() => {
    4.       console.log(text);//normal
    5.     console.log(e.currentTarget.innerText)//undefined
    6.   }, 1000)
    7. }

    可以通过上面的例子发现，react自己封装来一套事件机制，当点击事件发生的时候，先代理到自己的内部函数逻辑，再执行真正的函数的。并且都用的一个event实例。所以在处理异步的时候，e可能已经被改变。做了一层代理的目的（共享event）： 1.可以做优化 2.跨端 因为其他端没有浏览器的一套东西，自己实现可以有更好的兼容性

    6.关于事件绑定的问题
    在React基于VDOM，实现了一个合成事件层，所以并不会像DOM0级事件那样直接绑定到元素上，而是先绑定到合成事件层，this的指向就很难说是当下的这个组件了，所以采用显示绑定。

    1. constructor() {
    2.     this.renderFuncs = this.renderText.bind(this)
    3. }
    4. renderText() {
    5.     // todo
    6. }
    7. renderText2 = () => {
    8.     // todo
    9. }
    10. render() {
    11.     return (
    12.       <RenderText text={a} renderFunc={this.renderFuncs}/>
    13.         <RenderText text={a} renderFunc={this.renderText.bind(this)}/>
    14.         <RenderText text={a} renderFunc={() => this.renderText()}/>
    15.         <RenderText text={a} renderFunc={this.renderText2)}/>
    16.   )
    17. }

    上面写了很多种写法，推荐使用第一种和最后一种。
    当text没有发生变化的时候，子组件也会触发重新渲染，造成不必要的浪费，因为renderFunc是一个引用，使用bind后，每次返回一个新的函数（箭头函数也是同样）

    const {fromJS} = require(‘immutable’)
    可以通过引入这个库，达到引用不丢失的问题。互相干扰，
    深拷贝的问题：不应该断掉的不断掉引用，这也是应该在react里面最小更新的一种方法。