React面试题汇总

1.如何理解React中的组件间数据传递?

①父-子  通过props传递

②子-父  在父中创建一个可以修改state的方法,之后把这个方法通过props传递给子,在子中调用这个方法

从而达到修改父state的目的.

③非父子组件如何数据共享 or 数据通信:创建全局对象,监听对象on,数据发送方触发自定义事件同时传递数据.

2.使用Creacte-react-app后创建的工程下有registerServiceWorker.js是做什么用的?

答:registerServiceWorker就是为了react项目注册了一个service worker,用来做资源的缓存,这样你下次访问时,就可以更快的获取资源。而且因为资源被缓存,所以即使在离线的情况下也可以访问应用(此时使用的资源是之前缓存的资源)。注意,registerServiceWorler注册的Service  worker 只在生产环境中生效( props.env.NODE_ENV=== 'production')

3.setState后发生了什么?

答案:点击事件开始时,框架调用ReactEventListener.dispatchEvent之后执行batchedUpdates开启事务。

setState中通过this.update.enqueueSetState方法把state加入队列(react-dom中实现了enqueueSetState方法)

事件绑定的方法完成以后,框架会继续执行batchedUpdates进行批量更新。

4.React性能优化是在哪个周期函数?

答:shouldComponentUpdate这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能

,如果我们能在shouldComponentUpdate方法中能够写出更优的dom diff 算法,可以极大的提高性能。

5.React性能优化方案

①重写shouldComponentUpdate来避免不必要的dom操作

②使用production版本的react.js

③使用key来帮助React识别列表中所有子组件的最小变化。