什么是闭包。
当一个函数引用了一个外部函数变量时，就会形成闭包；
什么是垃圾回收机制。
垃圾回收机制是js中为了减少内存压力，在释放上下文之后会及时的清除不需要的变量。这就是垃圾回收机制。 垃圾回收机制有两种，一种是引用计数算法，一种是标记清除算法。 引用计数算法是会对每一个变量做一个计数处理，使用到变量+1，清除-1，计数为0时清除。无法解决循环引用的情况， 标记清除算法，会在根变量中访问每一个变量，包括当前上下文，会标记所有可访问的对象，清理阶段会会去遍历内存堆中的对象，所有未被标记的对象都被认为是"垃圾"。
内存泄露的几个场景。
闭包，dom引用不及时释放，监听函数，定时器等
react合成事件。
react合成事件是react为了抹平不同浏览器之间的差异，自己实现了一套事件合成机制，通过将所有的合成事件统一代理到根元素中，来提升react性能。 合成事件中也做了部分优化，比如访问到原生事件e.ativeEvent.target等
react17中=>不再委托到 document，而是挂载到 React 树的根容器
setState之后react做了什么。
- 批量更新
- 调和阶段，diff阶段，将所有的effect放在队列中
- 调和阶段，将所有的effect执行，
什么是虚拟dom，虚拟dom有什么好处。
虚拟dom相当于是对真实把我们浏览器中真实的dom抽象成的对象，由于浏览器对dom操作对浏览器消耗比较大，所以react就通过虚拟dom，在触发更新的时候，他实现了批量更新，diff算法，这些都是为了减少dom重复渲染。 另外虚拟dom对跨平台开发也有很大的意义。
组件开发时需要注意什么。
功能单一，符合低耦合的
react与vue的区别
- 首先 vue属于是一种渐进式的框架，上手较为简单。 react他本质上其实是一个ui库，就是我们的fn(code) =>ui.
- vue是MVVM模式根据Object.defindPropyte对数据做了一个双向绑定，响应式数据。 react的话他是一个由数据驱动视图层更新的逻辑。通过setState驱动。
- 还有的话就是react还支持夸端开发。react更灵活。
react与vue diff算法的区别
vue：使用4个指针快速找到可以复用的节点，并且有个优化，在编译的时候会把静态节点标记出来，diff时会直接跳过。 react：有几个策略：他有一个同层级diff，然后同类型diff，对于列表元素的话是通过找一个最大递增子序列，进行复用，然后剩余的节点可复用的话就会进行移动，不复用的会新增删除操作。
vue2与vue3数据绑定区别
proxy属于惰性代理，只有数据被访问到之后才会去代理； 而vue2是全量递归的代理的。 proxy并且可以直接代理数组和对象，而不是像之前一样去重写原型方法实现。
for in 和 for of的一个区别
for in 处理对象
for of 处理数组或者一些具有迭代器属性的数据类型。比如map set 等
如何设计一个组件，思路是什么；
- 明确需求：先确认组件的核心功能和业务场景
- 设计props：尽量的做到命名的一眼就能明白这个参数的意思。符合我们正常的一个命名规范，比如open的，事件使用onClick,onClose这种。
- 功能实现：功能尽量低耦合,功能性比较复杂的话经历抽离成子组件，或者抽离成方法。
// hooks/useAnimation.ts
export function useAnimation(
visible: boolean,
{ enterDuration = 300, leaveDuration = 200 }
) {
const [shouldRender, setShouldRender] = useState(visible);
useEffect(() => {
if (visible) {
setShouldRender(true);
} else {
const timer = setTimeout(() => {
setShouldRender(false);
}, leaveDuration);
return () => clearTimeout(timer);
}
}, [visible]);
return {
shouldRender,
animationClass: visible ? 'enter' : 'leave'
};
}
// Modal组件中使用
const { shouldRender, animationClass } = useAnimation(open);
- 性能优化
// 1. 避免不必要的渲染
export default React.memo(Modal);
// 2. 按需挂载DOM
if (!shouldRender) return null;
// 3. 事件处理器缓存
const handleClose = useCallback(() => {
onClose?.();
}, [onClose]);
- 单元测试：通过单元测试。
