React经典问题

一、 当调用setState时，发生了什么操作？

1. 当调用setState时，React做的第一件事情是将传递给setState的对象合并到当前状态，这将启动一个称为和解的过程和解过程的最终目标是，根据这个新的状态以最有效的方式更新Dom。为此，React会构建一个新的React虚拟DOM树。
2. 一旦有了这个DOM树，为了弄清DOM是如何响应新的状态而改变的，React会将这个状态与上一个虚拟DOM树比较
3. 这样做，React会知道发生的确切变了，并且通过了解发生的变化后，在绝对必要的情况下进行更新DOM，即可将因操作DOM而占用的空间最小化。

二、在React中元素（Element）和组件（Component）有什么区别？
4. 简单的说，React元素（虚拟DOM）描述了你在屏幕上看到的DOM元素。换个说法就是，在React中元素是页面中DOM元素的对象表现方式，是虚拟DOM,不能直接调用DOMAPI；在React中组件是一个函数或者一个类，它可以接受输入并返回一个元素。
5. 工作中，为了提高开发效率，通常使用JSX语法表示React元素，在编译的时候，把它转化成一个React.createElement调用方法。

三、 什么时候使用类组件，什么时候使用功能组件？
6. 如果组件具有状态（state）或生命周期方法，请使用类组件。否则，使用功能组件。

四、 什么是React的Refs?为什么终于
7. refs允许你直接访问DOM元素或组件实例。为了使用它们，可以向组件添加一个ref属性
8. 如果该属性的值是一个回调函数，它将接受底层的DOM元素或组件已挂载实例作为其第一个参数。可以在组件中存储它；如果该属性是一个字符串，React将会在组件实例化对象的refs属性中，存储一个同名属性，该属性是对这个DOM元素的引用，可以通过原生 的DOM API操作它。

五、 React中key是什么？为什么重要
9. key可以帮助React跟踪循环创建列表中的虚拟DOM元素，了解哪些元素修改、添加和删除。
10. 每个绑定了key的虚拟DOM元素，在兄弟元素之间都是独一无二的。在React的和解过程中，比较新的虚拟dom树和上一个虚拟dom树的区别，并映射到页面中。key使React处理列表中虚拟更加高效，因为React可以使用虚拟dom中的key.

六、 约束性组件和非约束性组件的有什么区别？
11. 约束性组件是由React控制的组件，也就是说表单元素的数据存储在组件内部的状态中，表单到底呈现什么由组件决定
12. 非约束性组件是指表单元的数据交由元素自身存储并处理，而不是通过React组件。表单如何呈现由表单自身决定。
13. React建议使用约束性组件。

七、在哪个生命周期中你会发出ajax请求？为什么
14. componentDidMount。执行Ajax即可保证组件已经挂载，并且能够正常更新组件。

八、 shouldComponentUpdate有什么用？为什么它很重要？
15. 组件状态数据和属性数据发生更新的时候，组件会进入存在期，视图会渲染更新。在shouldComponentUpdate中，允许选择退出某些组件的和解过程。
16. 和解的最终是根据新的状态，以最有效的方式更新用户界面。如果我们知道用户界面的某一部分不会改变，那么没有理由让React弄清楚他是否应该更新渲染。通过在shouldComponentUpdate中返回false,React将当前组件与其所有子组件保持当前状态相同。

九、如何用React构建build生产模式？
17. 通常，使用webpack的DefinePlugin将NODE_ENV设置为production。这将剥离propType验证和额外的警告。除此之外，还可疑减少代码，因为React中使用Ugligy的dead-code来消除开发代码和注释，这将大大减少包占用空间。

十、为什么使用React.Children.map(props.children,()=>)而不是props.children.map(()=>)?
18. 因为不能保证props.children是一个数组。
19. 如果只有一个族元素，props.children是一个对象
20. 有多个元素，props.children是一个数组

十一、描述事件在React中的处理方式？
21. 为了解决浏览器兼容性问题，React中的事件处理是一个合成事件， 他是跨浏览器事件的包装器，与原生事件具有相同接口
22. 使用驼峰式命名，jsx传递函数作为事件处理器
23. 不能使用return false阻止默认行为，直接调用preventdefault
24. React实际上没有将事件附加到子节点本身，而是通过事件委托模式，使用单个事件监听器监听顶层的所有事件
25. es6箭头函数，this总是指向当前组件的实例，每次调用render都会创建新的事件处理函数；直接将组件方法赋值给事件函数，在constructor中将这个函数的this绑定到当前对象，传参的最好方法。调用render不会创建新的事件处理器，有很多事件函数绑定this方法变得繁琐；es7属性初始化语法，既不需要在构造器中绑定this,调用render也不会创建新的事件处理函数

十二、 createElement和cloneElement有什么区别？
26. createElement是JSX被转载得到的，在React中用来创建React元素的内容,第一个参数可以是标签名。cloneElement用于复制元素并传递新的props，第一个参数是元素。

十三、setState的第二个参数有什么用，使用它的目的是什么？
27. 是一个回调函数。当setState方法执行结束并重新渲染该组件的时候调用它， 根据以前的状态以及属性来修改当前状态。在工作中，更好的方式是使用React组件生命周期存在期的生命周期方法，。

十四、 ReactDiff算法的原理。
三个策略：
28. web UI中DOM节点跨层级的移动操作特别少，可以忽略不计
29. 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。
30. 对于同一层级的一组子节点，它们可以通过唯一id进行区分。
tree diff
React对Virtual Dom树进行层级控制，只会对相同层级的DOM节点进行比较，即同一个父元素下的所有子节点，当发现节点已经不存在了，则会删掉该节点的子节点，不会再进行比较。只有只需要对dom树进行一次遍历。跨层级，只会创建和删除操作。
component tree

1. 如果是同一类型的组件，则按照原策略进行VirtualDom比较
2. 如果不是同一类型的组件，则将其判断为dirtycomponent，从而替换整个组件下的所有子节点。
3. 如果是同一类型的组件，有可能经过一轮virtualdom比较下来，并没有发生变化。如果我们能够提前确切知道这一点，那么就可以生鲜大量的diff的运行事件。
   element diff
   当节点属于同一层级时，diff提供插入，移动，删除
   新的组件类型不在旧集合中，进行插入操作
   旧集合中有新的组件类型，且element是可更新的类型。移动操作，复用以前的Dom节点
   旧组件类型，在新的集合里也有，但对应的element不同则不能直接复用和更新，旧组件不在新集合中，都执行删除操作。

十五、生命周期调用方法的顺序是什么
constructor
componentWillMount
render
componentDidMount
componentWillReciveProps
shouldComponentUpdate
render
componentDidUpdate
componentWillUnmount