react题

没return：1.没{},2.只有一个语句

json:一门表示通用数据的语言，用来做数据交换，json可以表示对象，数组，number。一般ajax请求里得到的数据是json

Unicode：字符集合 utf8：计算机编码，存在计算机里

dom：文档对象模型，网页变成js对象，进行增删改查

bom：浏览器对象模型js操作地址栏

原型：

promise（承诺）

解决回调地狱 pdding开始 fulfillled成功 reject失败

三个状态，不可变（承诺的效果）

axios封装

1.创建app.js文件，导入axios，并使用axios.create创建实例，在这里可以设置一些默认配置：

baseurl，timeout，headers

接下来，我们可以在api.js中创建一些方法，用于发送各种不同类型的请求

我们导入了get方法，并使用它发送了一个GET请求。我们可以在.then块中处理响应，并在.catch块中处理错误。

1. 请求拦截：在发送网络请求前，可以通过拦截器对请求进行拦截和处理，比如添加请求头信息、对请求数据进行加密等。（用于加token）

2. 响应拦截：在接收到网络响应后，可以通过拦截器对响应进行拦截和处理，比如对响应数据进行解密、对错误进行统一处理等。（用于错误状态码跳转）

·浏览器兼容：使用caniuse工具检测

react单项数据流：数据只能从父组件传递子组件，而不能反向流动，也就是说子组件不能直接修改父组件传过来的props，只能通过父组件传递的回调函数来修改

react数据更新后渲染过程

Redux

Redux使用单一的“store”来存储应用程序的状态，并使用“reducers”来更新状态。Redux还提供了一个“action”和“dispatcher”模式

reducer和context可以结合使用，从而实现全局状态管理

通常情况下，我们会在顶层组件中创建一个context，然后使用useReducer Hook来创建一个reducer函数和初始状态，最后将状态和dispatch函数通过context向下传递给子组件。

import React, { createContext, useContext, useReducer } from 'react';

// 创建一个全局上下文
const GlobalContext = createContext();

// 初始状态
const initialState = {
  count: 0,
};

// 定义reducer函数
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

// 定义一个组件，使用全局上下文
function Counter() {
  const { state, dispatch } = useContext(GlobalContext);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

// 定义一个组件，提供全局上下文
function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <GlobalContext.Provider value={{ state, dispatch }}>
      <Counter />
    </GlobalContext.Provider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

创建了一个GlobalContext，并定义了一个reducer函数和初始状态initialState。我们使用useReducer Hook来创建一个状态state和一个dispatch函数，然后将它们通过GlobalContext.Provider向下传递给Counter组件。在Counter组件中，我们使用useContext Hook来访问全局状态和dispatch函数。

---

• MobX 是一种基于响应式编程的状态管理库，它通过将状态声明为可观察的对象，自动跟踪状态的变化并更新相关的组件。MobX 的主要目标是使开发人员可以使用简单、直观的代码来管理复杂的状态。

• Redux 是一种基于函数式编程的状态管理库，它通过定义一系列纯函数来管理状态，这些函数将当前状态和一个操作作为输入，返回一个新的状态。Redux 的主要目标是提供可预测性、可维护性和可测试性。

因此，虽然这两个库都可以用于管理状态，但它们的设计哲学和用法不同。MobX 更适合管理大量数据的复杂应用程序，而Redux则更适合管理大规模的应用程序状态，例如企业级Web应用程序和游戏。

---

React-Router提供了两种路由模式：HashRouter和BrowserRouteri

为啥虚拟dom（一个代表dom树的对象）快，

优点

一：减少操作次数

1.减少dom操作，将多次操作变为一次，比如要操作1000个div，dom需要操作1000次，而虚拟dom往数组里放1000个文本，一次渲染出来

2.减少dom操作范围，如果有一些是页面里的，借助dom diff它就不会更新

二：跨平台：虚拟dom本质是js对象，js对象可以变安卓，可以变dom

Sass/Less

css预处理器:css语言中添加额外功能和语法的，使css编码更加高效和易于维护的工具。

包括变量（见名知意），函数，嵌套，混入（以sass为例，先@定义，在需要的地方进行引入，提提高代码重用率；使用见名知意，方便代码维护和阅读），其中嵌套用的最多，

区别：功能基本相似，

1.sass基于ruby（编程语言），在后端运行；less基于js，在前端运行

2.sass变量@；less变量$

3.混入：less

.rounded-corners(10px);

sass 需要@

div {
　　　　@include left(20px);
　　}

4.sass增加了循环（循环定义不同字体大写的字体），条件（不同条件生成不同样式），自定义函数

5.Less可以向上/向下解析；Sass只能向上解析。

TS静态类型语言

ts的方法：1.类型断言,告诉某个值具体的类型：as，<>

当ts无法识别类型时，可以用断言告诉编译器具体类型

在使用一些 dom时，需要类型断言，dom元素对象类型通常是 HTMLElement 或 Element，它们只包含一些基本的属性和方法，不能直接访问 DOM 元素的具体属性和方法。

HTMLInputElement 类型包含 value 属性，而 HTMLSelectElement 类型包含 selectedIndex 属性等。

let elem = document.getElementById("myElem");
let elemValue = (elem as HTMLInputElement).value;

2.类型注解可以在变量、函数、参数等地方标注类型

let num: number = 123;
function greet(name: string): string {
  return "Hello, " + name;
}

3.接口interface

描述对象的方法和属性，用于定义对象类型，在代码中限制参数，函数，变量

interface Person {
  firstName: string;
  lastName: string;
  age: number;
  sayHello: () => string;
}

4.泛型（使用后再定义）

function identity<T>(arg: T): T {
  return arg;
}
let output = identity<string>("hello");

5.枚举：自定义类型，用于列出一组有限的命名值，使用关键字enum

enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;

6.类是一种对象模板，用于创建对象的实例

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}
let greeter = new Greeter("world");

ts的提示：

1.类型错误：字符串分配给数字类型的变量时

2..语法错误  3.未定义变量：如果您使用了未定义的变量

4.缺少类型注释：TypeScript 鼓励您对变量和函数进行类型注释

5.无法找到模块6.缺少必需的属性

TS中遇到的困难：

1.类型定义：如果你使用的是第三方库，可能需要手动添加类型定义文件

2.使用的是 React 17 或以上版本，需要手动引入 React 类型，否则 TS 无法识别 JSX 的类型

import React from 'react';

never

在TS中，有一个很特殊的类型，就是never，never只能在两种情况下使用

• 函数永远不会有返回值时，例如 while(true){}

  const [n,setN] = React.useState<number>(1)
  const add: ()=>never = () => {
      while(true){ setN(i=>i+1) }
  }
复制代码

• 函数永远会抛出一个错误时。

  const fn: ()=>never = () => {
      throw new Error('error')
  }
复制代码

• 与void的差异 void 和 never 都是表示一个函数没有返回值，但是他们之间最大的区别是，void 表示可以被赋值的类型，never表示其他任何类型也不能被赋值给它，它只能是never

interface 和 type 的区别

• interface 只能声明 函数/对象

interface X {
	a: number
    b: string
}

interface Y {
	() => void
}
复制代码

• type 除了能声明 对象/函数 以外，还能为基础类型声明别名

type X = number | string
复制代码

• interface 能声明后进行合并

interface X {
	a: string
    b: number
}

interface X {
	c: boolean
}

// X = {
    a: string
    b: number
    c: boolean
    }

---

webpack打包懒加载

封装公用的hooks适用于React函数组件的各种应用场景，下面列举一些常见的应用场景：

1. 状态管理：使用useState或useReducer等hook封装状态管理逻辑，可以在多个组件中共享状态，避免状态的重复维护和传递。

2. 副作用管理：使用useEffect等hook封装副作用管理逻辑，如订阅事件、发送网络请求等，可以避免重复订阅和内存泄漏问题。

3. 表单校验：使用自定义hook封装表单校验逻辑，可以在多个表单中复用校验规则，避免代码冗余和重复编写。

4. 路由管理：使用自定义hook封装路由管理逻辑，可以在多个组件中复用路由跳转逻辑，避免代码冗余和重复编写。

5. 状态同步：使用useContext等hook实现跨组件状态同步，避免组件之间的耦合。

6. 本地存储：使用自定义hook封装本地存储逻辑，如localStorage或IndexedDB等，可以在多个组件中共享存储数据，避免重复存储和读取数据。

BrowserRouter、Route和Link。BrowserRouter用于包装应用程序，Route用于定义路由规则并与组件关联，Link用于创建链接以便导航到不同的路由。

useState和useReducer都可以用来管理组件的状态，但useState适用于简单的状态管理，而useReducer则适用于更复杂的状态管理。useReducer可以让我们在更新状态时使用自定义的逻辑，从而使得状态更加灵活。

useEffect的第一个参数是一个函数，它会在组件渲染完成后被调用。useEffect的第二个参数是一个数组，用于指定依赖项（dependencies），当依赖项发生变化时，useEffect会重新执行。

useMemo用于缓存计算结果，当依赖项不变时，可以直接返回缓存的结果，从而避免重复计算。useCallback用于缓存函数，当依赖项不变时，可以直接返回缓存的函数，从而避免重复创建函数。useMemo返回的是计算结果，useCallback返回的是函数