React面试题总结（二）

1、说说React中setState和replaceState的区别？

1、setState用于设置状态对象
2、两个参数：nextState，将要设置的新状态，该状态会和当前的state合并；callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。
3、合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。
4、replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除
5、两个参数：nextState，将要设置的新状态，该状态会替换当前的state。callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

1. setState 是修改其中的部分状态，相当于 Object. assign，只是覆盖，不会减少原来的状态；
2. replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了。

2、说说react中onClick绑定后的工作原理？

当组件元素绑定onClick事件之后：
1、react会对事件先进行注册，将事件统一注册到document上
2、根据组件唯一的表示key来对事件函数进行存储
3、统一的指定，dispatchEvent回调函数
4、存储事件回调:react会将click这个事件统一存放在一个对象中，回调函数中存储采用键值对的方式存储在对象中，key是组件唯一标识id，value对应的事件就是回调函数，通过组件的key就能回到相对应的函数了。

3、useEffect的依赖为引用类型如何处理？

1、使用 ‘use-deep-compare-effect’ ：他可以进行深比较，使用方法也很简单， import useDeepCompareEffect from ‘use-deep-compare-effect’ 之后用useDeepCompareEffect 替换掉 原有的 useEffect 即可。
2、也可以使用 useRef这个钩子来解决上述问题，useRef的特性是跨渲染周期保存数据
3、用useRef保存了之前的数据， useEffect中的依赖以然为引用类型， 每次obj发生改变都会调用执行函数，但是执行函数中多了一个判断， prevObj是上一次渲染时obj的值， 用prevObj中的某个key与此次obj中的某个key做对比，满足条件后做其他操作

4、知道react里面的createPortal么，说说其使用场景？

1、Portal ，将子节点渲染到存在于父组件以外的 DOM 节点。
2、ReactDOM.createPortal(child, container)
第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。
2、Portals 适合脱离文档流(out of flow) 的组件，特别是 position: absolute 与 position: fixed的组件。比如模态框，通知，警告，goTop 等

5、shouldComponentUpdate有什么作用？

1、根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。
2、eact中props,state值的变化，会导致组件重新渲染。使用shouldComponentUpdate就是为了减少render不必要的渲染。 返回布尔值，然后做 Virtual DOM 比较，并得出是否需要做真实 DOM 更新

6、在使用redux过程中，如何防止定义的action-type的常量重复？

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。
Symbol函数前不能使用new命令，否则会报错。这是因为生成的Symbol是一个原始类型的值，不是对象Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

7、说说React中的虚拟dom？在虚拟dom计算的时候diff和key之间有什么关系？

1、实际上它只是一层对真实DOM的抽象，以JavaScript对象（VNode节点）作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作时这棵树映射到真实环境上，创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应
2、通过JS模拟网页文档节点，生成JS对象树（虚拟DOM），然后再进行一步生成真实的DOM树，再绘制到屏幕。如果后面有内容发生改变，React会重新生成一棵全新的虚拟DOM树，再与前面的虚拟DOM树进行比对diff，把差异的部分打包成patch，再应用到真实DOM，然后渲染到屏幕浏览器。
在虚拟dom计算的时候diff和key之间有什么关系：
1、React需要同时维护两棵虚拟DOM树：一棵表示当前的DOM结构，另一棵在React状态变更将要重新渲染时生成。React通过比较这两棵树的差异，决定是否需要修改DOM结构，以及如何修改。这种算法称作Diff算法。
2、key 当同一层级的某个节点添加了对于其他同级节点唯一的key属性，当它在当前层级的位置发生了变化后。react diff算法通过新旧节点比较后，如果发现了key值相同的新旧节点，就会执行移动操作（然后依然按原策略深入节点内部的差异对比更新），而不会执行原策略的删除旧节点，创建新节点的操作。这无疑大大提高了React性能和渲染效率。

8、React的props.children使用map函数来遍历会收到异常显示，为什么？应该 如何遍历？

1、当前组件没有子节点数据类型就是undefined，
2、有一个子节点数据类型就是object 。
3、有多个子节点的时候才会是array ,只有在多个节点的时候才可以直接调用map方法，react资深提供了一个react.children.map()方法，可以安全遍历子节点对象。

9、谈谈你对immutable.js的理解？

1、Immutable.js就是react中用来做性能优化的
2、在react中使用immutable可以减少页面的一些不必要的渲染，不需要像react中进行深度对比而进行渲染
3、immutable可以直接快速的进行对比，完成渲染，提升了渲染的效率，降低了性能的消耗
4、Immutable不可改变的，在计算机中，即指一旦创建，就不能再被更改的数据
对 Immutable对象的任何修改或添加删除操作都会返回一个新的 Immutable对象
Immutable 实现的原理是 Persistent Data Structure（持久化数据结构）:
1、用一种数据结构来保存数据
2、当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费