1. React 中 keys 的作用是什么？
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。
2. 调用 setState 之后发生了什么？
React会将当前传入的参数对象与组件当前的状态合并,然后触发调和过程；
在调和的过程中,React会以相对高效的方式根据新的状态构建React元素树，React得到的元素树之后,React会自动计算出新的树与老的树的节点的差异,然后根据差异对界面进行最小化的渲染,在React的差异算法中,React能够精确的知道在哪些位置发生看改变以及应该如何去改变,这样就保证了UI是按需更新的而不是重新渲染整个界面。
3. 什么是调和过程？
调和过程是实现UI更新的一个过程，目的是在用户无感知的情况下将数据的更新体现到UI上。调优过程中对比新的virtual dom树以及旧的virtual dom树，接着找出两者所不同的地方，根据不同的地方来修改现有的DOM。
4. 什么是虚拟dom？为什么虚拟Dom可以提高性能？
虚拟Dom本质上来说是一个js对象。
当react第一次渲染的时候，数据和模板生成一个用于描述真实Dom的虚拟Dom，用虚拟Dom生成真实Dom来显示。当数据发生变化时，React生成新的虚拟Dom，比较新旧虚拟Dom找到区别，然后操作Dom中有区别的那个节点，改变显示效果。采用虚拟Dom之所以能够提升性能，是因为js创建和比对js对象要比创建和比对真实Dom性能要高（因为创建真实Dom要调用web应用级别的函数）。
5. Diff算法。
用于计算虚拟Dom中被改变的部份。
有三个策略，第一个策略是层级比较，对组件树的每一层进行遍历，如果找到了不同，则这一层级下面的全部层级全部替换。
第二个策略数据差异比较，如果比对的时候出现不同类型的组件（比如无状态组件和普通组件），就把该组件判断为脏组件，从而替换整个组件下的所有子节点。如果类型相同，就正常比对虚拟Dom。
第三个策略是循环中key值的比较方案，给列表结构的每个单元添加唯一的key属性，方便比较。
6. React生命周期函数有哪些？
- 挂载时执行的：
componentWillMount-即将被挂载时执行；
Render-渲染函数
componentDidMount-挂载完成后执行 - 组件更新时的：
sholdComponentUpdate-更新之前，返回true或false
ComponetWillUpdate-更新之前
Render-重新渲染
ComponentDidUpdate-更新完成 - 组件卸载时的：
componentWillUnmount-组件卸载
7. 如何利用shouldComponentUpdate来提高性能？
当shouldComponentUpdate 返回false时，就会停止组件更新，不再执行下一生命周期函数。可以在这个方法中判断数据是否有更改，是否需要调用 render 方法重新描绘 dom。
8. 什么是高阶组件？
高阶组件是一个以组件为参数并返回一个新组件的函数。
9. AJAX放在哪个构造函数中执行？
componentDidMount-组件挂载完成。但更好的方法是引入redux和redux-thunk，新增一个返回函数的actionCreactor存放异步请求，这样做的好处是避免组件臃肿。
10. React中refs的作用是什么？
Refs是React提供给我们的安全访问Dom元素或者某个组件的句柄。我们可以为元素添加ref属性，然后在回调函数中接受该元素在Dom树中的句柄，该值会作为回调函数的第一个参数返回。
11. UI组件和容器组件。
UI组件主要负责UI的呈现；
容器组件主要管理数据和逻辑。
一般UI组件写模板，容器组件写逻辑，两者可通过react-redux提供的connet方法联系起来。
12. 什么是无状态组件？
使用函数创建的组件，没有生命周期钩子。当一个组件只有render的逻辑时，可以定义为无状态组件，比类组件新能更高，因为类组件使用前要实例化，而函数组件直接执行函数取返回结果即可。
13. 组件的状态和属性之间有何不同？
State是一种数据结构，用于组件挂载时所需数据的默认值。State可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。
Props则是组件的配置。props由父组件传递给子组件，并且就子组件而言，props是不可变的。组件不能改变自身的props，但可以把其子组件的props放在一起统一管理。
14. 为什么建议传递给setState的参数是一个callback而不是一个对象。
setState() 将组件state的更改排入队列，并通知React需要使用更新后的state重新渲染此组件及其子组件。但React 将 setState 视为请求，而不是立即更新组件的命令。调用setState后立即读取出this.state，值尚未及时更新，使用回调函数可以避免这个问题。
15. 请描述一个事件在React中的处理方式。
为了解决跨浏览器兼容性的问题，react中的事件处理程序将传递SyntheticEvent的实例，它是react的浏览器本机事件的跨浏览器包装器。
react并没有将事件附加到子节点本身，它使用单个事件监听器监听顶层的所有事件。这意味着在更新dom时，react不需要担心跟踪事件监听器。
16. 在构造函数中调用super(props)的目的是什么？
在super()被调用之前，子类是不能使用this的。传递props给super的原因是便于在子类中能在constructor中访问this.props。
17. React有几种构建组件的方式？
三种。createClass()、es6 class 和无状态函数。
18. 请描述redux的一个工作流程。
Redux想要改变数据，首先创建一个action，action通过dispatch函数传递给store，store把之前的数据和action转发给reducer，reducer将数据作相应处理后还给store，store用新数据替换旧数据，组件能够感知到store中的数据变化，取出新数据给本身使用。这就是redux的一个基本流程。
19. Redux-think。
Redux-think使redux中间件，作用于action和store之间，是对dispatch方法的拓展。未使think之前，dispatch只能接收对象，使用think之后，dispatch可以接收一个函数。好处是可以把一些异步操作比如网络请求放到action里面，避免组件过于臃肿。
网友评论