面试题

数据抓取、代运营、合作项目、后台管理系统、gql 、企业微信TAPD、权限拦截、swagger useEffect 加载完成后执行，销毁的时候如果存在返回函数就会执行返回函数 、useState、useMemo计算属性，只有指定的值变化后才会更新，通常可以利用他减少组件更新频率
useMemo都是 useCallback 返回缓存的值
useMemo 缓存返回值
useCallback 缓存返回函数一些函数是没有必要被重新刷新的，此时就应该缓存起来

综合题

React和Vue有那些区别

1. Vue通过Object.defineProperties 实现数据双向绑定，而React需要手动进行setState
2. Vue提供了很多指令、方法 如：v-for v-if v-html等，而React主要还是使用js来控制。
3. Vue主要采用传统的模板方式进行开发，React主要使用函数式编程。

Vue

vue的基本原理，双向绑定、diff算法、模版引擎具体讲一讲

if 和 for循环 哪个优先级最高，如何让性能最大化

• 答案在源码中 compiler/codegen/index.js
• 先进行了for循环比if判断更早

答：

1. v-for优先于v-if被解析
2. 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
3. 要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环
4. 如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项

   Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？

• 源码中找答案：src\core\instance\state.js - initData()
• data必须是函数是为了多组件之间值相互不干扰。根实例只有一个，不存在多个因此不存在干扰问题

  你知道vue中key的作用和工作原理吗？说说你对它的理解。

  源码中找答案：src\core\vdom\patch.js - updateChildren()
  答：

1. key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。
2. 另外，若不设置key还可能在列表更新时引发一些隐蔽的bug
3. vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

   你了解哪些Vue性能优化方法？

• 路由懒加载
• keep-alive缓存页面
• 使用v-show复用DOM
• v-for 遍历避免同时使用 v-if
• 如果列表是纯粹的数据展示，不会有任何改变，就不需要做响应化，使用Object.freeze(xxx);冻结禁止监听

  React

  什么是虚拟DOM

  虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。

  类组件和函数组件之间的区别是啥

1. 类组件可以使用其他特性，如：state，生命周期钩子，this

2. 函数组件比类组件性能更高，因为类组件需要实例化，而函数组件直接执行返回结果即可，为了性能考虑尽量使用函数组件

   React 中 refs 干嘛用的？

   state 和 props 区别是啥？

3. props和state是普通的 JS 对象。虽然它们都包含影响渲染输出的信息，但是它们在组件方面的功能是不同的。即

4. state 是组件自己管理数据，控制自己的状态，可变；
5. props 是外部传入的数据参数，不可变；
6. 没有state的叫做无状态组件，有state的叫做有状态组件；
7. 多用 props，少用 state，也就是多写无状态组件。

   如何创建 refs

   Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

   什么是高阶组件？

• 高阶组件是接收一个组件并返回一个新的组件

高阶组件(HOC)是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从 React 的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。
const EnhancedComponent = higherOrderComponent(WrappedComponent);

• HOC 可以用于以下许多用例
• 代码重用、逻辑和引导抽象
• 渲染劫持
• state 抽象和操作
• props 处理

  在构造函数调用 super 并将 props 作为参数传入的作用是啥？

  什么是控制组件？

  在 HTML 中，表单元素如 、 和通常维护自己的状态，并根据用户输入进行更新。当用户提交表单时，来自上述元素的值将随表单一起发送。而 React 的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数(例如onChange)触发时重新渲染组件，因为状态被更新。以这种方式由 React 控制其值的输入表单元素称为受控组件。 讲讲什么是 JSX ？当 Facebook 第一次发布 React 时，他们还引入了一种新的 JS 方言 JSX，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的JS。很多开发人员就能无意识使用 JSX，因为它已经与 React 结合在一直了。 根据下面定义的代码，可以找出存在的两个问题吗 ？React 的生命周期方法有哪些？挂载、渲染、卸载初始化阶段：constructor 初始化componentWillMount：实例挂载之前Render：渲染组件componentDidMount：实例挂载完成。一般在这个函数中与后台进行初始化数据交互。 (2)运行阶段：shouldComponentDidMount：是否需要更新数据，返回false则不更新componentWillReceiveProps：父组件改变时调用。sholudComponentUpdate：主要是用来手动阻止组件渲染，一般在这个函数中做组件的性能优化。componentWillUpdate：组件数据更新前调用componentDidUpdate：组件数据更新完成时调用 (3)销毁阶段： componentUnmount：销毁阶段。一般用来销毁不用的变量或者是解除无用定时器以及解绑无用事件。防止内存泄漏问题。componentWillUnmount:组件销毁的时候触发16.3版本后新增：getDerivedStateFrinOrios前面要加上static保留字，声明为静态方法，不然会被react忽略掉，不常用，componentWillMount，componentWillUpdate弃用 使用 React Hooks 好处是啥？首先，Hooks 通常支持提取和重用跨多个组件通用的有状态逻辑，而无需承担高阶组件或渲染 props 的负担。Hooks 可以轻松地操作函数组件的状态，而不需要将它们转换为类组件。 Hooks 在类中不起作用，通过使用它们，咱们可以完全避免使用生命周期方法，例如 componentDidMount、componentDidUpdate、componentWillUnmount。相反，使用像useEffect这样的内置钩子。 React 中的 useState() 是什么？const [count, setCounter] = useState(0);useState 是一个内置的 React Hook。useState(0) 返回一个元组，其中第一个参数count是计数器的当前状态，setCounter 提供更新计数器状态的方法。 咱们可以在任何地方使用setCounter方法更新计数状态-在这种情况下，咱们在setCount函数内部使用它可以做更多的事情，使用 Hooks，能够使咱们的代码保持更多功能，还可以避免过多使用基于类的组件 React 中的StrictMode(严格模式)是什么？ 为什么类方法需要绑定到类实例？ 什么是 prop drilling，如何避免？ 受控组件和非受控组件区别是啥？ diff算法Diff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。Tree Diff 是对树每一层进行遍历，找出不同 JSX映射虚拟DOM原理JSX最终会编译为React.createElment 返回 “React元素”（即虚拟DOM） 的普通js对象React的createElment为一个方法，共接受三个参数，第一个参数为type标签，第二个为config属性，第三个为Children 子节点先判断处理config、获取key、self、source、propName等 也就是讲config内容解析出来