react

keepalive的实现原理就是把所有需要 keepalive 的组件保存到一个全局对象，然后渲染的时候把它们都渲染出来，路由切换只是改变显示隐藏。

用 vscode debugger 可以在想调试的代码处断住，单步调试，看一些变量的变化，看代码执行路线，这样高效很多。

react组件里有很多逻辑是可以复用的，我们会封装成自定义 hook，和普通函数的区别就是用 use 开头，并且要用到 react 的内置 hook中。

全局的状态管理库redux有如下核心概念：store数据，修改数据方法reducer，获取全局数据的useSelector，以及触发reducer的dispatch。

context主要用于跨组件通信，类似于vue的provider/inject，常用于组件库中，在项目中多使用redux等。它有一个缺点，当修改它的值，会导致所有用到其值的组件都会更新。

JSX 的标签体部分会通过children的props传给组件,在组件里取出 props.children 渲染，但有时候要对 children 做一些修改，这就可以使用React.Children了

mockjs只能劫持XMLHttpRequest请求，使用了fetch就没有办法劫持了。mockjs除了劫持请求外，还有强大的mock.random，本文采用nodejs+mockjs来模拟后端数据。

写React组件都是基于ts的本文主要罗列一些常用的ts类型。ReactNode就是jsx片段类型，FC<T>就是函数组件类型，返回的就是jsx片段。

无论是 React 还是 Vue，当直接传递一个包含 HTML 标签的字符串时，框架都会将其视为纯文本进行处理， 即对 HTML 特殊字符如 <>& 等进行转义，最终在页面上显字符串本身。

受控模式是你需要对输入的值做处理之后设置到表单的时候，或者是你想实时同步状态值到父组件才使用，受控模式每次 setValue 都会导致组件重新渲染，其他情况都推荐使用非受控模式。

React Router基于history实现。首次渲染的时候会根据 location和配置的 routes 做匹配，渲染匹配的组件。history是对原生进行了封装，另外包含了location。

react 每个组件里有 js 逻辑和 css 样式。js 逻辑是通过 es module 做了模块化的，但是 css 并没有,不同组件样式都在全局，很容易冲突。因此出现了css modules。

函数组件每次渲染时都会生成一个全新的函数作用域，其中的 state、prop 都是该次渲染的快照。state 是不可变的，setState并不会修改当前state，而是触发新的渲染并生成新的state

react状态有三大特征：异步更新、合并更新、不可变数据。常用的hooks有useState，useEffect，uesRef，memo，useCallback, useMemo。

React 认为UI和逻辑不应该严格分离，而应该将相关的逻辑和 UI 封装到组件中。JSX 就是为了让开发者能更直观地编写 包含逻辑的UI而设计的，它既保留了JS的灵活性，又具备 HTML 的可读性。