1.react 我们应该尽量放在cdn
ReactDOM.render会选择一个元素节点，然后把react元素写进去
一个react JSX元素也是一个对象
多次render会重新更新界面，且只更新变动的部分，
diff算法：
可以用一个function来定义一个组件，也可以用class来定义，es6的class其实是一个语法糖，继承模型还是基于原型链，他的本质其实是一个function
当一个对象调用静态或原型方法时，如果该对象没有“this”值（或“this”作为布尔，字符串，数字，未定义或null) ，那么“this”值在被调用的函数内部将为 undefined。不会发生自动包装。即使我们以非严格模式编写代码，它的行为也是一样的，因为所有的函数、方法、构造函数、getters或setters都在严格模式下执行。因此如果我们没有指定this的值，this值将为undefined。
如果我们使用传统的基于函数的类来编写上述代码，那么基于调用该函数的“this”值将发生自动装箱。
props是什么，是react组建的属性，只读
使用class改写function
引入state
将生命周期方法添加到 Class 中，生命周期和setState
1、初始化：初始进入页面 → constructor → componentWillMount → render → componentDidMount → componentWillUnmount；
这里需要注意的是：componentWillMount中若使用setState，其state会被合并到初始数据当中。那么，react是怎么样处理合并的呢？为什么要这样处理呢？在componentDidMount中，state又是怎么处理的？本文会在下面讲解生命周期流程的部分，来解答说明。
2、更新：setState → componentWillReceiveProps → shouldComponentUpdate → componentWillUpdate → render → componentDidUpdate → componentWillUnmount。
更新流程需要提到两点：一点是componentWillReceiveProps中使用setState，state会被收集储存起来，这里是区别于上面componentWillMount中state合并到初始数据中的。这里提一下：shouldComponentUpdate如果return => false，则不会执行更新(render)。
1、首先，进入页面，会初始化页面数据(state, props, context等…)，等待备用；
2、然后，设置生命状态为：MOUNTING，这个状态下面会说明它的用途，这里我们先按照流程继续往下走；
3、接下来，在componentWillMount中，setState操作，只是把state合并到初始化状态中，而根本不会触发render ；在这里更新state，就等同于直接写在this.state中，所以，在此生命周期中的setState根本没有意义；
4、执行到这里，生命状态 会被重置为 null，之后是渲染页面(即执行render)；
5、最后，渲染完以后，执行componentDidMount，这里使用setState即会正常触发重新渲染了，更新state。(接下来，就是更新流程了！！)
1、首先，react会比较前后元素、状态等是否不同，如果不同则正式发起更新；
2、然后，生命状态 被设置为RECEIVE_PROPS(注意：此时生命周期中，setState不会触发更新，而是会做其他处理)；
3、接下来，componentWillReceiveProps中的setState就不会执行更新，而是合并挂载起来，等待render时统一更新；
4、到这里，生命状态 会重置为null；然后shouldComponentUpdate中会判断是否更新；之后是componentWillUpdate。
敲黑板了！！！！ shouldComponentUpdate和componentWillUpdate执行的时候，生命状态 已经被重置为null，在它们里面的setState会触发更新，那么在其间使用呢？会造成什么？答案就是：在一个更新周期还没有render之前，再次发起updateComponent，直接导致递归更新，死循环！相信我！等待你的，就是浏览器崩溃！！所以在他们里面🚫禁止🚫使用setState。
5、最后，渲染页面；再执行componentDidUpdate；它里面执行setState，会触发更新，不同的是render完成之后再发起的reRender。虽然这儿区别于上面两个生命周期中使用的情况，但是会一遍一遍的更新，这肯定也是不合理的，所以需要有条件的使用setState。
最后呢，简单介绍一下，退出页面的流程。此流程中， 首先生命状态也会被赋予值为UNMOUNTING， 然后执行componentWillUnmount，最后生命状态重置为null，做卸载页面组件和状态等处理。顺便提一下，在componentWillUnmount中使用setStat，因为等待的是页面卸载，所以改变state是没有意义的。
生命周期中setState的使用情况：
无意义使用：componentWillMount，componentWillUnmount；
有条件使用：componentDidUpdate；
禁止使用：componentWillUpdate，shouldComponentUpdate；
正常使用：componentWIllReceiveProps，componentDidMount。
生命周期中setState是否触发更新：
componentWillMount和componentWillReceiveProps中，setState会被react内部处理，而不触发render；
其他生命周期均正常出发更新渲染。
setState的执行原理，可以分为两类：
1、批量更新类：即react内部的执行函数，执行setState的执行逻辑，都是批量更新处理，其中包括：react内部事件(合成事件)和生命周期；
2、非批量更新类：即上面两种情况以外的情况，经常见到的：原生事件、setTimeout、fetch等等；
再讲解之前，先说明两个概念：
1、事务：可以理解为，一个正常的函数外层又被包裹了一层。这层包裹处理，包括一个或多个的函数执行前的处理函数(initialize函数)、一个和多个函数执行后的处理函数(close函数)；React很多的逻辑处理，都使用了事务的概念；
2、合成事件和原生事件的关系和区别：
区别：原生事件就是addEventListener写法的事件！而合成事件，就是直接书写react中的onClick、onChange等；
关系：合成事件可以理解为react对原生事件的包裹封装；原生事件相当于上面事务概念中的正常的函数，而经过包装处理形成的事务，就是react中的合成事件。
事实上，每个setState都是会直接触发render更新的。只是react经过内部处理，让它在一些情况下不会触发render(生命周期已说明)；还有一些情况，就是同事存在多个setState的时候，不是每个setState都会触发，而是将state统一收集起来，进行统一render处理
isBatchedUpdates是批量更新状态，通过修改它来开启和关闭批量更新；updateComponent函数内部执行的是上面生命周期的更新流程
原生事件中，setState会直接触发render更新，所以栗子在原生事件中的执行顺序是，先render然后执行callback，setState事务执行完毕，然后执行打印。打印拿到的就是setState更新之后的状态，以此类推，所以出现了上面原生事件的打印顺序，这就很明了了。
而合成事件则不然，它直接发起事务1，在函数执行之前开始批量更新状态(isBatchedUpdates为true，默认值是false！)，开启之后，执行合成事件中的setState，此时处于批量更新状态，这时setState不会触发render更新，而是做了两件事情：收集state和callback。这里我贴上几行源码，有助于理解：
默认批量更新是处于关闭的状态，那么会直接执行batchedUpdates(此函数就是更新渲染函数)。这里就是批量更新状态是否开启的分叉口：当开启批量更新时，则是把状态push到数组(dirtyComponents)中。那么收集完成，在哪里处理呢？我们继续往下看。
依照上面的流程图，收集完状态以后，执行事务的close函数，它里面做了些什么呢？一个是关闭批量更新状态，一个是正式发起对收集的状态的处理，这里又开启了一个新事务：即事务2。事务2，经过复杂的处理，处理更新了收集的state，也就是dirtyComponents。处理完以后，执行事务2的close函数，它重置了整个更新的状态，也是在这里处理执行事务1中收集的callback；
让我们回头看看上面的栗子
setState只是收集了state和callback，并没有做其他处理，然后直接执行了下面的console，所以！！这时的num一定是初始值1，然后下面继续收集，再下面console还是1；
当收集完以后，render！！
最后处理callback，也就执行了callback里面的console。
到这里在两种执行场景下面的setState的执行逻辑就完全讲完了。这里说到了一些源码，但只是顺着setState这条线进行了分析说明，欢迎同学们更深层次的研究！
最后，总结一下setState：
1、setState的执行，分为两大类：一类是生命周期和合成函数；一类是非前面的两种情况；
2、两种类型下，setState都是同步执行，只是在批量更新类中，state和callback被收集起来延迟处理了，可以理解为数据的异步执行；而非批量更新类中的setState直接触发更新渲染。
3、callback与state同时收集，处理是在render之后，统一处理的。
原文1：https://www.jianshu.com/p/e09cbecca1d1
原文2:https://www.jianshu.com/p/cdb4ad82df20
原文3:https://zh-hans.reactjs.org/docs/components-and-props.html
