React学习总结(待补充)
1.介绍Redux，主要解决什么问题？数据流程是怎么样的？多个组件使用相同状态如何进行管理？
一、Redux是一个状态容器，解决了组件间的状态共享问题，实现了多组件通信，也是一种MVC机制。
二、首先，用户分发action。然后，store 接收action对象并传递给reducer，reducer根据当前 state 和收到的 action对象返回新的 state 。根据新的state更新view。
三、多组件使用相同状态。都放到同一个reducer里管理即可。
2.React-Redux到react组件的连接过程？
Provider为后代提供store：使用时在应用的最外层包一层，本质是上下文跨层级传递store。
connect为组件提供数据和方法：本质是高阶函数，连接React组件与Redux store，返回一个新的已经与Redux Store连接的组件类，实现多个组件使用相同状态。
3.React 中 keys 的作用是什么？
当我们指定key值时，key值会作为当前组件的id。如果遍历新的dom结构时，发现组件的id在旧的dom结构中存在，那么react会认为当前组件只是位置发生了变化，因此不会将旧的组件销毁重新创建，只会改变当前组件的位置，然后再检查组件的属性有没有发生变化，然后选择保留或修改当前组件的属性，因此我们可以发现如果我们指定了唯一的key值，如果只是打乱了数据源，数据源渲染出来的每一个子组件都是整体数据发生变化。
4.调用 setState 之后发生了什么？
在代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程。React会根据新的状态构建新的虚拟DOM树，然后通过新树和老树的节点差异对比，对界面进行最小化重渲染。
5.触发多次setstate，那么render会执行几次？
多次setState会合并为一次render，因为setState并不会立即改变state的值，而是将其放到一个任务队列里，最终将多个setState合并，一次性更新页面。
6.react中如何对state中的数据进行修改？setState为什么是一个异步的？
修改数据通过this.setState(参数1,参数2)，this.setState是一个异步函数，参数1是需要修改的数据对象（也可以是一个函数(prevState,prop)=>({})），参数2是一个回调函数，在数据修改完成后执行。
7.this.setState之后react做了哪些操作？
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
8.简述一下virtual DOM （虚拟dom）如何工作？
当数据发生变化，比如setState时，会diff新的virtual dom和老的virtual dom的差异，最后将差异更新到真实的DOM上
9.为什么虚拟 dom 会提高性能?
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法对新的虚拟DOM树和旧的虚拟DOM树进行比较得到差异，然后将差异应用到真实的DOM树上，对界面进行最小化重渲染，避免了没有必要的 dom 操作。
10.react diff 原理？
把树形结构按照层级分解，只比较同级元素。
给列表结构的每个单元添加唯一的 key 属性，方便比较。
React 只会匹配相同class的component（这里面的class指的是组件的名字）合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.
到每一个事件循环结束, React检查所有标记 dirty 的 component 重新绘制.
选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。
11.React 中 refs 的作用是什么？
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
1. ref设置为普通字符串
<button ref="myBtn"></button>
给元素定义ref属性，后续可以通过 this.refs.myBtn 来获取这个真实DOM对象
给组件定义ref属性，后续可以通过 this.refs.myBtn 来获取这个组件的实例对象
2.ref设置为箭头函数
<button ref="{ (sl) => { this.myBtn = sl } }"></button>
给元素定义ref属性，后续可以通过 this.myBtn 来获取这个真实DOM对象
给组件定义ref属性，后续可以通过 this.myBtn 来获取这个组件的实例对象
12.React 中有哪些构建组件的方式？
无状态函数和class类
13.有什么区别？
函数组件中，无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件，接收Props，渲染DOM，而不关注其他逻辑。
函数组件中没有this。
14.React 中this指向问题？
第一种：直接在元素中使用bind来指明当前this的指向
第二种：在构造函数constructor中改变this指向。
第三种：使用箭头函数改变this指向。
15.为什么列表循环渲染的key最好不要用index？
举例说明
变化前数组的值是[1,2,3,4]，key就是对应的下标：0，1，2，3 变化后数组的值是[4,3,2,1]，key对应的下标也是：0，1，2，3
通过diff算法在变化前的数组找到key =0的值是1，在变化后数组里找到的key=0的值是4，因为值不一样就重新删除并更新。
但是如果加了唯一的key,如下:
变化前数组的值是[1,2,3,4]，key就是对应的下标：id0，id1，id2，id3
变化后数组的值是[4,3,2,1]，key对应的下标也是：id3，id2，id1，id0
那么diff算法在变化前的数组找到key =id0的值是1，在变化后数组里找到的key=id0的值也是1，因为子元素相同，就不删除并更新，只做移动操作，这就提升了性能。
16.什么是状态提升？
React的状态提升就是用户对子组件操作，子组件不改变自己的状态，通过自己的props把这个操作改变的数据传递给父组件，改变父组件的状态，从而改变受父组件控制的所有子组件的状态。
17.什么是受控组件和非受控组件？
受控组件：
<1> 通过在初始state中设置表单的默认值
<2> 每当表单的值发生变化时，调用onChange事件处理器
<3> 事件处理器通过合成对象e拿到改变后的状态，并更新应用的state
<4> SetState触发视图的重新渲染，完成表单组件值的更新
非受控组件：
<2> 非受控组件是一种反模式，它的值不受组件自身的state或props控制
<3> 通常需要为其添加ref prop来访问渲染后的底层DOM元素
容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源。(父组件)
React Element 是描述屏幕上所见内容的数据结构，是对于 UI 的对象表述。
典型的 React Element 就是利用 JSX 构建的声明式代码片然后被转化为 createElement 的调用组合。
React Component 是一个函数或一个类，可以接收参数输入，并且返回某个 React Element
24.在 React 当中createElement 和 cloneElement 有什么区别？
传入的第一个参数不同，createElement第一个参数可以是一个标签名，如 div、span，或者 React 组件。而cloneElement传入的第一个参数是一个 React 元素，而不是标签名或组件。
25.调用 Super(Props) 的目的是什么？
在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。
传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。
26.应该在 React 组件的何处发起 Ajax 请求？
在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。
更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。
在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。
27.SetState 和 ReplaceState 的区别？
setState 是修改其中的部分状态，不会减少原来的状态。replaceState 是完全将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了
28.ShouldComponentUpdate 是做什么的（React性能优化是哪个周期）？
shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。
29.React 生命周期函数？
