React相关面试经典问题

react中setState以后发生了什么

在调用setState以后，
1、react会将传入的参数对象跟当前的state合并，触发调和过程。
2、调和以后，react会高效的根据新的状态构建react元素树。
3、生成react元素树以后，通过diff算法可以得到新树和老树的节点差异。
4、根据这些差异，可以精确的实现按需更新

React 中 Element 与 Component 的区别是？

react Element是所见内容的数据结构，是对UI的描述，是通过jsx构建的声明式代码片段。
React Component 是接收参数输入返回某个 React Element 的函数或者类。

使用 Class Component 和 Functional Component的时机，即什么时候使用无状态组件？

在组件需要
1、内部状态
2、需要使用到生命周期函数的时候
使用 Class Component ，否则使用函数式组件。

React 中 keys 的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。
1、React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被  
移动而来的元素，从而减少不必要的元素重渲染。
2、React 还需要借助 Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。

react中的回调渲染模式

      1、这种模式中，组件会接收某个函数作为其子组件，然后在渲染函数中以  
      props.children进行调用：
      2、这种模式的优势在于将父组件与子组件解耦和，  
      父组件可以直接访问子组件的内部状态而不需要再通过Props传递，  
      这样父组件能够更为方便地控制子组件展示的UI界面

在生命周期中的哪一步你应该发起 AJAX 请求？

     在 componentDidMount 函数中发起ajax请求
     1、保证请求仅在组件挂载完毕后才会要求响应
     2、调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能，其会影响到   
     componentWillMount 的触发次数。React 可能会多次频繁调用  
      componentWillMount。

React 中的事件处理逻辑

    为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封  
    装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生  
    事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的  
    是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发  
    送到顶层进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上  
    的事件监听器，最终达到优化性能的目的。