React面试真题演练

1、组件之间如何通讯

• 父子组件props
• 自定义事件
• redux和context

2、JSX本质

• creatElement
• 执行返回vnode

3、Context是什么？如何应用？

• 父组件，向其下所有子孙组件传递信息
• 如一些简单的公共信息，主题，语言等
• 复杂的公共信息，用 redux

4、shouldComponentUpdate的用途

• 性能优化
• 配合不可变值一起使用，否则会出错

5、什么是纯函数？

• 返回一个新值，没有副作用，不会修改其它值
• 重点就是不可变值
• 如 arr1 = arr.slice()

6、对于 React 的组件生命周期

• 单组件生命周期
• 父子组件生命周期

7、React 发起 ajax 应该在哪个生命周期

• componentDidMount 这个生命周期函数

8、渲染列表，为何使用 key

• 必须用 key，且不能是 index 和 random
• diff 算法中通过 tag 和 key 来判断，是否是 sameNode
• 减少渲染次数，提升渲染性能

9、函数组件和 class 组件的区别

• 纯函数，输入 props，输出 JSX
• 没有实例，没有生命周期，没有 state

10、什么是受控组件

• 表单的值，受 state 控制
• 需要自行监听 onChange，更新 state
• 对比非受控组件

11、何时使用异步组件

• 加载大组件
• 路由懒加载

12、多个组件有公共逻辑，如何抽离

• 高阶组件
• Render Props
• mixin 已被 React 废弃

13、redux 如何进行异步请求

• 使用异步 action
• 如redux-thunk

14、PureComponent有何区别

• 实现了浅比较的 shouldComponentUpdate
• 优化性能
• 需要结合不可变值使用

15、React 事件和 DOM 事件的区别

• 所有事件挂载到 document上
• event 不是原生的，是 SyntheticEvent合成事件对象
• dispatchEvent

16、对于 React 的性能优化
-渲染列表时添加 key

• 自定义事件、DOM 事件及时销毁
• 合理使用异步组件
• 减少函数 bind this 的次数
• 合理使用 SCU、PureComponent 和 memo
• 合理使用 Immutable.js
• webpack 层面的优化
• 前端通用的性能优化，如图片懒加载
• 使用 SSR

17、React和 Vue的区别

• 都支持组件化
• 都是数据驱动视图
• 都使用 vdom 操作 DOM
• React 使用 JSX 拥抱 JS，Vue 使用模版拥抱 html
• React 函数式编程，Vue 声明式编程
• React 更多的需要是自力更生，Vue 是把想要的都给你