React相关面试经典问题
A.react中setState以后发生了什么
在调用setState以后,
1、react会将传入的参数对象跟当前的state合并,触发调和过程。
2、调和以后,react会高效的根据新的状态构建react元素树。
3、生成react元素树以后,通过diff算法可以得到新树和老树的节点差异。
4、根据这些差异,可以精确的实现按需更新
B.React 中 Element 与 Component 的区别是?
react Element是所见内容的数据结构,是对UI的描述,是通过jsx构建的声明式代码片段。
React Component 是接收参数输入返回某个 React Element 的函数或者类。
C.使用 Class Component 和 Functional Component的时机,即什么时候使用无状态组件?
在组件需要
1、内部状态
2、需要使用到生命周期函数的时候
使用 Class Component ,否则使用函数式组件。
D.React 中 keys 的作用是什么?
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯一性。
1、React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被
移动而来的元素,从而减少不必要的元素重渲染。
2、React 还需要借助 Key 值来判断元素与本地状态的关联关系,因此我们绝不可忽视转换函数中 Key 的重要性。
E.react中的回调渲染模式
1、这种模式中,组件会接收某个函数作为其子组件,然后在渲染函数中以 props.children进行调用:2、这种模式的优势在于将父组件与子组件解耦和, 父组件可以直接访问子组件的内部状态而不需要再通过Props传递, 这样父组件能够更为方便地控制子组件展示的UI界面
F.在生命周期中的哪一步你应该发起 AJAX 请求?
在 componentDidMount 函数中发起ajax请求1、保证请求仅在组件挂载完毕后才会要求响应2、调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能,其会影响到 componentWillMount 的触发次数。React 可能会多次频繁调用 componentWillMount。
G.React 中的事件处理逻辑
为了解决跨浏览器兼容性问题,React 会将浏览器原生事件(Browser Native Event)封 装为合成事件(SyntheticEvent)传入设置的事件处理器中。这里的合成事件提供了与原生 事件相同的接口,不过它们屏蔽了底层浏览器的细节差异,保证了行为的一致性。另外有意思的 是,React 并没有直接将事件附着到子元素上,而是以单一事件监听器的方式将所有的事件发 送到顶层进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上 的事件监听器,最终达到优化性能的目的。
转自:https://blog.csdn.net/running_shuai/article/details/82667644