react 判断图片是否加载完成_react面试题

1、组件如何通讯

父子组件props

自定义事件

redux 和 context

2、jsx本质是什么

用React.createElement创建，然后执行vnode

3、context是什么，如何用

父组件向其下所有子孙组件传递信息，如一些简单的公共信息：主题色、语言等。如果是复杂的话，用redux处理。

4、shouldComponentUpdate 用途

性能优化、配合“不可变值”一起使用，否则会报错。

5、redux 单项数据流

6、setState场景题

7、什么是纯函数

返回一个新值，没有副作用（不会修改其他值）

8、react组件生命周期

单组件生命周期：挂载componentWillMount、componentDidMount 更新：componentWillUpdate、componentDidUpdate 销毁：componentWillUnmout

父子组件生命周期

9、react发起ajax，应该放在哪个生命周期

componentDidMount

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

必须使用key，且不能是index和random

diff算法中通过tag和key来判断，是否是sameNode

减少渲染次数，提升渲染性能

11、函数组件和class组件区别

函数组件：纯函数，输入props 输出jsx；没有实例，没有生命周期，没有state；不能扩展其他方法

12、什么是受控组件

表单的值，受state控制

需要自行监听onChange，更新state

13、何时使用异步组件

加载大组件、路由懒加载

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

高阶组件、render props

15、redux 如何进行异步请求

使用异步action、如redux-thunk

16、react-router 如何配置懒加载

lazy()

Suspense

17、PureComponent有何区别

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

18、react事件和dom事件区别

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

19、性能优化

渲染列表时用key

自定义事件、dom事件及时销毁

合理使用异步组件

减少函数bind this的次数

合理使用shouldComponentUpdate、PureComponent和memo

合理使用immutable.js

webpack层面的优化

前端通用的性能优化，如图片懒加载

使用ssr

20、react 和 vue 区别

都支持组件化

都是数据驱动视图

都使用vdom操作dom

react 使用jsx拥抱js，vue 使用模板拥抱html

react 是函数式编程， vue 是声明式编程

react 需要更多自力更生， vue 把想要的都给你