React面试经验2

1.执行顺序题

onClick = () => {
    //a
    this.setState({
      num: this.state.num + 1,
    })
    console.log('1:',this.state.num);
    //b
    this.setState({
      num: this.state.num + 1,
    })
    console.log('2:',this.state.num);
    setTimeout(() => {
      //c
      this.setState({
        num: this.state.num + 1,
      });
      console.log('3:',this.state.num);
    }, 0);
    //d
    this.setState(preState => ({
      num: preState.num + 1,
    }),() => {
      console.log('4:',this.state.num);
    })
    //e
    this.setState(preState => ({
      num: preState.num + 1,
    }))
    console.log('5:',this.state.num);
}

此处注意点：1.同步与异步更新

2.setState传递参数为函数时不会被合并

1.console.执行顺序

1，2，5，4，3

（4，3是什么原因）

值的更新

a,b合并，并且都是异步，所以打印更新前的值

de不合并，都能获取到

题2

async function async1(){
  console.log('async1 start');
  let res = await async2();
  console.log(res);
  console.log('async1 end');
}

async function async2(){
  console.log('async2 start');
  return 'async2 end'
}

console.log('script start');
setTimeout(() => {
  console.log('setTimeout');
}, 0);
async1();
new Promise((resolve,reject) => {
  console.log('Promise start');
  resolve();
}).then(() => {
  console.log('Promise end');
})
console.log('script end');

注意，async函数的return内容会被Promise.resolve包装

diff算法的区别

区别：

策略不同： React 使用双端比较策略，而 Vue 使用双指针或同层比较策略。

节点复用： Vue 更注重节点的复用，尽可能地复用相同类型的节点，而 React 则更倾向于替换整个节点。

性能差异：由于实现策略不同，React 和 Vue 的 diff 算法在性能上可能会有所不同，但具体的性能差异会受到多种因素的影响，如虚拟 DOM 树的大小、节点的层级结构等。

总的来说，React 和 Vue 的 diff 算法都是为了实现高效的页面更新，它们在实现上有一些差异，但都能够很好地满足前端开发的需求

相比于 class 类组件，hooks 到底解决了什么问题？

1.较好地解决了class组件中逻辑复用的问题

2.实现生命周期管理

3.useMemo和useCallback等提供了性能优化

useState 的原理是什么，背后怎么执行的，它怎么保证一个组件中写多个 useState 不会串

useState 是 React 用于在函数组件中添加状态的 Hook。在 React 16.8 版本中首次引入 Hooks 后，useState 成为了在函数组件中管理局部状态的首选方法。下面我们来详细了解 useState 的原理和执行机制：

原理

声明式编程：React Hooks 允许你在函数组件中以声明的方式使用状态和其他 React 特性，而不是通过类组件和生命周期方法。
状态存储 ：当你在一个函数组件中调用 useState，React 会为这个组件创建一个状态变量。这个状态变量被存储在组件的内部状态环境中。
状态更新 ：useState 返回一个数组，包含当前的状态值和一个更新该状态的函数。当你调用这个函数并传递一个新的状态值时，React 会计划一个状态更新，并在下一个渲染周期重新渲染组件。

执行机制

首次渲染 ：在函数组件的首次渲染中，useState 被调用，React 创建对应的状态变量，并将其初始化为传递给 useState 的参数值。
后续渲染 ：在后续的渲染中，当组件需要重新渲染时（可能是因为状态更新、条件变化、props 更改等），useState 返回的状态变量和更新函数会保持不变。
状态更新：当更新函数被调用时，React 会将新的更新加入一个队列。在当前渲染周期结束后，React 会处理这个队列中的所有更新，并决定哪些组件需要重新渲染。

多个 useState 的管理

独立状态 ：在同一个组件中使用多个 useState 调用，每个调用都会创建一个独立的、完全分离的状态变量。这些状态变量互不影响。
状态标识 ：React 通过内部机制为每个 useState 调用生成一个唯一的标识，即使它们在同一个组件中，也能确保不会混淆。
渲染顺序 ：React 保证了组件内部 useState 调用的顺序与它们在代码中的声明顺序相匹配。这意味着，即使有多个状态变量，它们也会按照你在代码中声明的顺序被初始化和更新。

sessionStorage 不能在多个窗口或标签页之间共享数据，但是当通过 window.open 或链接打开新页面时(不能是新窗口)，新页面会复制前一页的 sessionStorage。

fiber

React 和 Vue 是两个流行的前端 JavaScript 库，它们都用于构建用户界面，并且都采用了虚拟 DOM（Virtual DOM）的概念来提高性能。不过，React 16 引入了 Fiber 架构，这是一种重新实现的虚拟 DOM 算法，它为 React 带来了一些显著的改进。以下是 React 的 Fiber 与 Vue 的虚拟 DOM 之间的一些关键区别：

异步更新（Async Updates）

React Fiber:

React 的 Fiber 架构允许组件更新变得可中断和可恢复。这意味着 React 可以将更新过程分成小块，允许浏览器在每个小段之间进行渲染，从而提高性能并避免长时间的阻塞。
这种异步更新机制使得 React 能够实现时间切片（time slicing），从而更好地控制更新的执行时机，提供更平滑的用户体验。

Vue Virtual DOM:

Vue 的虚拟 DOM 更新通常是同步的。当数据变化时，Vue 会立即触发相应的视图更新。
虽然 Vue 2.0 引入了异步批处理来提高性能，但它并不像 React Fiber 那样在算法层面支持更新的中断和恢复。

性能优化

React Fiber:

Fiber 架构的主要目标是提高大型应用的性能，尤其是在处理大量组件和复杂更新时。
React 的时间切片功能允许应用在高负载时仍能保持响应，例如在滚动或动画过程中。

Vue Virtual DOM:

Vue 的虚拟 DOM 优化主要侧重于减少不必要的 DOM 操作，通过高效的差异比较算法来更新实际的 DOM。
Vue 也提供了一些性能优化手段，如 key 的使用、计算属性、懒加载等，但它们与 React Fiber 的异步更新机制不同。

组件生命周期

React Fiber:

React 的 Fiber 架构引入了新的生命周期方法，如 getSnapshotBeforeUpdate 和 getDerivedStateFromError，以及对现有生命周期方法的一些更改。
由于更新的异步性，React 的生命周期方法的行为可能与之前的版本有所不同。

Vue Virtual DOM:

Vue 提供了明确定义的组件生命周期钩子，如 created、mounted、updated 和 destroyed。
Vue 的生命周期钩子通常在虚拟 DOM 的更新过程中的不同阶段被调用，且这些钩子的执行是同步的。

源码实现

React Fiber:

Fiber 的实现相对复杂，它使用了一个循环的数据结构来表示组件的更新过程，这使得 React 能够更精细地控制组件的渲染和副作用处理。

Vue Virtual DOM:

Vue 的虚拟 DOM 实现较为简洁，它使用了一个递归的树状结构来表示组件和元素。

总结

React 的 Fiber 架构和 Vue 的虚拟 DOM 都是为提高性能而设计的，但它们在实现细节和提供的优化机制上存在一些差异。React Fiber 通过异步更新和时间切片来优化大型应用的性能，而 Vue 则侧重于减少不必要的 DOM 操作和提供一系列生命周期钩子来进行性能优化。开发者可以根据项目需求和个人偏好选择合适的库。

在react15及之前是没有fiber的，react执行一次更新操作都是同步的，他是通过递归去进行更新，一旦开始就不会中断直到结束。这也就造成了页面性能的低下，体验非常差。

而fiber的出现，他将更新渲染耗时长的大任务变成很多小切片，小切片执行完后就去执行高优先级的任务，比如：用户点击输入等等，将不可中断的渲染变成可中断的渲染，提高了页面的流畅度和性能。

有了fiber，React 渲染的过程可以被中断，可以将控制权交回浏览器，让位给高优先级的任务，浏览器空闲后再恢复渲染。它采用的是一种主动让出机制。（可以由游览器给我们分配执行时间片，通过requestIdleCallback实现