React面试题大全

1. props和state相同点和不同点？render方法在哪些情况下会执行？

相同点：

1.都是用于存储组件的数据
2.都会触发组件的重新渲染

不同点:

1.Props是从父组件传递给自组件的数据，是只读的，子组件无法直接修改Props的值。而state是组件自身的数据，可以通过setState()方法进行修改。
2.Props是外部传递给组件的，一般用于组件之间的数据通信。State是组件内部管理的，用于组件自身的状态控制。
3.Props的更新会触发子组件的重新渲染，而state的更新会触发当前组件的重新渲染。
4.props可以设置默认值和类型检查，而state不可以

render方法执行时机：

1.组件初始化渲染时，会执行一次render方法
2.当组件的props或state发生变化时，会触发重新渲染，执行render方法
3.当父组件发生重新渲染时，自组件的render方法也会执行
4.当调用forceUpdate()方法强制重新渲染时，也会执行render方法。

2. shouldComponentUpdate有什么作用？

shouldComponentUpdate是React类组件中的一个生命周期钩子函数，它的主要作用是返回一个布尔值来判断是否重新渲染，从而来提升性能。

详解:

shouldComponentUpdate 方法接收两个参数，分别是新的 props 和新的 state，它返回一个布尔值。如果返回 true，那么 React 将会继续更新过程，即调用 render 方法重新渲染组件；如果返回 false，那么 React 将会跳过此次更新过程，包括调用 render 方法和后续的子组件的生命周期方法。其次是在首次渲染或者当forceUpdate被调用时，它不会被调用。

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

虚拟dom是啥？？

React中的虚拟dom是对真实dom的一种抽象表达，是一个js对象，同时也映射了dom与js之间的关系。当组件状态发生变化时，React 会创建一个新的虚拟 DOM 树，与当前的虚拟 DOM 树进行比较。React 通过比较新旧虚拟 DOM 树的差异，找出需要更新的部分，然后只更新改变的部分。

关系又是啥？？

• Diff 算法是用来比较新旧虚拟 DOM 树的差异，找出需要更新的部分。Diff 算法会遍历新旧虚拟 DOM 树的节点，进行比较和判断。
• Key 属性是用来帮助 React 进行更准确的节点识别和对比。在 Diff 算法中，React 会根据 Key 属性来判断当前节点是否是同一个节点，从而决定是否需要进行更新。Key 属性可以提供稳定的唯一标识，帮助 React 更准确地追踪节点的变化。

4. react新出来两个钩子函数是什么？和删掉的will系列有什么区别？

• 新增了getDerivedStateFromProps和 getSnapshotBeforeUpdate两个生命周期钩子函数

• 删掉的will系列的钩子函数有：
  componentWillReceiveProps
  componentWillMount
  componentWillUpdate

• 新的比旧的好呗
  componentWillReceiveProps 同样也被标记弃用，被 getDerivedStateFromProps 所取代，主要原因是性能问题。
  componentWillUpdate 同样是由于新的异步渲染机制，而被标记废弃，不推荐使用，原先的逻辑可结合 getSnapshotBeforeUpdate 与 componentDidUpdate 改造使用。

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

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

6.React组件之间如何通信？

React组件通信分为父传子子传父以及兄弟组件之间的传值。
父传子:父组件的子组件定义一个自定义属性，自定义属性的值就是要传递的数据。
子传父:父组件中定义一个回调函数，然后通过父传子的方式将这个方法传递给子组件，子组件进行调用，参数就是子组件传递给父组件的数据。
兄弟组件之间的传值还可以分为状态提升以及发布订阅模式两种
状态提升就是子传父然后在进行父传子
发布订阅模式是，订阅者提供一个回调函数并存在数组中，然后发布者去调用这个函数
我们还可以使用content来进行跨组件的通信，首先通过createcontext创建一个context对象，然后从context对象中导出两个组件provider和consumer，用provider包裹要传递数据的组件，value就是要传递的数据，如果接收的组件是类组件，那么可以通过定义一个静态方法contexttype来接收这个context对象，this.context来接收数据，如果接受的组件是一个函数组件，那么我们就需要用consumer进行包裹，里面返回一个jsx，函数的第一个参数就是传递的数据
最后我们还可以使用状态管理工具来进行组件之间的通信，在react中我们可以通过redux，@reduxjs/toolkit以及react-redux来进行组件之间的通信。

7.谈谈你对immutable.js的理解？

• Immutable.js采用了 持久化数据结构 ，保证每一个对象都是不可变的，任何添加、修改、删除等操作都会生成一个新的对象，并且这个新对象的数据结构会利用旧的数据结构
• 不可变数据结构可以通过共享部分数据来节省内存和运算开销。因为若两个不可变对象之间有大部分相同的数据，它们可以共享这些数据

8.redux本来是同步的，为什么它能执行异步代码？实现原理是什么？中间件的 实现原理是什么？

Redux 本身是一个同步的状态管理库，但是可以通过中间件来处理异步代码。中间件是 Redux 的一个扩展机制，它允许在 action 被发起之后到达 reducer 之前，对 action 进行额外的处理。

中间件的实现原理是利用 Redux 提供的 dispatch 方法的特性。当一个 action 被 dispatch 到 Redux store 时，中间件可以拦截这个 action，并对其进行处理。中间件可以执行一些异步操作，如发送网络请求、处理副作用等，然后再将处理后的 action 交给下一个中间件或者最终的 reducer 进行处理。
总的来说，中间件允许在 Redux 的 dispatch 过程中对 action 进行拦截和处理，从而实现了对异步代码的支持。不同的中间件库有不同的实现方式，但核心思想都是在 action 发起和 reducer 处理之间插入额外的逻辑，以实现异步操作的处理。

9.redux中同步action与异步action最大的区别是什么？

同步 action 是一个简单的 JavaScript 对象，其包含一个 type 属性来描述动作类型，以及其他需要的属性。同步 action 通常用于描述一些立即发生的操作，如用户点击按钮、输入框变化等。它们被直接发送到 Redux store，并立即被 reducer 处理，从而更新状态。

异步 action 是一个函数而不是一个简单的对象。这个函数可以在内部执行一些异步操作，如发送网络请求或定时器延时操作等。异步 action 通常用于描述一些需要等待一段时间才能获得结果的操作，如异步获取数据。异步 action 通常会通过 Redux 中间件（如 Redux Thunk 或 Redux Saga）来处理。在异步操作完成后，可以手动调用 dispatch 发起一个或多个同步 action，以更新状态。

因此，同步 action 和异步 action 的最大区别在于处理的时机和返回的内容。同步 action 是立即被处理的，而异步 action 是延迟处理的，通过中间件进行处理。同步 action 返回一个简单的对象，而异步 action 返回一个函数，用于处理异步操作并发起同步 action。

10.redux-saga和redux-thunk的区别与使用场景？

Redux Thunk：

Redux Thunk 是一个简单的中间件，允许 action 创建函数返回一个函数。这个函数可以接收 dispatch 和 getState 作为参数，可以在函数内部进行异步操作，然后手动调用 dispatch 发起一个或多个 action。
Redux Thunk 的使用相对简单，适用于简单的异步场景，如发起一个简单的网络请求或处理副作用的操作。它可以方便地处理异步逻辑，但可能在处理复杂的异步流程时会显得不够灵活。
Redux Saga：

Redux Saga 使用了 ES6 的 Generator 函数来处理异步操作，通过定义一系列的 Generator 函数来描述异步流程。
Redux Saga 提供了一系列的效应（Effect）来执行异步操作，如调用 API、延时等。Saga 监听特定的 action，并在这些 action 触发时执行相应的操作。
Redux Saga 更适用于处理复杂的异步场景，如处理多个并发请求、处理异步流程的错误和取消等。它提供了更丰富的控制流程和错误处理的能力，同时也更具可测试性。
总结来说，Redux Thunk 简单易用，适合处理简单的异步操作，而 Redux Saga 更适合处理复杂的异步场景，提供了更强大的控制流程和错误处理能力。根据具体的业务需求和异步处理的复杂程度，选择合适的中间件来处理异步操作。