######理论2

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

Props和State是React组件中的两个重要概念。

相同点：

1. 二者都是用于管理和更新组件的数据。
2. 它们的更新都可以引发UI的重新渲染。

不同点：

1. Props（Properties）是由父组件传递给子组件的，一般用于传递不可变的数据。在子组件中，Props是只读的，不能直接修改。当Props变化时，React会自动重新渲染子组件。
2. State 是组件内部自身管理的可变数据。通过声明并初始化state属性，在组件实例中对其进行修改。当state发生变化时，React会触发重新渲染组件，以便展示最新的数据。

关于render方法： 在React组件中，render方法是用于渲染组件的UI结构的核心方法。它在以下情况下被执行：

1. 组件初始化时。
2. 组件的Props或State发生变化时。当Props或State有更新时，React会重新调用render方法，根据最新的Props和State渲染出最新的UI结构。
3. 父组件进行重新渲染时，即使子组件的Props和State没有发生变化，也会触发子组件的render方法。

需要注意的是，React会尽量优化性能，在某些情况下可能会跳过不必要的渲染。但通常情况下，只要Props或State发生变化，render方法都会被调用。

shouldComponentUpdate有什么作用？

shouldComponentUpdate 是 React 组件生命周期中的一个方法，它用于控制组件是否需要重新渲染。该方法在组件接收到新的 props 或者 state 时被调用。

shouldComponentUpdate 的作用是进行性能优化。默认情况下，每当组件接收到新的 props 或者 state，React 会自动重新渲染组件，无论数据是否发生了变化。但有时候，组件的渲染并不必要，因为数据并没有发生变化，这时就可以通过实现 shouldComponentUpdate 来避免不必要的渲染，提升性能。

在 shouldComponentUpdate 方法中，我们可以根据业务逻辑和当前的 props 和 state 进行判断，返回一个布尔值来指示是否进行重新渲染。如果 shouldComponentUpdate 返回 false，react 将阻止 render 方法的调用，从而节省了不必要的渲染开销。

shouldComponentUpdate它是一个优化性能的组件，避免了不必要的操作

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

虚拟DOM是React的一种技术，用于提高页面渲染性能和优化DOM操作。它是一个轻量级的js对象树，与实际的DOM元素一一对应，并且具有相似的结构和属性

在虚拟 DOM 计算过程中，Diff 算法用于比较新旧虚拟 DOM，确定哪些部分需要更新。Diff 算法会对比两个虚拟 DOM 树的节点类型、属性和顺序等信息，以确定需要进行的操作。它会尽量复用已存在的实际 DOM 节点，从而减少对实际 DOM 的操作次数。

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

UseState:使函数组件能够拥有状态和状态更新的能力。通过这个函数，可以声明一个状态变量，并返回当前状态和更新状态的函数

UseEffect:它提供了在函数组件中处理副作用的能力，通过使用这个函数，可以在组件渲染完成后执行副作用的操作

区别：他们的函数语法不同，will系列一般带有will关键字，而新出的并没有；他们的作用不同，新出的两个钩子函数，作用相对较大一些，以及应用的范围较广；他们的触发时机也不同

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

当使用map函数遍历React组件的props.children时，会收到异常显示的原因是，props.children在不同情况下的数据类型可能是不同的。

通常情况下，props.children可以是一个单独的React组件，也可以是多个React组件组成的数组，甚至可以是字符串、数字等其他类型的数据。只有当props.children是一个数组时，才能使用map函数进行遍历。

如果要遍历props.children，可以先进行类型检查，确保它是一个数组，然后再使用map函数进行遍历。下面是一个示例代码：

```jsx
function ParentComponent(props) {
  // 检查props.children是否为数组
  if (!Array.isArray(props.children)) {
    return null; // 或者根据具体情况返回其他内容
  }

  return (
    <div>
      {props.children.map((child, index) => {
        return (
          <div key={index}>
            {child}
          </div>
        );
      })}
    </div>
  );
}
```

在上述示例中，首先通过`Array.isArray()`检查props.children是否为数组，如果不是，则返回null或其他内容。如果是数组，则使用map函数遍历每个子组件，并将其包裹在一个父元素中，同时为每个子组件设置唯一的key属性。

这样，就可以安全地遍历props.children并渲染出对应的React组件。请确保在遍历时注意设置合适的key属性以提高渲染性能和避免警告。

React组件之间如何通信？

Props（属性）传递：父组件可以通过 props 将数据、方法或其他组件传递给子组件。子组件可以通过 this.props 来访问传递的属性。这是 React 中最常见也是最基本的一种通信方式。

回调函数：父组件可以将函数作为 props 传递给子组件，并在子组件中调用该函数完成与父组件的通信。通过回调函数，子组件可以将数据或事件传递给父组件。

Context：Context 可以在组件树中跨层级地共享数据，而不必通过逐层传递 props。通过创建一个 Context 对象，父组件可以将需要共享的数据传递给 Provider 组件，然后子组件可以通过 Consumer 组件来获取共享的数据。

Redux 或其他状态管理库：对于大型应用或多个组件间复杂的状态管理需求，可以使用 Redux 或其他状态管理库来集中管理应用的状态。可以在任何组件中访问和更新共享状态，从而实现组件间的通信。

发布订阅模式：可以使用第三方库如 Event Emitter 或自定义的发布订阅模式来实现组件间的通信。一个组件可以发布事件，而其他组件则可以订阅并响应这些事件。

谈谈你对immutable.js的理解？

它内部实现了一套完整的持久化数据结构，有很多的数据类型以及全面的函数操作方法

它里面的数据就是一旦创建，就不能再被更改。对 Immutable 对象的任何修改、添加或删除操作都会返回一个新的 Immutable 对象。Immutable 实现原理是持久化数据结构，也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。为了避免深度拷贝把所有节点都复制一遍带来的性能损耗，Immutable 使用了共享结构，即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

优点：降低Mutable带来的复杂度，节省内存空间，进行数据共享并会尽量的复用内存。

缺点：提高了学习成本，需要额外引入资源文件，使用过程中容易与原生对象混淆

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

Redux本身是一个同步的状态管理库，但它通过中间件机制来支持异步操作。中间件是位于action被发起(dispatch)之后，到达reducer之前的处理过程，用于拦截、处理或转换action。

实现原理：
1. Redux的异步操作是通过中间件来实现的，最常用的中间件是Redux Thunk和Redux Saga。
2. Redux Thunk中间件允许我们在action创建函数中返回一个函数而不仅仅是一个action对象。这个返回的函数可以接收dispatch和getState作为参数，并且可以在其中执行异步操作，例如发送网络请求，然后根据请求结果再次调用dispatch去派发其他action。
3. Redux Saga中间件使用了Generator函数（也可以使用Async/Await）来处理异步操作。Saga是一个独立的线程，负责处理应用程序的副作用，比如异步请求、监听事件等。通过使用Generator函数，Saga可以以非阻塞的方式与Redux Store进行交互。

中间件的实现原理：
1. Redux中间件的基本原理是使用柯里化函数（Currying）封装store.dispatch方法，使其能够在执行dispatch时，经过中间件的处理。
2. 中间件需要返回一个新的dispatch函数，该函数接受原始的dispatch作为参数，并且具有修改、拦截、增强或延迟派发action的能力。
3. 在Redux中，通过applyMiddleware函数将中间件应用到Redux Store，并将修改后的dispatch替换成新的dispatch。

简化示例代码如下：
```javascript
function applyMiddleware(...middlewares) {
  return function (createStore) {
    return function (reducer) {
      const store = createStore(reducer);
      
      let dispatch = store.dispatch;
      // 应用中间件，将修改后的dispatch作为参数传入中间件
      middlewares.forEach(middleware => {
        dispatch = middleware(store)(dispatch);
      });

      return {
        ...store,
        dispatch
      };
    };
  };
}

// 使用中间件

const store = applyMiddleware(middleware1, middleware2)(createStore)(reducer);
 

通过这种方式，中间件可以在派发(action dispatch)和到达reducer之间执行操作，例如日志记录、异步请求处理、状态转换等。它为Redux提供了更加灵活和扩展的功能。

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

触发时机：

同步action：在Redux中，同步action是直接由应用程序的其他部分调用，用于描述应用程序中发生的一些同步操作，或者表示用户的某个交互行为。

异步action：异步action通常由异步操作（例如API请求）触发，并且在操作完成后才会被dispatch。异步action可以用于处理网络请求、定时器等需要一定延迟或依赖外部操作的情况。

Action Creator函数的返回值类型：

同步action：同步action的action creator函数直接返回一个普通的JavaScript对象，这个对象包含了action的类型和负载（payload）数据。

异步action：异步action的action creator函数返回一个函数（Thunk函数或Promise对象），这个函数内部可以进行异步操作，并在合适的时机dispatch真正的同步action对象。

数据流处理：

同步action：同步action被dispatch后，会直接触发reducer函数对应的case，执行相应的状态更新操作。整个过程是同步的，数据流是直接、立即的。

异步action：异步action被dispatch后，会被中间件拦截并处理，通常会进行一系列的异步操作，例如发起网络请求获取数据，等到这些操作完成后，再dispatch相应的同步action来更新状态。

总结来说，同步action主要用于表示直接发生的、立即的操作，而异步action则用于表示需要一定延迟或依赖外部操作的操作。异步action通常需要借助中间件（如redux-thunk、redux-saga等）来处理异步操作，保持redux单向数据流的一致性。

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

redux-thunk的使用？
redux-thunk就是用来异步操作、接口请求的，使用之前需要先进行下载安装才能使用。

redux-thunk相当于是基于store的升级，一般情况，我们传给store的action是一个对象，但是通过redux-thunk中间件，我们可以把部分的业务逻辑（异步请求）等放在action中进行处理。当store接收到函数类型的action，redux-thunk会执行该函数，并传入参数dispatch，当函数内部的逻辑执行完成后，会再次派发一个action继续向下执行。

redux-saga的使用？
redux-saga在store的index文件中创建saga中间件连接到store，saga中间件可以监控派发action,如果有action.type值与监控的变量一致，则执行该函数的内容，在这个函数中也可以再派发一个新的action

应用场景
redux-thunk
dispatch一个action之后，到达reducer之前，进行一些额外的操作，就需要用到middleware。你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。
换言之，中间件都是对store.dispatch()的增强。redux-thunk就是用来异步操作，比如接口请求等。

redux-saga
redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件。

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

在Redux中，可以采用一些措施来避免定义的action type常量重复，以确保代码的可读性和维护性。

1. 使用命名空间（Namespace）：在定义action type时，可以根据不同的模块或功能给它们分配不同的命名空间前缀，从而避免冲突。例如：

```javascript
// 模块A的action types
export const MODULE_A_ACTION_TYPE = {
  ACTION_1: 'MODULE_A/ACTION_1',
  ACTION_2: 'MODULE_A/ACTION_2',
};

// 模块B的action types
export const MODULE_B_ACTION_TYPE = {
  ACTION_1: 'MODULE_B/ACTION_1',
  ACTION_2: 'MODULE_B/ACTION_2',
};
```

2. 使用常量文件或模块：将所有的action type常量集中存放在一个独立的文件或模块中，以便统一管理和避免重复。例如：

```javascript
// actionTypes.js

export const ACTION_1 = 'ACTION_1';
export const ACTION_2 = 'ACTION_2';
```

3. 使用工具库：可以使用第三方工具库，如`redux-actions`或`immer-reducers`，它们提供了更高级的方式来定义和处理action types，以避免重复。

4. 使用唯一标识符：可以生成唯一的标识符作为action type，例如使用UUID（通用唯一标识符）来确保全局唯一性。

使用上述方法之一，可以在Redux应用中有效地避免定义的action type常量重复问题，提高代码质量和可维护性。

CDN的特点及意义？

CDN（Content Delivery Network）即内容分发网络，是一种通过部署在全球各地的边缘节点服务器来提供高速、可靠的内容传输和分发服务的技术架构。

CDN的特点包括：

1. 高效的内容传输：CDN利用就近性原则，在用户请求内容时，会将内容副本缓存到离用户最近的边缘服务器上，实现就近访问。这样可以减少网络延迟，提高内容传输的速度和响应时间。
2. 负载均衡：CDN使用负载均衡技术，根据用户的位置、网络状况等因素，智能地将用户请求分发给最适合的服务器，避免单一服务器过载，提高整体的性能和稳定性。
3. 高可用性和容错性：CDN采用冗余存储和数据备份机制，当某个服务器或网络出现故障时，可以快速切换到其他正常的服务器或备份数据源，保证内容的可用性和可靠性。
4. 减轻源站压力：CDN可以缓存和直接处理静态内容，如图片、视频、脚本文件等，将部分流量从源站转移到边缘服务器，减轻了源站的压力，提高了源站的可用性和性能。
5. 安全性增强：CDN可以提供一些安全功能，如防止DDoS攻击、Web应用防火墙等，保障用户和内容的安全。

CDN的意义在于：

1. 提升用户体验：CDN可以加速内容传输，减少加载时间，提高网站、应用或视频等内容的访问速度和响应时间，从而改善用户体验，降低流失率。
2. 节省带宽成本：CDN通过将内容就近分发，减少了数据从源站到用户的传输距离，减轻了源站的负载，降低了带宽使用和成本。
3. 提高可靠性和稳定性：CDN采用冗余存储和容错机制，当源站或网络出现故障时，能够快速切换到其他正常的服务器或备份数据源，保证内容的可用性和稳定性。
4. 加强安全性：CDN可以提供一些安全功能，如防止DDoS攻击、Web应用防火墙等，提升了网站和应用的安全性。
5. 支持全球化业务：CDN在全球范围内分布有边缘节点，可以为全球用户提供更快速、稳定的内容传输服务，支持企业的全球化业务扩展和用户的全球访问需求。

综上所述，CDN通过优化内容分发和传输，提升了用户体验，降低了带宽成本，增强了安全性，对于网站、应用和视频等内容提供商来说具有重要的意义。

为什么for循环比forEach性能高？

在一些具体的情况下，`for`循环比`forEach`迭代函数的性能可能会更高。

1. 代码执行效率：`for`循环时使用的是简单的迭代机制，它直接通过索引值进行循环遍历，在每次循环中执行相应的操作。而`forEach`迭代函数则需要定义一个回调函数，并且每次迭代都会调用该回调函数，增加了函数调用的开销。因此在大规模数据处理时，`for`循环通常执行效率更高。

2. 作用域访问：在`for`循环内部，可以通过定义变量来存储中间结果，在循环过程中直接读取和修改变量值。而`forEach`迭代函数则无法在外部定义变量，并且每次迭代都会隐式创建一个新的函数作用域，导致在循环中的变量访问略慢。

3. 兼容性：`for`循环是一种基本的迭代方式，几乎所有的 JavaScript 环境都支持。而`forEach`是 `Array` 的方法，仅在支持 ES5 或更高版本的环境中才可用。因此，如果需要考虑低版本浏览器或其他环境的兼容性，使用`for`循环更为稳妥。

需要注意的是，性能差异在现代 JavaScript 引擎中通常较小，而可读性和代码简洁性更重要。除非在特定场景中需要优化性能，否则代码的可读性和维护性应优先考虑。

总而言之，`for`循环相对于`forEach`迭代函数在性能上有一些优势，但具体的性能差异会受到多种因素的影响，包括数据量的大小、具体操作的复杂度以及 JavaScript 引擎的优化程度等。在实际使用时，应综合考虑性能和代码可读性，选择适合的迭代方式。

说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

@reduxjs/toolkit是一个工具集，主要简化和改善redux的使用体验，它是建立在简化代码和提供了一个工作库。它简化了store的操作，以及创建了一个action和reducer参数，主要进行异步操作，

相比于传统的redux，@reduxjs/toolkit简化了react-redux的使用方式，并提供了一些常用的封装，使得开发者能够快速高效的开发redux应用，而@reduxjs/toolkit与react相结合起来能够使react-redux的使用更加快捷方便

它提供了provider组件并应用注入store中，并且使用了connect进行封装，使得组件能够访问到redux中的状态和操作

@reduxjs/toolkit的使用创建了一个库，它简化react使用的一个流程集的工具，与react-redux相比更加方便快捷

React render方法的原理，在什么时候会触发？

React 的 `render` 方法是用于将组件的输出呈现到页面上的方法。它是 React 组件生命周期中的一部分，通过调用 `render` 方法，React 将根据组件的状态和属性生成并返回一个描述组件输出的虚拟 DOM 对象。

`render` 方法的原理如下：
1. 首先，当组件被创建或者更新时，React 会调用组件的 `render` 方法。
2. 在 `render` 方法中，开发者需要编写用 JSX（JavaScript XML）语法描述组件的输出。这些 JSX 元素实际上是虚拟 DOM 对象，它们描述了组件输出的结构和内容。
3. React 会将这些虚拟 DOM 对象与之前的虚拟 DOM 进行比较，找出差异。
4. 在找到差异后，React 会根据差异生成最终需要更新到页面的操作指令，这些指令存储在内存中，形成所谓的“调和（reconciliation）”过程。
5. 最后，React 根据这些操作指令，将更新应用到实际的 DOM 上，从而更新页面上的内容。

`render` 方法何时触发取决于组件的生命周期和状态改变：
- 组件首次渲染时，`render` 方法会被调用。
- 如果组件的状态或属性发生改变，React 会重新调用 `render` 方法以获取新的虚拟 DOM 对象，并更新页面上的内容。这是通过 React 的调和过程和虚拟 DOM 比较机制实现的。

需要注意的是，`render` 方法应该是一个纯函数，即在相同的输入（状态和属性）下，始终返回相同的输出（虚拟 DOM）。这样有助于 React 进行高效的比较和更新操作。因此，应避免在 `render` 方法中执行复杂的计算或异步操作，以提高性能和可预测性。

总结：`render` 方法是 React 组件生命周期中的一部分，用于将组件的输出呈现到页面上。它在组件首次渲染和状态/属性改变时触发，并通过调和机制将输出更新到实际的 DOM 上。

![] == ![]，![] == []，结果是什么？为什么？

 ![] == ![]  首先是!的优先级要比 == 高 所以 先执行两边的 ![] 然后单个的[]是true 加上!取反 也就是false了 然后 第一个 ![] == ![] 也就是等于 false == false 最后返回的是true   然后后边的![] == [] 也是因为!优先级高 所以先把左边的变成false == [] 然后又因为 两个值相比较 如果有一方的值是布尔值的话 就会把另一方转成数值 然后 [] 转成数值的话 就是 0  然后因为0 = false 所以最后 也是false == false  最后也返回一个true

什么是闭包，应用场景是什么？

一个函数对其周围状态的引用捆绑在一起，这样的场景就叫做闭包

闭包可以在一个函数内层访问到外层的作用域

应用场景：

它可以创建私有变量，并且应用在函数创建中，延长生命函数的周期

使用柯里化函数可以避免相同参数的调用，并且能够轻松使用

谈谈你是如何做移动端适配的？

响应式设计通过使用css媒体查询和流动布局里适配不同的屏幕尺寸

视口是指用户在设备上可见的区域。

相对单位可以根据父元素或根元素的大小进行自适应布局。弹性图片：使用CSS的 max-width: 100%; 属性来确保图片在不同屏幕尺寸下能够自适应缩放，并防止图片溢出。

媒体查询可以根据屏幕尺寸、设备类型等条件来加载特定的CSS样式。通过设置不同的样式，可以实现适配不同屏幕的效果。

许多前端框架和库提供了移动端适配的解决方案，通过使用这些框架可以简化适配过程，并提供一致的设计和交互效果。

在进行移动端适配时，及时进行测试和调试是非常重要的。可以使用模拟器

移动端1像素的解决方案？

在移动端开发中，要解决 1 像素的问题，常见的解决方案有以下几种：

1. 使用边框 + 缩放：可以通过给元素添加一个细线宽度的边框，并使用 CSS 的缩放（`transform:scale()`）将元素缩小到原始大小的 0.5 或更小，从而实现 1 像素的效果。例如：

   ```css
   .one-pixel-border {
     position: relative;
     border: 1px solid #000;
     transform: scale(0.5);
     transform-origin: 0 0;
   }
   ```

   这种方法需要注意在高分辨率屏幕上可能需要调整缩放比例。

2. 使用伪元素 + 缩放：通过创建一个伪元素，设置其高度为 1 物理像素，并使用缩放将其高度放大到所需的设备像素比例。例如：

   ```css
   .one-pixel-border:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background-color: #000;
     transform-origin: 0 0;
     transform: scaleY(0.5);
   }
   ```

   这种方法相对于使用边框的方法，可以更精确地控制边框的位置和样式。

3. 使用viewport单位：`vw` 单位是相对于视口宽度的单位，例如 `1vw` 表示视口宽度的 1%。利用这个特性，可以通过设置元素的宽度为 `0.5vw` 来实现近似 1 像素的效果。例如：

   ```css
   .one-pixel-element {
     width: 0.5vw;
     height: 100%;
     background-color: #000;
   }
   ```

   这种方法需要在页面的 `<head>` 标签中添加 `<meta name="viewport" content="width=device-width, initial-scale=1">` 来确保视口宽度的正确计算。

以上是一些常见的解决方案，具体可根据项目需求和兼容性要求选择适合的方法。另外，还可以使用相关的 CSS 框架或工具库来简化处理 1 像素问题的步骤，例如使用 `border.css`、`postcss-px-to-viewport` 等。

弹性盒中的缩放机制是怎样的？

缩放机制是指用于控制项目的缩放行为的属性和特性

它可以使用一些属性来进行缩放：

flex-grow：该属性定义项目在剩余空间中的伸展比例。默认值为0，表示项目不会伸展。flex-shrink：该属性定义项目在空间不足时的缩小比例。默认值为1，表示项目会缩小，使得其他项目可以得到更多空间。flex-basis：该属性定义项目在主轴上的初始大小。默认值为auto，表示项目会根据其内容自动计算大小。可以使用具体的长度值或百分比来指定初始大小。