- ```
-
-### **结论**
-
-- 伪类和伪元素都是用来表示文档树以外的"元素"。
-- 伪类和伪元素分别用单冒号`:`和双冒号`::`来表示。
-- 伪类和伪元素的区别，最关键的点在于如果没有伪元素(或伪类)，是否需要添加元素才能达到目的，如果是则是伪元素，反之则是伪类。
-
-关于常用的伪类与伪元素选择器可以查看[CSS选择器](https://juejin.cn/post/6844903807386648583)一文。
diff --git "a/src/CSS/\351\200\273\350\276\221\347\273\204\345\220\210\344\274\252\347\261\273.md" "b/src/CSS/\351\200\273\350\276\221\347\273\204\345\220\210\344\274\252\347\261\273.md"
deleted file mode 100644
index 63ec8e4e..00000000
--- "a/src/CSS/\351\200\273\350\276\221\347\273\204\345\220\210\344\274\252\347\261\273.md"
+++ /dev/null
@@ -1,162 +0,0 @@
-# 逻辑组合伪类 :not() :is :where :has
-
-本文将介绍4个逻辑组合伪类，分别是`:not()` `:is` `:where` `:has` ，这四个伪类的自身优先级为0，这与其他伪类相同，但处理时是将其和括号里的参数作为一个整体计算优先级，这就导致了实际表现出的优先级由参数决定（除了`:where()` 的优先级总是为 0）。
-
-目前这四位目前都得到了大多数浏览器的广泛支持，同时非常实用，务必掌握哦~
-
-## 否定伪类 :not()
-
-`:not()` 伪类用于否定选择器，可以接受一个或多个选择器作为参数，如果元素不匹配参数中的任何一个选择器，则匹配该伪类，它也被称为反选伪类（negation pseudo-class）。
-
-1. `:not()` 伪类优先级是0，即本身没有任何优先级，其优先级由括号内表达式决定
-
-```css
-:not(li) {}
-```
-
- 其优先级就是 `li` 选择器的优先级。
-
-2. `:not()` 伪类可以不断级联
-
-```css
-body :not(div):not(span) {
- font-weight: bold;
-}
-```
-
- 表示既不是`
` 也不是`
` 的元素
-
-3. `:not()` 伪类目前已支持多个表达式
-
-```css
-body :not(div, .fancy) {
- text-decoration: overline underline;
-}
-```
-
- 表示不是` `或 `.fancy` 的元素
-
-### 告别重置
-
-`:not`伪类最大的作用就是可以优化我们过去重置CSS样式的策略，使我们代码更加简介，易于理解，例如：
-
-```css
-.panel{
- display: none;
-}
-
-.panel .active{
- display: block;
-}
-```
-
-实际上我们可以简写成
-
-```css
-.panel :not(.active){
- display: block;
-}
-```
-
-类似的，希望大家能够培养这种意识，对于遇到需要重置CSS样式的场景，第一反应就是使用`:not`伪类。
-
-## 任意匹配伪类 :is()
-
-### :is()伪类与:matches()伪类及:any()伪类之间的关系
-
-2018 年 10 月底，`:matches ()`伪类改名为`:is()`伪类 ([[selectors-4] Rename :matches() to :is() · Issue #3258 · w3c/csswg-drafts](https://github.com/w3c/csswg-drafts/issues/3258))，因为`:is()`的名称更简短，且其语义正好和`:not() `相反。
-
-也就是说，`:matches ()`伪类是`:is ()`伪类的前身。然后很有趣的是`:matches ()`还有一个被舍弃的前身，那就是`:any()`伪类，被舍弃的原因是选择器的优先级不准确，`:any()`伪类会忽略括号里面选择器的优先级，而永远是普通伪类的优先级。
-
-`:any()`伪类名义上虽然被舍弃了，但是除了 IE/Edge 以外的浏览器都支持，而且很早就支持，现在也都支持，不过都需要添加私有前缀，如`-webkit-any()`以及`-moz-any()`。
-
-### 用法
-
- `:is()` 将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
-
-```css
-/* 选择 header、main、footer 里的任意一个悬浮状态的段落 */
-:is(header, main, footer) p:hover {
- color: red;
- cursor: pointer;
-}
-
-/* 以上内容相当于以下内容 */
-header p:hover,
-main p:hover,
-footer p:hover {
- color: red;
- cursor: pointer;
-}
-```
-
-### :is() 和 :where() 的区别
-
-两者的区别在于 `:is()` 计入整体选择器的优先级（它接受优先级最高参数的优先级），而 `:where()` 的优先级为 0。
-
-综上，`is()`是一个有用但不被迫切需要的伪类，但是还是很实用的
-
-## 任意匹配伪类 :where()
-
-`:where()`伪类是和`:is()`伪类一同出现的，它们的含义、语法、作用一模一样。唯一的区别就是优先级不一样，`:where()` 伪类的优先级永远是 0。例如:
-
-```css
-:where(.article, section) p {}
-```
-
-的优先级等同于 `p` 选择器，参数里的选择器的优先级被完全忽略。
-
-又如:
-```css
-:where(#article, #section) .content {}
-```
-
-的优先级等同于`.content` 选择器
-
-### 可容错选择器解析
-
-规范将 `:is()` 和 `:where()` 定义为接受一个[可容错选择器列表](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list)
-
-在 CSS 中使用选择器列表时，如果任何选择器无效，则整个列表被视为无效，即如果某个选择器无法解析，则被视为无效，不正确或不受支持的选择器将被忽略，其他选择器将被使用。
-
-```css
-:is(:valid, :unsupported) {
- /* … */
-}
-```
-
-即使在不支持 `:unsupported` 的浏览器中，仍将正确解析 `:valid`，而这种写法：
-
-```css
-:valid,
-:unsupported {
- /* … */
-}
-```
-
-在不支持 `:unsupported` 浏览器中即使它们支持 `:valid`，仍将忽略。
-
-## 关联伪类 :has()
-
-`:has()`伪类是一个规范制定得很早但浏览器却迟迟没有支持的伪类。如果浏览器能够支持，其功能会非常强大，因为它可以实现类似“父选择器”和“前面兄弟选择器”的功能（提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法），对CSS 的开发会有颠覆性的影响。
-
-例如：
-
-```css
-a:has(> svg) [}
-```
-
-表示匹配包含有`
- );
-}
-```
-
-
-
-```jsx
-// 这里用一个示例数据
-import data from './data';
-
-function ListWithMoreExample () => {
- return (
-
-
User Names
-
- Liked by:{" "}
- {
- return {user.name};
- }}
- data={data}
- max={3}
- />
-
-
-
-
User List
-
-
- Name
- City
- Job Title
-
-
{
- return (
-
- {user.name}
- {user.city}
- {user.job}
-
- );
- }}
- data={data}
- max={5}
- />
-
-
- );
-};
-```
-
-可以看到，代码里使用了两个 ListWithMore 组件，通过 renderItem 这个属性，我们可以自主决定该如何渲染每一个列表项，从而把一部分 UI 逻辑抽象出来，形成一个可复用的逻辑，以简化不同场景的使用。
diff --git "a/src/React/React Hooks\347\254\224\350\256\260/\345\234\250\345\207\275\346\225\260\347\273\204\344\273\266\344\270\255\344\275\277\347\224\250 Redux.md" "b/src/React/React Hooks\347\254\224\350\256\260/\345\234\250\345\207\275\346\225\260\347\273\204\344\273\266\344\270\255\344\275\277\347\224\250 Redux.md"
deleted file mode 100644
index f627ee5c..00000000
--- "a/src/React/React Hooks\347\254\224\350\256\260/\345\234\250\345\207\275\346\225\260\347\273\204\344\273\266\344\270\255\344\275\277\347\224\250 Redux.md"
+++ /dev/null
@@ -1,235 +0,0 @@
----
-date: 2022-05-19
-category:
-- React
-- Redux
----
-
-# 在函数组件中使用 Redux
-
-## Redux 出现的背景
-
-组件级别的 state，和从上而下传递的 props 这两个状态机制，无法满足复杂功能的需要。例如跨层级之间的组件的数据共享和传递。我们可以从下图的对比去理解：
-
-
-
-其中左图是单个 React 组件，它的状态可以用内部的 state 来维护，而且这个 state 在组件外部是无法访问的。而右图则是使用 Redux 的场景，用全局唯一的 Store 维护了整个应用程序的状态。可以说，对于页面的多个组件，都是从这个 Store 来获取状态的，保证组件之间能够共享状态。
-
-Redux Store 的两个特点：
-
-1. **Redux Store 是全局唯一的**。即整个应用程序一般只有一个 Store。
-2. **Redux Store 是树状结构**，可以更天然地映射到组件树的结构，虽然不是必须的。
-
-我们通过把状态放在组件之外，就可以让 React 组件成为更加纯粹的表现层，那么很多对于业务数据和状态数据的管理，就都可以在组件之外去完成（后面课程会介绍的 Reducer 和 Action）。同时这也天然提供了状态共享的能力，有两个场景可以典型地体现出这一点。
-
-1. 跨组件的状态共享：当某个组件发起一个请求时，将某个 Loading 的数据状态设为 True，另一个全局状态组件则显示 Loading 的状态。
-2. 同组件多个实例的状态共享：某个页面组件初次加载时，会发送请求拿回了一个数据，切换到另外一个页面后又返回。这时数据已经存在，无需重新加载。设想如果是本地的组件 state，那么组件销毁后重新创建，state 也会被重置，就还需要重新获取数据。
-
-## 理解 Redux 的三个基本概念
-
-Redux 引入的概念其实并不多，主要就是三个：State、Action 和 Reducer。
-
-- State 即 Store，一般就是一个纯 JavaScript Object。
-- Action 也是一个 Object，用于描述发生的动作。
-- Reducer 则是一个函数，接收 Action 和 State 并作为参数，通过计算得到新的 Store。
-
-
-
-在 Redux 中，所有对于 Store 的修改都必须通过这样一个公式去完成，即通过 Reducer 完成，而不是直接修改 Store。这样的话，一方面可以保证数据的不可变性（Immutable），同时也能带来两个非常大的好处。
-
-1. 可预测性（Predictable）：即给定一个初始状态和一系列的 Action，一定能得到一致的结果，同时这也让代码更容易测试。
-2. 易于调试：可以跟踪 Store 中数据的变化，甚至暂停和回放。因为每次 Action 产生的变化都会产生新的对象，而我们可以缓存这些对象用于调试。Redux 的基于浏览器插件的开发工具就是基于这个机制，非常有利于调试。
-
-举个栗子：+1和-1操作
-
-```js
-
-import { createStore } from 'redux'
-
-// 定义 Store 的初始值
-const initialState = { value: 0 }
-
-// Reducer，处理 Action 返回新的 State
-function counterReducer(state = initialState, action) {
- switch (action.type) {
- case 'counter/incremented':
- return { value: state.value + 1 }
- case 'counter/decremented':
- return { value: state.value - 1 }
- default:
- return state
- }
-}
-
-// 利用 Redux API 创建一个 Store，参数就是 Reducer
-const store = createStore(counterReducer)
-
-// Store 提供了 subscribe 用于监听数据变化
-store.subscribe(() => console.log(store.getState()))
-
-// 计数器加 1，用 Store 的 dispatch 方法分发一个 Action，由 Reducer 处理
-const incrementAction = { type: 'counter/incremented' };
-store.dispatch(incrementAction);
-// 监听函数输出：{value: 1}
-
-// 计数器减 1
-const decrementAction = { type: 'counter/decremented' };
-store.dispatch(decrementAction)
-// 监听函数输出：{value: 0}
-```
-
-通过这段代码，我们就用三个步骤完成了一个完整的 Redux 的逻辑：
-
-1. 先创建 Store；
-2. 再利用 Action 和 Reducer 修改 Store；
-3. 最后利用 subscribe 监听 Store 的变化。
-
-## 如何在 React 中使用 Redux
-
-在 react-redux 的实现中，为了确保需要绑定的组件能够访问到全局唯一的 Redux Store，利用了 React 的 Context 机制去存放 Store 的信息。通常我们会将这个 Context 作为整个 React 应用程序的根节点。因此，作为 Redux 的配置的一部分，我们通常需要如下的代码：
-
-```jsx
-import React from 'react'
-import ReactDOM from 'react-dom'
-
-import { Provider } from 'react-redux'
-import store from './store'
-
-import App from './App'
-
-const rootElement = document.getElementById('root')
-ReactDOM.render(
-
-
- ,
- rootElement
-)
-```
-
-完成了这样的配置之后，在函数组件中使用 Redux 就非常简单了：利用 react-redux 提供的 useSelector 和 useDispatch 这两个 Hooks。
-
-Hooks 的本质就是提供了让 React 组件能够绑定到某个可变的数据源的能力。在这里，当 Hooks 用到 Redux 时可变的对象就是 Store，而 useSelector 则让一个组件能够在 Store 的某些数据发生变化时重新 render。
-
-以官方给的计数器例子为例，说明如何在 React 中使用 Redux：
-
-```jsx
-import React from 'react'
-import { useSelector, useDispatch } from 'react-redux'
-
-export function Counter() {
- // 从 state 中获取当前的计数值
- const count = useSelector(state => state.value)
-
- // 获得当前 store 的 dispatch 方法
- const dispatch = useDispatch()
-
- // 在按钮的 click 时间中去分发 action 来修改 store
- return (
-
-
- {count}
-
-
- )
-}
-```
-
-此外，通过计数器这个例子，我们还可以看到 React 和 Redux 共同使用时的单向数据流：
-
-
-
-需要强调的是，在实际的使用中，我们无需关心 View 是如何绑定到 Store 的某一部分数据的，因为 React-Redux 帮我们做了这件事情。总结来说，通过这样一种简单的机制，Redux 统一了更新数据状态的方式，让整个应用程序更加容易开发、维护、调试和测试。
-
-## 使用 Redux 处理异步逻辑
-
-比如对于发送请求获取数据这样一个异步的场景，我们来看看涉及到 Store 数据会有哪些变化：
-
-1. 请求发送出去时：设置 state.pending = true，用于 UI 显示加载中的状态；
-2. 请求发送成功时：设置 state.pending = false, state.data = result。即取消 UI 的加载状态，同时将获取的数据放到 store 中用于 UI 的显示。
-3. 请求发送失败时：设置 state.pending = false, state.error = error。即取消 UI 的加载状态，同时设置错误的状态，用于 UI 显示错误的内容。
-
-前面提到，任何对 Store 的修改都是由 action 完成的。那么对于一个异步请求，上面的三次数据修改显然必须要三个 action 才能完成。那么假设我们在 React 组件中去做这个发起请求的动作，代码逻辑应该类似如下：
-
-```jsx
-function DataList() {
- const dispatch = useDispatch();
- // 在组件初次加载时发起请求
- useEffect(() => {
- // 请求发送时
- dispatch({ type: 'FETCH_DATA_BEGIN' });
- fetch('/some-url').then(res => {
- // 请求成功时
- dispatch({ type: 'FETCH_DATA_SUCCESS', data: res });
- }).catch(err => {
- // 请求失败时
- dispatch({ type: 'FETCH_DATA_FAILURE', error: err });
- })
- }, []);
-
- // 绑定到 state 的变化
- const data = useSelector(state => state.data);
- const pending = useSelector(state => state.pending);
- const error = useSelector(state => state.error);
-
- // 根据 state 显示不同的状态
- if (error) return 'Error.';
- if (pending) return 'Loading...';
- return
;
-}
-```
-
-但是很显然，发送请求获取数据并进行错误处理这个逻辑是不可重用的。假设我们希望在另外一个组件中也能发送同样的请求，就不得不将这段代码重新实现一遍。因此，
Redux 中提供了 middleware 这样一个机制，让我们可以巧妙地实现所谓异步 Action 的概念。
-
-
简单来说，middleware 可以让你提供一个拦截器在 reducer 处理 action 之前被调用。在这个拦截器中，你可以自由处理获得的 action。无论是把这个 action 直接传递到 reducer，或者构建新的 action 发送到 reducer，都是可以的。
-
-
Middleware 正是在 Action 真正到达 Reducer 之前提供的一个额外处理 Action 的机会：
-
-
-
-我们刚才也提到了，Redux 中的 Action 不仅仅可以是一个 Object，它可以是任何东西，也可以是一个函数。利用这个机制，Redux 提供了 redux-thunk 这样一个中间件，它如果发现接受到的 action 是一个函数，那么就不会传递给 Reducer，而是执行这个函数，并把 dispatch 作为参数传给这个函数，从而在这个函数中你可以自由决定何时，如何发送 Action。
-
-例如对于上面的场景，假设我们在创建 Redux Store 时指定了 redux-thunk 这个中间件：
-
-```js
-import { createStore, applyMiddleware } from 'redux'
-import thunkMiddleware from 'redux-thunk'
-import rootReducer from './reducer'
-
-const composedEnhancer = applyMiddleware(thunkMiddleware)
-const store = createStore(rootReducer, composedEnhancer)
-```
-
-那么在我们 dispatch action 时就可以 dispatch 一个函数用于来发送请求，通常，我们会写成如下的结构：
-
-```js
-function fetchData() {
- return dispatch => {
- dispatch({ type: 'FETCH_DATA_BEGIN' });
- fetch('/some-url').then(res => {
- dispatch({ type: 'FETCH_DATA_SUCCESS', data: res });
- }).catch(err => {
- dispatch({ type: 'FETCH_DATA_FAILURE', error: err });
- })
- }
-}
-```
-
-那么在我们 dispatch action 时就可以 dispatch 一个函数用于来发送请求，通常，我们会写成如下的结构：
-
-```js
-import fetchData from './fetchData';
-
-function DataList() {
- const dispatch = useDispatch();
- // dispatch 了一个函数由 redux-thunk 中间件去执行
- dispatch(fetchData());
-}
-```
-
-所以说异步 Action 并不是一个具体的概念，而可以把它看作是 Redux 的一个使用模式。它通过组合使用同步 Action ，在没有引入新概念的同时，用一致的方式提供了处理异步逻辑的方案。
-
-
\ No newline at end of file
diff --git "a/src/React/React Hooks\347\254\224\350\256\260/\345\246\202\344\275\225\345\261\225\347\244\272\345\257\271\350\257\235\346\241\206\357\274\214\345\271\266\347\273\231\345\257\271\350\257\235\346\241\206\344\274\240\351\200\222\345\217\202\346\225\260\357\274\237.md" "b/src/React/React Hooks\347\254\224\350\256\260/\345\246\202\344\275\225\345\261\225\347\244\272\345\257\271\350\257\235\346\241\206\357\274\214\345\271\266\347\273\231\345\257\271\350\257\235\346\241\206\344\274\240\351\200\222\345\217\202\346\225\260\357\274\237.md"
deleted file mode 100644
index c1d753e7..00000000
--- "a/src/React/React Hooks\347\254\224\350\256\260/\345\246\202\344\275\225\345\261\225\347\244\272\345\257\271\350\257\235\346\241\206\357\274\214\345\271\266\347\273\231\345\257\271\350\257\235\346\241\206\344\274\240\351\200\222\345\217\202\346\225\260\357\274\237.md"
+++ /dev/null
@@ -1,268 +0,0 @@
----
-date: 2022-08-18
-category:
-- React
-- React Hooks
----
-
-# 如何展示对话框，并给对话框传递参数？
-
-案例导入：处理对话框的误区为了方便你理解这两点，我给你举一个实际场景的例子，你就能明白为什么说在 React 中，常用的对话框是比较难处理的。比如说我们需要实现下面这个截图演示的功能：
-
-
-
-那么，一般会用类似下面的代码逻辑去实现：
-
-```jsx
-function MainLayout() {
- const [modalVisible, setModalVisible] = useState(false);
- const [user, setUser] = useState(null);
- const showUserModal = (user) => {
- setModalVisible(true);
- setUser(user);
- }
- return (
-
-
- showUserModal(user)}/>
-
-
- );
-}
-```
-
-在这段代码中，我们将 UserInfoModal 这个对话框组件定义在了父组件 Layout 中，通过 visible 控制其是否显示。然后再在 Sider 和 UserList 这两个组件中，用自定义事件来告知父组件，用户点击了某个按钮了，应该显示对话框。
-
-### 存在问题
-
-**一、语义隔离不明**
-
-MainLayout 这个组件应该只做布局的事情，而不应该有其他的业务逻辑。但是在这里，由于我们加入了用户信息处理的逻辑，就让本不相关的两块功能产生了依赖。而且，如果要增加另外一个对话框，那意味着又要在 Layout 上增加新的业务逻辑了。这样的话，代码很快就会变得臃肿，且难以理解和维护。
-
-**二、 难以扩展**
-
-现在我们只是在 MainLayout 下面的两个组件共享了对话框，但是如果和 MainLayout 同级的组件也要访问这个对话框呢？又或者， MainLayout 下面的某个深层级的孙子组件也要能显示同一个对话框呢？这样处理的话就会非常麻烦。前者意味着代码需要重构，继续提升状态到父组件；后者意味着业务逻辑处理更复杂，需要通过层层的自定义事件回调来完成。所以，按照 React 方式的做法，或者大多数教程上演示的对话框的用法，其实在实际项目中是会遇到上面所述的各种问题。
-
-**而这些问题的本质就是，一个实现业务逻辑的 Modal 究竟应该在哪个组件中去声明？又该怎么和它进行交互呢？**
-
-## 思路： 使用全局状态管理所有的对话框
-
-基于这样一个设想，我们就来尝试去设计一个 API 去做对话框的全局管理。假设我们将这个对话框的实现命名为 NiceModal，那么我们的目标就是能够用以下的方式去操作对话框：
-
-```js
-
-// 通过 create API 创建一个对话框，主要为了能够全局的控制对话框的展现
-const UserInfoModal = NiceModal.create(
- 'user-info-modal',
- RealUserInfoModal
-);
-
-// 创建一个 useNiceModal 这样的 Hook，用于获取某个 id 的对话框的操作对象
-const modal = useNiceModal('user-info-modal');
-// 通过 modal.show 显示一个对话框，并能够给它传递参数
-modal.show(args);
-// 通过 modal.hide 关闭对话框
-modal.hide();
-```
-
-## 实现：创建 NiceModal 组件和相关 API
-
-首先要考虑的便是如何管理全局状态，在这里我们以 Redux 为例，来创建一个可以处理所有对话框状态的 reducer：
-
-```js
-const modalReducer = (state = { hiding: {} }, action) => {
- switch (action.type) {
- case "nice-modal/show":
- const { modalId, args } = action.payload;
- return {
- ...state,
- // 如果存在 modalId 对应的状态，就显示这个对话框
- [modalId]: args || true,
- // 定义一个 hiding 状态用于处理对话框关闭动画
- hiding: {
- ...state.hiding,
- [modalId]: false,
- },
- };
- case "nice-modal/hide":
- const { modalId, force } = action.payload;
- // 只有 force 时才真正移除对话框
- return action.payload.force
- ? {
- ...state,
- [modalId]: false,
- hiding: { [modalId]: false },
- }
- : { ...state, hiding: { [.modalId]: true } };
- default:
- return state;
- }
-};
-```
-
-这段代码的主要思路就是通过 Redux 的 store 去存储每个对话框状态和参数。在这里，我们设计了两个 action ，分别用来显示和隐藏对话框。特别要注意的是，这里我们加入了 hiding 这样一个状态，用来处理对话框关闭过程的动画，确保用户体验。为了让 Redux 的 action 使用起来更方便，我们可以定义一个 useNiceModal 这样的 Hook，在其内部封装对 Store 的操作，从而实现对话框状态管理的逻辑重用，并以更友好的方式暴露给用户：
-
-```js
-
-// 使用 action creator 来创建显示和隐藏对话框的 action
-function showModal(modalId, args) {
- return {
- type: "nice-modal/show",
- payload: {
- modalId,
- args,
- },
- };
-}
-
-function hideModal(modalId, force) {
- return {
- type: "nice-modal/hide",
- payload: {
- modalId,
- force,
- },
- };
-}
-
-// 创建自定义 Hook 用于处理对话框逻辑
-export const useNiceModal = (modalId) => {
- const dispatch = useDispatch();
- // 封装 Redux action 用于显示对话框
- const show = useCallback((args) => {
- dispatch(showModal(modalId, args));
- }, [
- dispatch,
- modalId,
- ]);
- // 封装 Redux action 用于隐藏对话框
- const hide = useCallback((force) => {
- dispatch(hideModal(modalId, force));
- }, [
- dispatch,
- modalId,
- ]);
-
- const args = useSelector((s) => s[modalId]);
- const hiding = useSelector((s) => s.hiding[modalId]);
-
- // 只要有参数就认为对话框应该显示，如果没有传递 args，在reducer 中会使用
- // 默认值 true
- return { args, hiding, visible: !!args, show, hide };
-};
-```
-
-同时，我们可以实现 NiceModal 这样一个组件，去封装通用的对话框操作逻辑。比如关闭按钮，确定按钮的事件处理，等等。为了方便演示，我们以 Ant Design 中的 Modal 组件为例：
-
-```jsx
-function NiceModal({ id, children, ...rest }) {
- const modal = useNiceModal(id);
- return (
-
modal.hide()} // 默认点击 cancel 时关闭对话框
- onOk={() => modal.hide()} // 默认点击确定关闭对话框
- afterClose={() => modal.hide(true)} // 动画完成后真正关闭
- visible={!modal.hiding}
- {...rest} // 允许在使用 NiceModal 时透传参数给实际的 Modal
- >
- {children}
-
- );
-}
-```
-
-最后呢，我们用一个第 10 讲提到的容器模式，它会在对话框不可见时直接返回 null，从而不渲染任何内容；并且确保即使页面上定义了 100 个对话框，也不会影响性能：
-
-```jsx
-export const createNiceModal = (modalId, Comp) => {
- return (props) => {
- const { visible, args } = useNiceModal(modalId);
- if (!visible) return null;
- return
;
- };
-};
-```
-
-使用
-
-```jsx
-
-import { Button } from "antd";
-import NiceModal, {
- createNiceModal,
- useNiceModal,
-} from "./NiceModal";
-
-const MyModal = createNiceModal("my-modal", () => {
- return (
-
- Hello NiceModal!
-
- );
-});
-
-function MyModalExample() {
- const modal = useNiceModal("my-modal");
- return (
- <>
-
-
-
- );
-}
-```
-
-通过这个 Modal ID，我们就能够在应用的任何组件中去管理这个对话框了。
-
-### 处理对话框返回值
-
-```js
-const modal = useNiceModal('my-modal');
-// 实现一个 promise API 来处理返回值
-modal.show(args).then(result => {});
-```
-
-事实上，要实现这样一个机制并不困难，就是在 useNiceModal 这个 Hook 的实现中提供一个 modal.resolve 这样的方法，能够去 resolve modal.show 返回的 Promise。
-
-代码的核心思路就是将 show 和 resolve 两个函数通过 Promise 联系起来。因为两个函数的调用位置不一样，所以我们使用了一个局部的临时变量，来存放 resolve 回调函数。通过这样的机制，就可以在对话框中去调用 modal.resolve 来返回值了。
-
-```js
-
-// 使用一个 object 缓存 promise 的 resolve 回调函数
-const modalCallbacks = {};
-export const useNiceModal = (modalId) => {
- const dispatch = useDispatch();
- const show = useCallback(
- (args) => {
- return new Promise((resolve) => {
- // 显示对话框时，返回 promise 并且将 resolve 方法临时存起来
- modalCallbacks[modalId] = resolve;
- dispatch(showModal(modalId, args));
- });
- },
- [dispatch, modalId],
- );
- const resolve = useCallback(
- (args) => {
- if (modalCallbacks[modalId]) {
- // 如果存在 resolve 回调函数，那么就调用
- modalCallbacks[modalId](args);
- // 确保只能 resolve 一次
- delete modalCallbacks[modalId];
- }
- },
- [modalId],
- );
-
- // 其它逻辑...
-
- // 将 resolve 也作为返回值的一部分
- return { show, hide, resolve, visible, hiding };
-};
-```
-
-这段示意代码包括两个部分。首先是在 UserList 的表格组件中，由编辑按钮触发对话框的显示，并在对话框返回后，将用户输入更新到表格。第二部分则是在对话框中，用户点击了确定按钮后调用 modal.resolve 方法，将用户输入返回给 UserList 组件，从而完成整个编辑流程。
-
-[演示代码](https://codesandbox.io/s/react-hooks-course-20vzg)
diff --git "a/src/React/React Hooks\347\254\224\350\256\260/\350\207\252\345\256\232\344\271\211 Hooks.md" "b/src/React/React Hooks\347\254\224\350\256\260/\350\207\252\345\256\232\344\271\211 Hooks.md"
deleted file mode 100644
index 98c42030..00000000
--- "a/src/React/React Hooks\347\254\224\350\256\260/\350\207\252\345\256\232\344\271\211 Hooks.md"
+++ /dev/null
@@ -1,322 +0,0 @@
----
-date: 2022-05-17
-category:
-- React
-- React Hooks
----
-
-# 自定义 Hooks
-
-自定义 Hooks 在形式上其实非常简单，就是声明一个名字以 use 开头的函数，比如 useCounter。这个函数在形式上和普通的 JavaScript 函数没有任何区别，你可以传递任意参数给这个 Hook，也可以返回任何值。
-
-但是要注意，**Hooks 和普通函数在语义上是有区别的，就在于函数中有没有用到其它 Hooks。**
-
-
什么意思呢？就是说如果你创建了一个 useXXX 的函数，但是内部并没有用任何其它 Hooks，那么这个函数就不是一个 Hook，而只是一个普通的函数。但是如果用了其它 Hooks ，那么它就是一个 Hook。
-
-举一个简单的例子，我们看到过一个简单计数器的实现，当时把业务逻辑都写在了函数组件内部，但其实是可以把业务逻辑提取出来成为一个 Hook。比如下面的代码：
-
-```jsx
-import { useState, useCallback }from 'react';
-
-function useCounter() {
- // 定义 count 这个 state 用于保存当前数值
- const [count, setCount] = useState(0);
- // 实现加 1 的操作
- const increment = useCallback(() => setCount(count + 1), [count]);
- // 实现减 1 的操作
- const decrement = useCallback(() => setCount(count - 1), [count]);
- // 重置计数器
- const reset = useCallback(() => setCount(0), []);
-
- // 将业务逻辑的操作 export 出去供调用者使用
- return { count, increment, decrement, reset };
-}
-```
-
-**一方面能让这个逻辑得到重用，另外一方面也能让代码更加语义化，并且易于理解和维护。**
-
-从这个例子，我们可以看到自定义 Hooks 的两个特点：
-
-1. 名字一定是以 use 开头的函数，这样 React 才能够知道这个函数是一个 Hook；
-2. 函数内部一定调用了其它的 Hooks，可以是内置的 Hooks，也可以是其它自定义 Hooks。这样才能够让组件刷新，或者去产生副作用。
-
-## 封装通用逻辑：useAsync
-
-**发起异步请求获取数据并显示在界面上。**
-
-```jsx
-import { useState } from 'react';
-
-const useAsync = (asyncFunction) => {
- // 设置三个异步逻辑相关的 state
- const [data, setData] = useState(null);
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState(null);
- // 定义一个 callback 用于执行异步逻辑
- const execute = useCallback(() => {
- // 请求开始时，设置 loading 为 true，清除已有数据和 error 状态
- setLoading(true);
- setData(null);
- setError(null);
- return asyncFunction()
- .then((response) => {
- // 请求成功时，将数据写进 state，设置 loading 为 false
- setData(response);
- setLoading(false);
- })
- .catch((error) => {
- // 请求失败时，设置 loading 为 false，并设置错误状态
- setError(error);
- setLoading(false);
- });
- }, [asyncFunction]);
-
- return { execute, loading, data, error };
-};
-```
-
-那么有了这个 Hook，我们在组件中就只需要关心与业务逻辑相关的部分。比如代码可以简化成这样的形式：
-
-```jsx
-
-import React from "react";
-import useAsync from './useAsync';
-
-export default function UserList() {
- // 通过 useAsync 这个函数，只需要提供异步逻辑的实现
- const {
- execute: fetchUsers,
- data: users,
- loading,
- error,
- } = useAsync(async () => {
- const res = await fetch("https://reqres.in/api/users/");
- const json = await res.json();
- return json.data;
- });
-
- return (
- // 根据状态渲染 UI...
- );
-}
-```
-
-**利用了 Hooks 能够管理 React 组件状态的能力，将一个组件中的某一部分状态独立出来，从而实现了通用逻辑的重用。**
-
-为什么非要用Hooks来封装:
-
-
因为在 Hooks 中，你可以管理当前组件的 state，从而将更多的逻辑写在可重用的 Hooks 中。但是要知道，在普通的工具类中是无法直接修改组件 state 的，那么也就无法在数据改变的时候触发组件的重新渲染。
-
-## 监听浏览器状态：useScroll
-
-虽然 React 组件基本上不需要关心太多的浏览器 API，但是有时候却是必须的：
-
-- 界面需要根据在窗口大小变化重新布局；
-- 在页面滚动时，需要根据滚动条位置，来决定是否显示一个“返回顶部”的按钮。
-
-正如 Hooks 的字面意思是“钩子”，它带来的一大好处就是：**可以让 React 的组件绑定在任何可能的数据源上。这样当数据源发生变化时，组件能够自动刷新。**
-
-```jsx
-import { useState, useEffect } from 'react';
-
-// 获取横向，纵向滚动条位置
-const getPosition = () => {
- return {
- x: document.body.scrollLeft,
- y: document.body.scrollTop,
- };
-};
-const useScroll = () => {
- // 定一个 position 这个 state 保存滚动条位置
- const [position, setPosition] = useState(getPosition());
- useEffect(() => {
- const handler = () => {
- setPosition(getPosition(document));
- };
- // 监听 scroll 事件，更新滚动条位置
- document.addEventListener("scroll", handler);
- return () => {
- // 组件销毁时，取消事件监听
- document.removeEventListener("scroll", handler);
- };
- }, []);
- return position;
-};
-```
-
-“返回顶部“功能的实现：
-
-```jsx
-import React, { useCallback } from 'react';
-import useScroll from './useScroll';
-
-function ScrollTop() {
- const { y } = useScroll();
-
- const goTop = useCallback(() => {
- document.body.scrollTop = 0;
- }, []);
-
- const style = {
- position: "fixed",
- right: "10px",
- bottom: "10px",
- };
- // 当滚动条位置纵向超过 300 时，显示返回顶部按钮
- if (y > 300) {
- return (
-
- );
- }
- // 否则不 render 任何 UI
- return null;
-}
-```
-
-## 拆分复杂组件
-
-**尽量将相关的逻辑做成独立的 Hooks，然后在函数组中使用这些 Hooks，通过参数传递和返回值让 Hooks 之间完成交互。拆分逻辑的目的不一定是为了重用，而可以是仅仅为了业务逻辑的隔离。**
-
-很多同学在写函数组件时没有意识到 Hooks 就是普通的函数，所以通常不会这么去做隔离，而是习惯于一路写下来，这就会造成某个函数组件特别长。还是老生常谈的那句话，**改变这个状况的关键仍然在于开发思路的转变。**我们要真正**把 Hooks 就看成普通的函数，能隔离的尽量去做隔离，**从而让代码更加模块化，更易于理解和维护。
-
-```jsx
-function BlogList() {
- // 获取文章列表...
- // 获取分类列表...
- // 组合文章数据和分类数据...
- // 根据选择的分类过滤文章...
-
- // 渲染 UI ...
-}
-```
-
-对此功能，我们可以将其拆分成 4 个 Hooks，每一个 Hook 都尽量小，代码如下：
-
-```jsx
-import React, { useEffect, useCallback, useMemo, useState } from "react";
-import { Select, Table } from "antd";
-import _ from "lodash";
-import useAsync from "./useAsync";
-
-const endpoint = "https://myserver.com/api/";
-const useArticles = () => {
- // 使用上面创建的 useAsync 获取文章列表
- const { execute, data, loading, error } = useAsync(
- useCallback(async () => {
- const res = await fetch(`${endpoint}/posts`);
- return await res.json();
- }, []),
- );
- // 执行异步调用
- useEffect(() => execute(), [execute]);
- // 返回语义化的数据结构
- return {
- articles: data,
- articlesLoading: loading,
- articlesError: error,
- };
-};
-const useCategories = () => {
- // 使用上面创建的 useAsync 获取分类列表
- const { execute, data, loading, error } = useAsync(
- useCallback(async () => {
- const res = await fetch(`${endpoint}/categories`);
- return await res.json();
- }, []),
- );
- // 执行异步调用
- useEffect(() => execute(), [execute]);
-
- // 返回语义化的数据结构
- return {
- categories: data,
- categoriesLoading: loading,
- categoriesError: error,
- };
-};
-const useCombinedArticles = (articles, categories) => {
- // 将文章数据和分类数据组合到一起
- return useMemo(() => {
- // 如果没有文章或者分类数据则返回 null
- if (!articles || !categories) return null;
- return articles.map((article) => {
- return {
- ...article,
- category: categories.find(
- (c) => String(c.id) === String(article.categoryId),
- ),
- };
- });
- }, [articles, categories]);
-};
-const useFilteredArticles = (articles, selectedCategory) => {
- // 实现按照分类过滤
- return useMemo(() => {
- if (!articles) return null;
- if (!selectedCategory) return articles;
- return articles.filter((article) => {
- console.log("filter: ", article.categoryId, selectedCategory);
- return String(article?.category?.name) === String(selectedCategory);
- });
- }, [articles, selectedCategory]);
-};
-
-const columns = [
- { dataIndex: "title", title: "Title" },
- { dataIndex: ["category", "name"], title: "Category" },
-];
-
-export default function BlogList() {
- const [selectedCategory, setSelectedCategory] = useState(null);
- // 获取文章列表
- const { articles, articlesError } = useArticles();
- // 获取分类列表
- const { categories, categoriesError } = useCategories();
- // 组合数据
- const combined = useCombinedArticles(articles, categories);
- // 实现过滤
- const result = useFilteredArticles(combined, selectedCategory);
-
- // 分类下拉框选项用于过滤
- const options = useMemo(() => {
- const arr = _.uniqBy(categories, (c) => c.name).map((c) => ({
- value: c.name,
- label: c.name,
- }));
- arr.unshift({ value: null, label: "All" });
- return arr;
- }, [categories]);
-
- // 如果出错，简单返回 Failed
- if (articlesError || categoriesError) return "Failed";
-
- // 如果没有结果，说明正在加载
- if (!result) return "Loading...";
-
- return (
-
-
- );
-}
-```
-
-## 小结
-
-Hooks 典型的四个使用场景：
-
-1. 抽取业务逻辑；
-2. 封装通用逻辑；
-3. 监听浏览器状态；
-4. 拆分复杂组件。
-
-> Hooks 作为普通函数，是可以传递任何参数的。
diff --git "a/src/React/React Hooks\347\254\224\350\256\260/\350\207\252\345\256\232\344\271\211\344\272\213\344\273\266.md" "b/src/React/React Hooks\347\254\224\350\256\260/\350\207\252\345\256\232\344\271\211\344\272\213\344\273\266.md"
deleted file mode 100644
index a36859d7..00000000
--- "a/src/React/React Hooks\347\254\224\350\256\260/\350\207\252\345\256\232\344\271\211\344\272\213\344\273\266.md"
+++ /dev/null
@@ -1,141 +0,0 @@
----
-date: 2022-05-12
-category:
-- React
-- React Hooks
----
-
-# 自定义事件
-
-在 React 中，父子组件的交互是通过 props。这个机制其实是双向的，父组件通过 props 把值传递给子组件，而子组件则通过暴露一些事件，给父组件反馈到一些状态或数据，**这两个环节是组件之间通信的基础。**
-
-## 在 React 中使用原生事件
-
-在 React 中进行事件监听的语法，和原生 DOM 事件的写法是非常类似的，都是在一个节点上加一个回调函数的属性来实现。比如下面的方式：
-
-```jsx
-
-```
-
-在 React 中，都是约定使用骆驼体（Camel Case）。只要原生 DOM 有的事件，在 React 中基本都可以使用，只是写法上采用骆驼体就可以了。
-
-
其实是否需要 useCallback ，和函数的复杂度没有必然关系，而是和回调函数绑定到哪个组件有关。这是为了避免因组件属性变化而导致不必要的重新渲染。
-
-如果你使用的是自定义组件，或者一些 UI 框架的组件，那么回调函数还都应该用 useCallback 进行封装。
-
-## React 原生事件的原理：合成事件（Synthetic Events）
-
-
由于虚拟 DOM 的存在，在 React 中即使绑定一个事件到原生的 DOM 节点，事件也并不是绑定在对应的节点上，而是**所有的事件都是绑定在根节点上**。然后由 React 统一监听和管理，获取事件后再分发到具体的虚拟 DOM 节点上。
-
-在 React 17 之前，所有的事件都是绑定在 document 上的，而从 React 17 开始，**所有的事件都绑定在整个 App 上的根节点上，**这主要是为了以后页面上可能存在多版本 React 的考虑。
-
-**React 这么做的原因主要有两个:**
-
-1. 第一，虚拟 DOM render 的时候， DOM 很可能还没有真实地 render 到页面上，所以无法绑定事件。
-2. 第二，React 可以屏蔽底层事件的细节，避免浏览器的兼容性问题。同时呢，对于 React Native 这种不是通过浏览器 render 的运行时，也能提供一致的 API。
-
-**为什么事件绑定在某个根节点上，也能触发实际 DOM 节点的事件?**
-
-我们知道，在浏览器的原生机制中，事件会从被触发的节点往父节点冒泡，然后沿着整个路径一直到根节点，所以根节点其实是可以收到所有的事件的。**这也称之为浏览器事件的冒泡模型。**
-
-因此，无论事件在哪个节点被触发， React 都可以通过事件的 srcElement 这个属性，知道它是从哪个节点开始发出的，这样 React 就可以收集管理所有的事件，然后再以一致的 API 暴露出来。
-
-这样的话，我们在写原生事件的时候，就再也不用再担心浏览器兼容性的问题了。如下图所示，就展示了事件机制冒泡模型的原理：
-
-
-
-对于原生事件的处理，可以说是 React 的一个创新，不仅能够让你像以前在原生 DOM 节点上定义事件的方式一样，而且还提供了一致的 API，让我们不用再担心浏览器的兼容问题，使用起来也更加容易。
-
-## 创建自定义事件
-
-对于一个自定义组件，除了可以从 props 接收参数并用于渲染之外，还很可能需要和父组件进行交互，从而反馈信息。这个时候，我们就需要为组件创建自定义事件，这也是 React 整个 UI 模型中非常重要的一个环节。
-
-
虽然自定义事件和原生事件看上去类似，但是两者的机制是完全不一样的：
-
-- 原生事件是浏览器的机制；
-- 而自定义事件则是纯粹的组件自己的行为，本质是一种回调函数机制。
-
-在 React 中，自定义事件不用通过任何特殊的 API，只需要通过 props 给组件传递一个回调函数，然后在组件中的某个时机，比如用户输入，或者某个请求完成时，去调用这个传过来的回调函数就可以了。
-
-当然，习惯上我们都会**将这样的回调函数命名为 onSomething 这种以“ on ”开头的名字**，方便在使用的时候理解。
-
-```jsx
-import { useState } from "react";
-
-// 创建一个无状态的受控组件
-function ToggleButton({ value, onChange }) {
- const handleClick = () => {
- onChange(!value);
- };
- return (
-
- );
-}
-```
-
-那么下面的代码就演示了如何使用这样一个组件：
-
-```jsx
-import { useState } from "react";
-import ToggleButton from './ToggleButton';
-
-function ToggleButtonExample() {
- const [on, setOn] = useState(true);
- return (
- <>
-
Toggle Button
-
setOn(value)} />
-
- );
-};
-```
-
-## 使用 Hooks 封装键盘事件
-
-**Hooks 具备绑定任何数据源的能力**
-
-在没有 Hooks 的时候，比如说我们要让某个显示表格的页面，支持通过左右键进行翻页的功能。那么我们就需要在 useEffect 里去做 window.addEventListnner，然后在返回的回调函数里去 window.removeEventListnner，实现起来就很麻烦。
-
-但是，如果我们用一个 Hook 来实现这个功能，那么只要实现一次，就可以在多个组件中使用了。下面就是这个 Hook 的实现代码：
-
-```jsx
-import { useEffect, useState } from "react";
-
-// 使用 document.body 作为默认的监听节点
-const useKeyPress = (domNode = document.body) => {
- const [key, setKey] = useState(null);
- useEffect(() => {
- const handleKeyPress = (evt) => {
- setKey(evt.keyCode);
- };
- // 监听按键事件
- domNode.addEventListener("keypress", handleKeyPress);
- return () => {
- // 接触监听按键事件
- domNode.removeEventListener("keypress", handleKeyPress);
- };
- }, [domNode]);
- return key;
-};
-```
-
-有了这个 Hook，我们在使用的时候就非常方便，无需做任何事件的绑定，**而是只要把键盘按键看做是一个不断变化的数据源**，这样，就可以去实时监听某个 DOM 节点上触发的键盘事件了。
-
-比如下面就是去显示当前按键的一个简单使用例子：
-
-```jsx
-import useKeyPress from './useKeyPress';
-
-function UseKeyPressExample(){
- const key = useKeyPress();
- return (
-
-
UseKeyPress
-
-
- );
-};
-```
-
diff --git "a/src/React/React Hooks\347\254\224\350\256\260/\350\267\257\347\224\261\347\256\241\347\220\206.md" "b/src/React/React Hooks\347\254\224\350\256\260/\350\267\257\347\224\261\347\256\241\347\220\206.md"
deleted file mode 100644
index c19d422f..00000000
--- "a/src/React/React Hooks\347\254\224\350\256\260/\350\267\257\347\224\261\347\256\241\347\220\206.md"
+++ /dev/null
@@ -1,3 +0,0 @@
-# 路由管理
-
-todo!!!!
\ No newline at end of file
diff --git "a/src/React/React Native/React Native \345\237\272\347\241\200.md" "b/src/React/React Native/React Native \345\237\272\347\241\200.md"
deleted file mode 100644
index 9e660996..00000000
--- "a/src/React/React Native/React Native \345\237\272\347\241\200.md"
+++ /dev/null
@@ -1,302 +0,0 @@
----
-date: 2022-05-12
-category:
-- React
-- ReactNative
----
-
-# React Native 基础
-
-## TextInput
-
-### 受控（Controlled）组件
-
-受控的意思说的是使用 JavaScript 中的 state 去控制宿主组件中的值。一个受控的 ControlledTextInput 组件示例如下：
-
-```jsx
-function ControlledTextInput() {
- const [text, setText] = React.useState('');
- return
-}
-```
-
-在这个示例中，我们先使用了 useState 创建了一个状态 text 和状态更新函数setText，并将状态text赋值给了 TextInput 的属性 value，value 是控制 TextInput 宿主组件展示的值用的。在用户输入文字后，会触发 onChangeText 事件，这时就会调用 setText，将状态 text 更新为用户最新输入的值。
-
-受控组件和非受控组件有什么区别：
-
-
-
-**使用受控组件，并且使用异步的文字改变事件**，这也符合大部分人的代码习惯。
-
-### 输入框的焦点
-
-你需要关注的第二件事是，如何控制输入框的焦点。通常光标放置在哪个输入框上，那个输入框就是页面的唯一焦点。
-
-有些场景下，输入框的焦点是程序自动控制的，无需开发者处理。比如用户点击手机屏幕上的输入框，此时焦点和光标都会移到输入框上。
-
-有些场景下，是需要代码介入控制焦点的。比如你购物搜索商品，从首页跳到搜索页时，搜索页的焦点就是用代码控制的。或者你在填写收货地址时，为了让你少点几次输入框，当你按下键盘的下一项按钮时，焦点就会从当前输入框自动转移到下一个输入框。
-
-我们先来看怎么实现自动“对焦”，以搜索页的搜索输入框自动对焦为例，示例代码如下：
-
-```jsx
-
-```
-
-TextInput 的 autoFocus 属性，就是用于控制自动对焦用的，其默认值是 false。也就是说，所有的 TextInput 元素默认都不会自动的对焦，而我们将 TextInput 的 autoFocus 属性设置为 true 时，框架会在 TextInput 元素挂载后，自动帮我们进行对焦。
-
-搜索页面只有一个搜索框的场景下 ，autoFocus 是好用的。但当一个页面有多个输入框时，autoFocus 就没法实现焦点的转移了。比如，在购物 App 中填写收货地址时，你每完成一项填写，点击键盘中的下一项按钮，焦点就会自动转移一次，从姓名到电话再到地址。我们以前讲过，React/React Native 是声明式的，但是在操作自带状态的宿主属性时，比如焦点转移，声明式就不管用了，还得用给宿主组件下命令。那怎么下命令呢？
-
-我们先从最简单的控制 TextInput 焦点讲起，示例代码如下：
-
-```jsx
-function AutoNextFocusTextInputs() {
- const ref1 = React.useRef(null);
-
- useEffect(()=>{
- ref1.current?.focus()
- },[])
-
- return (
-
- )
-}
-```
-
-在这段代码中，先声明了一个 ref1 用于保存 TextInput 宿主组件。在该宿主组件上封装了 Native/C++ 层暴露给 JavaScript 的命令，比如对焦focus()、失焦blur()、控制选中文字的光标setSelection。
-
-AutoNextFocusTextInputs组件在挂载完成后，程序会调用ref1.current.focus()，将焦点对到 TextInput 元素上，这就是使用focus()实现对焦的原理。
-
-使用 focus()命令对焦和使用autoFocus属性对焦，在原生应用层面的实现原理是一样的，只不过在 JavaScript 层面，前者是命令式的，后者是声明式的。对自带状态的宿主组件而言，命令式的方法能够进行更复杂的操作。
-
-那要实现每点一次键盘的“下一项”按钮，将焦点对到下一个 TextInput 元素上，怎么实现呢？具体的示例代码如下：
-
-```jsx
-function AutoNextFocusTextInputs() {
- const ref1 = React.useRef(null);
- const ref2 = React.useRef(null);
- const ref3 = React.useRef(null);
-
- return (
- <>
- // 姓名输入框
- // 电话输入框
- // 地址输入框
-
- );
-}
-```
-
-首先，我们得声明 3 个 ref 用于保存 3 个 TextInput 元素。其次，实现这三个元素，它们依次是姓名输入框、电话输入框、地址输入框。最后，需要监听点击键盘完成按钮的提交事件onSubmitEditing，在onSubmitEditing的回调中，将焦点通过ref.focus()转移到下一个 TextInput 元素上。
-
-### 联动键盘的体验
-
-先来看第一个体验细节，iOS 微信搜索框的键盘右下角按钮有一个“置灰置蓝”的功能。默认情况下，键盘右下角的按钮显示的是置灰的“搜索”二字，当你在搜索框输入文字后，置灰的“搜索”按钮会变成蓝色背景的“搜索”二字。
-
-置灰的作用是提示用户，没有输入文字不能进行搜索，按钮变蓝提示的是有内容了，可以搜索了。
-
-控制键盘右下角按钮置灰置蓝的，是 TextInput 的enablesReturnKeyAutomatically属性，这个属性是 iOS 独有的属性，默认是false，也就是任何使用键盘右下角的按钮，都可以点击。你也可以通过将其设置为 true，使其在输入框中没有文字时置灰。
-
-
-
-有两个属性可以设置这些文案，包括 iOS/Android 通用的 returnKeyType 和 Android 独有的 returnKeyLabel。全部的属性你可以查一下文档，我这里只说一下通用属性：
-
-
-
-第三个体验细节是，登录页面的自动填写账号密码功能。虽然现在有了二维码登录，但传统的账号密码登录场景还是非常多的。每次登录的时候，要输入一遍账号密码，就很麻烦了。
-
-无论是 iOS 还是 Android，它们都有系统层面的记住账号密码的功能，帮助用户快速完成账号密码的填写。完成快速填写功能的 TextInput 属性，在 iOS 上叫做textContentType，在 Android 上叫做autoComplete。
-
-你可以将账号输入框的快速填写属性设置为username，将密码输入框的快速填写属性设置为password，帮助用户节约一些时间，提高一下整体的成功率。除此之外，一些姓名、电话、地址信息也可以快速填写。
-
-
-
-还有一些键盘的体验细节，比如keyboardType可以控制键盘类型，可以让用户更方便地输入电话号码phone-pad、邮箱地址email-address等等。
-
-
-
-当你知道这些键盘细节后，你就可以利用这些系统的特性，帮你的 App 体验变得更好。
-
-```jsx
-function AutoNextFocusTextInputs() {
- const ref1,ref2,ref3 ...
-
- return (
- <>
-
-
-
-
- );
-}
-```
-
-在这段代码中，我们使用了placeholder来提醒用户该输入框应该输入什么，使用了 textContentType="name" 来辅助用户填写姓名，使用了 keyboardType="phone-pad" 来指定键盘只用于输入电话号码，使用returnKeyType="next" 或 "done"来提示用户当前操作的含义，当然还有ref.current.focus()的自动聚焦功能。
-
-### 总结
-
-学会处理输入框的文字。有两种处理方式受控组件和非受控组件，受控组件更强大一些，也更符合大多数 React/React Native 开发者的习惯；学会处理输入框的焦点。处理焦点有两种方式：一种是声明式的autoFocus属性，另一种是命令式的ref.current.focus()方法，前者适用场景有限，后者适用场景更多；学会处理与输入框联动的键盘，包括键盘右下角的按钮、键盘提示文案、键盘类型等等。
-
-## List(FlatList, RecyclerListView)
-
-为什么开源社区的 RecyclerListView 比官方的 FlastList 性能更好？FlastList、RecyclerListView 的优化原理是什么？FlastList 和 RecyclerListView 的底层实现都是滚动组件 ScrollView，所以我们先从 ScrollView 聊起。
-
-### ScrollView：渲染所有内容的滚动组件
-
-ScrollView 是一个支持横向或竖向的滚动组件，几乎所有页面都会用到。
-
-ScrollView 组件类似于 Web 中的 或 标签，浏览器中的页面之所以能上下滚动，就是因为 html 或 body 标签默认有一个 overflow-y: scroll 的属性，如果你把标签的属性设置为 overflow-y: hidden，页面就不能滚动了。
-
-React Native 的 ScrollView 组件在 Android 的底层实现用的是 ScrollView 和 HorizontalScrollView，在 iOS 的底层实现用的是 UIScrollView。
-
-**所谓的滚动，解决的是在有限高度的屏幕内浏览无限高度的内容的问题。有限高度的容器是 ScrollView，无限高度，或者说高度不确定的内容是 ScrollView 的 children。**
-
-使用 ScrollView 组件时，**我们通常并不直接给 ScrollView 设置固定高度或宽度，而是给其父组件设置固定高度或宽度。**
-
-一般而言，我们会使用安全区域组件 SafeAreaView 组件作为 ScrollView 的父组件，并给 SafeAreaView 组件设置布局属性 flex:1，让内容自动撑高 SafeAreaView。使用 SafeAreaView 作为最外层组件的好处是，它可以帮我们适配 iPhone 的刘海屏，节约我们的适配成本，示例代码如下：
-
-```jsx
-
-
- 1
-
-
-```
-
-了解完 ScrollView 组件的基本使用方法后，我们再来看下 ScrollView 的性能，看看如果使用 ScrollView 来实现无限列表会怎么样。
-
-```jsx
-
-// 10 个 item 就能填满整个屏幕，渲染很快
-// 1000 个 item 相当于 100+ 个屏幕的高度，渲染很慢
-const NUM_ITEMS = 1000;
-
-const makeContent = (nItems: number, styles: any) => {
- return Array(nItems)
- .fill(1)
- .map((_, i) => (
-
- {'Item ' + i}
-
- ));
-};
-
-const App = () => {
- return (
-
- {makeContent(NUM_ITEMS, styles.itemWrapper)}
-
- );
-};
-```
-
-上面这段代码，说的就是使用 ScrollView 组件一次性直接渲染 1000 个子视图，这里没有做任何懒加载优化。
-
-以信息流业务为例，用户进入页面后第一眼看到的只有屏幕中的信息，一般不超过 10 条。一次性渲染 10 条信息，其实很快，就是一眨眼的功夫。但如果是 1000 条呢？算力乘以 100，内存乘以 100，耗时也乘以 100，渲染速度就慢下来了。大量的计算和内存浪费在了用户看不到的地方。
-
-### FlatList：按需渲染的列表组件
-
-FlatList 列表组件就是 “自动”按需渲染的。
-
-FlatList 是 React Native 官方提供的第二代列表组件。FlatList 组件底层使用的是虚拟列表 VirtualizedList，VirtualizedList 底层组件使用的是 ScrollView 组件。因此 VirtualizedList 和 ScrollView 组件中的大部分属性，FlatList 组件也可以使用。关于 FlatList 更具体的使用方法，你可以查看[官方文档](https://reactnative.dev/docs/flatlist)。现在，我们还是回到 FlatList 的原理，先从理论层面上理解 FlatList 为什么可以自动按需渲染
-
-简单地讲，FlatList 性能比 ScrollView 好的原因是， **FlatList 列表组件利用按需渲染机制减少了首次渲染的视图，利用空视图的占位机制回收了原有视图的内存，**你可以对比一下二者的区别：
-
-```js
-// 从上到下滚动时的渲染方式
-// SrcollView 渲染方式：一次渲染所有视图
-SrcollView0_9 = [{👁},{ },{ },{ }] // 浏览0~9条列表项
-SrcollView10_19 = [{ },{👁},{ },{ }] // 浏览10~19条列表项
-SrcollView20_29 = [{ },{ },{👁},{ }] // 浏览20~29条列表项
-SrcollView30_39 = [{ },{ },{ },{👁}] // 浏览30~39条列表项
-
-// FlatList 渲染方式：按需渲染，看不见的地方用 $empty 占位
-FlatList0_9 = [{👁},{ }] // 浏览0~9条列表项
-FlatList10_19 = [{ },{👁},{ }] // 浏览10~19条列表项
-FlatList20_29 = [$empty,{},{👁},{}] // 浏览20~29条列表项
-FlatList30_39 = [$empty,$empty,{ },{👁}]// 浏览30~39条列表项
-```
-
-$empty，这就是内存回收
-
-40 条列表只是一个假设的例子，实现 FlatList 自动按需渲染的思路具体可以分为三步：
-
-1. 通过滚动事件的回调参数，计算需要按需渲染的区域；
-2. 通过需要按需渲染的区域，计算需要按需渲染的列表项索引；
-3. 只渲染需要按需渲染列表项，不需要渲染的列表项用空视图代替。
-
-### RecyclerListView：可复用的列表组件
-
-
-
-### PK：ScrollView、FlatList、RecyclerListView
-
-- ScrollView 适合内容少的页面，只有几个屏幕高页面是适合的；
-
-- FlatList 性能还过得去，但我不推荐你优先使用它，只有在你的列表项内容高度不能事先确定，或者不可枚举的情况下使用它；
-
-- RecyclerListView 性能最好，你应该优先使用它，但使用它的前提是可枚举且高度确定或大致确定
-
-
-
-
-
-## Fast Refresh：提高 UI 调试效率神器
-
-React Native 快速刷新（Fast Refresh）是默认开启的，你不用做任何额外的配置，就能立刻体验到。
-
-在使用快速刷新时，你应该知道一个提升开发效率的小技巧。我日常开发时习惯把模拟器放在代码编辑器右边，并且会把模拟器勾选window => stay on top选项，在把模拟器置顶在编辑器上方。
-
-这样，我们就能在写代码和调试的同时，立刻看到模拟器中的效果。相比真机调试或者多屏来回切换，置顶模拟器可以减少手离开键盘和视野来回切换的次数，提高你的开发效率。
-
-
-
-### 基础原理：模块热替换
-
-**React Native 的快速刷新功能的最早期版本，叫做热重载 Hot Reload，是基于 Webpack 的模块热替换（Hot Module Replacement）的原理开发的**。
-
-我们写 React Native 之前，都会运行一个 react-native start 命令，启动一个 Metro 服务，而 Metro 服务就实现了模块热替换的功能。Metro 服务会把更新的代码打包发送给 React Native 应用，让应用能够及时更新，那这个过程大概是怎么样的呢？首先，Metro 服务会监听代码文件的变化，当你修改完代码（①），保存文件时（②），Metro 服务就会收到通知。在你保存好后，Metro 就会编译涉及到的更新文件（③），编译完成后再生成一个用于更新的 bundle。而 Metro 的模块热替换服务和 React Native 应用中的模块热替换客户端（HMR Client），在启动时其实已经建立好了 socket 连接。所以，当新 bundle 生成时，模块热替换服务会通过 socket 通知块热替换客户端，热替换客户端实际就是运行在 React Native 应用中的一段 JavaScript 代码，它一开始就执行了一个 socket 监听事件（④）。React Native 收到通知后，就会向请求 bundle 服务发起请求。然后，bundle 服务会返回一个用于更新的 bundle（⑤），并使用 JavaScript 引擎，在原来 React Native 应用的 JavaScript 上下文中执行用于更新的 bundle。这个 bundle 是由多个模块组成的，你修改代码文件对应的模块及其依赖模块都是新模块，新模块会把原先的旧模块替换掉。⑥这就是整个模块热替换的全部过程，这里我放了一张流程图，你可以参考一下：
-
-
-
-基础的模块热替换功能只能实现组件级别的强制刷新，而组件状态的丢失，会导致开发效率的降低。
-
-### 进阶能力：复用组件及其状态
-
-**简而言之，React Native 的快速刷新功能，就是通过“代理”组件的方式，实现了组件状态不丢失，原生视图不重建。**
-
-
-
-当然，并不是所有情况都会复用状态和原生视图：
-
-> The simple answer is “replace them on the prototype” but even with Proxies, in my experience there are too many gnarly edge cases for this to work reliably.
-
-所以，我给你的建议是，尽可能地拥抱函数组件，放弃类组件。这样你在 UI 调试的时候，就能更多的享受函数组件带来的状态保留好处。特别是一些入口很深的组件，需要多次操作后才能调试，一旦导航、蒙层、滚动之类的组件状态丢失了，整个操作就要重新再来一遍，才能重新进行调试。拥抱函数组件，你的调试效率才会更高。
-
-### 整体策略：逐步降级
-
-快速刷新的整体策略就是逐步降级。如果颗粒度最小的更新不能使用，就换成颗粒度大一些的更新：
-
-代码块：如果你只修改了函数组件中的一些代码块，并且没有改动 hooks 的顺序。快速刷新在复用状态和原生视图的同时，你对该文件的所有修改都会生效，包括样式、渲染逻辑、事件处理、甚至一些副作用；
-
-组件：如果你修改了类组件中的任意代码，快速刷新会使用新的类组件进行重新渲染，原来的状态和原生视图都会被销毁；
-
-模块：如果你修改的模块导出的东西不只是 React 组件，快速刷新将重新执行该模块以及所有依赖它的模块；
-
-React Native 应用：如果你修改的文件被 React 组件树之外的模块引用了，快速刷新将重新渲染整个 React Native 应用。
-
-可以看到，快速刷新的逐步降级策略是，**从更新颗粒度最小代码块开始的，然后是组件、模块，最后是大颗粒度的 React Native 应用。**越小颗粒度的更新，为我们保留了越多原来的状态和环境，我们的开发调试效率也更高。
-
-
-
-## Debug：解决 BUG 思路有哪些？
-
-### 一个模型：发现问题、找到原因、修复 Bug
-
-
-
-## 两个原则：不带上线原则和本地复现原则
-
-https://time.geekbang.org/column/article/508776
diff --git "a/src/React/React \344\270\255\344\275\277\347\224\250 TypeScript.md" "b/src/React/React \344\270\255\344\275\277\347\224\250 TypeScript.md"
deleted file mode 100644
index c397a78b..00000000
--- "a/src/React/React \344\270\255\344\275\277\347\224\250 TypeScript.md"
+++ /dev/null
@@ -1,415 +0,0 @@
----
-date: 2022-08-16
-category:
-- React
----
-
-# React 中使用 TypeScript
-
-> 笔记总结自《TS全面进阶指南》
-
-## 泛型坑位
-
-### useState
-
-**基本类型**
-
-首先是 useState，可以由输入值隐式推导或者显式传入泛型：
-
-```tsx
-const Container = () => {
- // 推导为 string 类型
- const [state1, setState1] = useState('linbudu');
- // 此时类型为 string | undefined
- const [state2, setState2] = useState();
-};
-```
-
-需要注意的是在显式传入泛型时，如果像上面的例子一样没有提供初始值，那么 state2 的类型实际上会是 `string | undefined`，这是因为在 useState 声明中对是否提供初始值的两种情况做了区分重载
-
-```ts
-// 提供了默认值
-function useState(initialState: S | (() => S)): [S, Dispatch>];
-
-// 没有提供默认值
-function useState(): [S | undefined, Dispatch>];
-```
-
-**空对象**
-
-```typescript
-const [data, setData] = useState({} as IData);
-```
-
-这么做的坏处在于，后续的调用方中会认为这是一个完整实现了 IData 结构的对象，可能会出现遗漏的未赋值属性，此时你也可以使用 Partial 类型标记它为可选：
-
-```typescript
-const [data, setData] = useState>({});
-```
-
-如果你需要消费 useState 返回值的类型，可以搭配 ReturnType：
-
-```typescript
-// 相当于 useState(0) 的返回值类型
-type State = ReturnType>;
-```
-
-### useCallback 与 useMemo
-
-然后是 useCallback 与 useMemo，它们的泛型参数分别表示包裹的函数和计算产物，使用方式类似，也分为**隐式推导**与**显式提供**两种：
-
-```ts
-const Container = () => {
- // 泛型推导为 (input: number) => boolean
- const handler1 = useCallback((input: number) => {
- return input > 599;
- }, []);
-
- // 显式提供为 (input: number, compare: boolean) => boolean
- const handler2 = useCallback<(input: number, compare: boolean) => boolean>(
- (input: number) => {
- return input > 599;
- },
- []
- );
-
- // 推导为 string
- const result1 = useMemo(() => {
- return 'some-expensive-process';
- }, []);
-
- // 显式提供
- const result2 = useMemo<{ name?: string }>(() => {
- return {};
- }, []);
-};
-```
-
-通常情况下，我们不会主动为 useCallback 提供泛型参数，因为其传入的函数往往已经确定。而为 useMemo 提供泛型参数则要常见一些，因为我们可能希望通过这种方式来约束 useMemo 最后的返回值。
-
-### [useReducer](https://zh-hans.reactjs.org/docs/hooks-reference.html#usereducer)
-
-useReducer 可以被视为更复杂一些的 useState，它们关注的都是数据的变化。不同的是 useReducer 中只能由 reducer 按照特定的 action 来修改数据，但 useState 则可以随意修改。useReducer 有三个泛型坑位，分别为 reducer 函数的类型签名、数据的结构以及初始值的计算函数，我们直接看实际使用即可：
-
-```tsx
-import { useReducer } from 'react';
-
-const initialState = { count: 0 };
-
-type Actions =
- | {
- type: 'inc';
- payload: {
- count: number;
- max?: number;
- };
- }
- | {
- type: 'dec';
- payload: {
- count: number;
- min?: number;
- };
- };
-
-function reducer(state: typeof initialState, action: Actions) {
- switch (action.type) {
- case 'inc':
- return {
- count: action.payload.max
- ? Math.min(state.count + action.payload.count, action.payload.max)
- : state.count + action.payload.count,
- };
- case 'dec':
- return {
- count: action.payload.min
- ? Math.max(state.count + action.payload.count, action.payload.min)
- : state.count - action.payload.count,
- };
- default:
- throw new Error('Unexpected Action Received.');
- }
-}
-
-function Counter() {
- const [state, dispatch] = useReducer(reducer, initialState);
-
- return (
- <>
- Count: {state.count}
-
-
-
- );
-}
-```
-
-在上面的例子中，useReducer 的泛型参数分别被填充为 reducer 函数的类型签名，以及其初始状态。
-
-```ts
-type Reducer = (prevState: S, action: A) => S;
-type ReducerState> = R extends Reducer ? S : never;
-
-function useReducer>(
- reducer: R,
- initialState: ReducerState,
-): [ReducerState, Dispatch>];
-```
-
-R 被填充为了一整个函数类型，而 `ReducerState` 实际上就是提取了 reducer 中代表 state 的参数，即状态的类型，在这里即是 `{ count: number }` 这么一个结构。
-
-需要注意的是，在 reducer 中其实也应用了我们此前提到过的**可辨识联合类型概念**，这里的 `action.type` 即为可辨识属性，通过 type 判断，我们就能在每一个 case 语句中获得联合类型对应分支的类型。
-
-### useRef 与 [useImperativeHandle](https://zh-hans.reactjs.org/docs/hooks-reference.html#useimperativehandle)
-
-useRef 的常见使用场景主要包括两种，存储一个 DOM 元素引用和持久化保存一个值。这两者情况对应的类型其实也是不同的：
-
-```tsx
-const Container = () => {
- const domRef = useRef(null);
- const valueRef = useRef(599);
-
- const operateRef = () => {
- domRef.current?.getBoundingClientRect();
- valueRef.current += 1;
- };
-
- return (
-
- );
-};
-```
-
-对于 domRef，此时其类型（current）会被推断为 `RefObject`，而 valueRef 的值类型则为 `MutableRefObject`，这是完全符合预期的。因为我们并不会去修改挂载了 DOM 引用的 ref，而确实会修改值引用的 ref ，所以后者会是 Mutable 的。
-
-从 useRef 的类型定义可以看出，对于初始值为 null 的 useRef，其类型均会被推导为 RefObject
-
-```ts
-function useRef(initialValue: T): MutableRefObject;
-function useRef(initialValue: T | null): RefObject;
-function useRef(): MutableRefObject;
-```
-
-useImperativeHandle 并非常用的 hook，常与[`React.forwardRef`](https://zh-hans.reactjs.org/docs/react-api.html#reactforwardref) 共同使用
-
-## 内置类型定义
-
-### **MouseEvent、ChangeEvent**
-
-除了上面介绍的泛型坑位以外，在 React 中想要用好 TypeScript 的另一个关键因素就是使用 `@types/react` 提供的类型定义，最常见的就是事件类型，比如输入框值变化时的 ChangeEvent 和鼠标事件通用的 MouseEvent：
-
-```ts
-import { useState } from 'react';
-import type { ChangeEvent, MouseEvent } from 'react';
-
-const Container = () => {
- const [v, setV] = useState('linbudu');
-
- const handleChange = (event: ChangeEvent) => {};
-
- const handleClick = (event: MouseEvent) => {};
-
- return (
- <>
-
-
-
- );
-};
-```
-
-ChangeEvent 和 MouseEvent 上还具有一个泛型坑位，用于指定发生此事件的元素类型，我们可以在这里进一步传入 **HTMLButtonElement** 这样更精确的元素类型获得更严格的类型检查。
-
-### **ChangeEventHandler**
-
-除了使用 ChangeEvent 作为参数类型，React 还提供了整个函数的类型签名，如 ChangeEventHandler：
-
-```typescript
-const handleChange: ChangeEventHandler = (e) => {};
-```
-
-由于上下文类型的存在，此时就无需再为 e 声明类型了，它会自动被推导为 `ChangeEvent` 。
-
-类似的事件定义还有非常多，如 FormEvent、TouchEvent、DragEvent 等，但无需对所有定义都了解，在实际用到时再去导入即可。需要注意的是，由于 InputEvent [并非在所有浏览器都得到了支持](https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FInputEvent)，因此并不存在对应的类型定义，你可以使用 KeyboardEvent 来代替。
-
-### **CSSProperties**
-
-CSS样式属性
-
-```tsx
-import type { CSSProperties } from 'react';
-
-export interface IContainerProps {
- style: CSSProperties;
-}
-
-const css: CSSProperties = {
- display: 'flex',
- alignContent: 'center',
- justifyContent: 'center',
-};
-
-const Container = ({ style }: IContainerProps) => {
- return 林总！
;
-};
-```
-
-#### ComponentProps
-
-基于原生 HTML 元素去封装组件时，通常会需要将这个原生元素的所有 HTML 属性都保留下来作为组件的属性，可以使用 ComponentProps 来提取出一个元素上所有的属性，避免一个个重复声明：
-
-```typescript
-import type { ComponentProps } from 'react';
-
-interface IButtonProps extends ComponentProps<'button'> {
- size?: 'small' | 'large';
- link?: boolean;
-}
-const Button = (props: IButtonProps) => {
- return ;
-};
-```
-
-除了对原生 DOM 元素使用以外，这一用法在使用组件库时也有奇效，比如组件库只导出了这个组件而没有导出这个组件的属性类型定义，而我们又需要基于这个组件进行定制封装，此时就可以使用 ComponentProps 去提取它的属性类型：
-
-```typescript
-import { Button } from "ui-lib";
-import type { ComponentProps } from 'react';
-
-interface IButtonProps extends ComponentProps
- }
- >
-
- {/* 需要鉴权的路由 */}
-
-
-
- }>
- {/* 二级路由默认页面 */}
- } />
- } />
- } />
-
- {/* 不需要鉴权的路由 */}
- } />
-
-
-
- )
-}
-
-export default App
-```
-
-
-
-**查看效果**
-
-我们可以在打包之后，通过切换路由，监控network面板资源的请求情况，验证是否分隔成功
-
diff --git "a/src/React/ReactHooks\346\261\207\346\200\273.md" "b/src/React/ReactHooks\346\261\207\346\200\273.md"
deleted file mode 100644
index 42fa398d..00000000
--- "a/src/React/ReactHooks\346\261\207\346\200\273.md"
+++ /dev/null
@@ -1,443 +0,0 @@
----
-date: 2022-05-12
-category:
-- React
----
-# ReactHooks 汇总
-
-> React-hooks是react16.8以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。笔者认为，react-hooks思想和初衷，也是把组件，颗粒化，单元化，形成独立的渲染环境，减少渲染次数，优化性能。
-
-useCallback✅
-
-useContext✅
-
-useEffect✅
-
-useLayoutEffect ✅
-
-useMemo ✅
-
-useReducer✅
-
-useRef✅
-
-useState✅
-
-## 为什么要使用hooks
-
-我们为什么要使用react-hooks呢，首先和传统的class声明的有状态有这显著的优点就是
-
-1 react-hooks可以让我们的代码的逻辑性更强，可以抽离公共的方法，公共组件。
-
-2 react-hooks思想更趋近于函数式编程。
-
-3 react-hooks可能把庞大的class组件，化整为零成很多小组件，useMemo等方法让组件或者变量制定一个适合自己的独立的渲染空间，一定程度上可以提高性能，减少渲染次数。
-
-## 如何使用hooks
-
-### useState 数据存储，派发更新
-
-useState出现，使得react无状态组件能够像有状态组件一样，可以拥有自己state,useState的参数可以是一个具体的值，也可以是一个函数用于判断复杂的逻辑，函数返回作为初始值，usestate 返回一个数组，数组第一项用于读取此时的state值 ，第二项为派发数据更新，组件渲染的函数，函数的参数即是需要更新的值。useState和useReduce 作为能够触发组件重新渲染的hooks,我们在使用useState的时候要特别注意的是，useState派发更新函数的执行，就会让整个function组件从头到尾执行一次，所以需要配合useMemo，usecallback等api配合使用，这就是我说的为什么滥用hooks会带来负作用的原因之一了。一下代码为usestate基本应用
-
-```jsx
-const DemoState = (props) => {
- /* number为此时state读取值 ，setNumber为派发更新的函数 */
- let [number, setNumber] = useState(0) /* 0为初始值 */
- return (
- { number }
-
-
)
-}
-```
-
-上边简单的例子说明了useState ,但是当我们在调用更新函数之后，state的值是不能即时改变的，只有当下一次上下文执行的时候，state值才随之改变。
-
-```jsx
-const a =1
-const DemoState = (props) => {
- /* useState 第一个参数如果是函数 则处理复杂的逻辑 ，返回值为初始值 */
- let [number, setNumber] = useState(()=>{
- // number
- return a===1 ? 1 : 2
- }) /* 1为初始值 */
- return (
- { number }
-
-
)
-}
-```
-
-### useEffect 组件更新副作用钩子
-
-如果你想在function组件中，当组件完成挂载，dom渲染完成，做一些操纵dom,请求数据，那么useEffect是一个不二选择，如果我们需要在组件初次渲染的时候请求数据，那么useEffect可以充当class组件中的 componentDidMount , **但是特别注意的是，如果不给useEffect执行加入限定条件，函数组件每一次更新都会触发effect ,那么也就说明每一次state更新，或是props的更新都会触发useEffect执行，此时的effect又充当了componentDidUpdate和componentwillreceiveprops，所以说合理的用于useEffect就要给effect加入限定执行的条件，也就是useEffect的第二个参数，这里说是限定条件，也可以说是上一次useeffect更新收集的某些记录数据变化的记忆，在新的一轮更新，useeffect会拿出之前的记忆值和当前值做对比，如果发生了变化就执行新的一轮useEffect的副作用函数，useEffect第二个参数是一个数组，用来收集多个限制条件 。**
-
-```jsx
-/* 模拟数据交互 */
-function getUserInfo(a){
- return new Promise((resolve)=>{
- setTimeout(()=>{
- resolve({
- name:a,
- age:16,
- })
- },500)
- })
-}
-
-const Demo = ({ a }) => {
- const [ userMessage , setUserMessage ] :any= useState({})
- const div= useRef()
- const [number, setNumber] = useState(0)
- /* 模拟事件监听处理函数 */
- const handleResize =()=>{}
- /* useEffect使用 ，这里如果不加限制 ，会是函数重复执行，陷入死循环*/
- useEffect(()=>{
- /* 请求数据 */
- getUserInfo(a).then(res=>{
- setUserMessage(res)
- })
- /* 操作dom */
- console.log(div.current) /* div */
- /* 事件监听等 */
- window.addEventListener('resize', handleResize)
- /* 只有当props->a和state->number改变的时候 ,useEffect副作用函数重新执行 ，如果此时数组为空[]，证明函数只有在初始化的时候执行一次相当于componentDidMount */
- },[ a ,number ])
- return (
-
{ userMessage.name }
-
{ userMessage.age }
-
setNumber(1) } >{ number }
-
)
-}
-```
-
-如果我们需要在组件销毁的阶段，做一些取消dom监听，清除定时器等操作，那么我们可以在useEffect函数第一个参数，结尾返回一个函数，用于清除这些副作用。相当与componentWillUnmount。
-
-```jsx
-const Demo = ({ a }) => {
- /* 模拟事件监听处理函数 */
- const handleResize =()=>{}
- useEffect(()=>{
- /* 定时器 延时器等 */
- const timer = setInterval(()=>console.log(666),1000)
- /* 事件监听 */
- window.addEventListener('resize', handleResize)
- /* 此函数用于清除副作用 */
- return function(){
- clearInterval(timer)
- window.removeEventListener('resize', handleResize)
- }
- },[ a ])
- return (
-
)
-}
-```
-
-#### 异步 async effect ?
-
-提醒大家的是 useEffect是不能直接用 async await 语法糖的
-
-```js
-/* 错误用法 ，effect不支持直接 async await 装饰的 */
- useEffect(async ()=>{
- /* 请求数据 */
- const res = await getUserInfo(payload)
- },[ a ,number ])
-
-
-```
-
-如果我们想要用 async effect 可以对effect进行一层包装（传入async await装饰的回调函数）
-
-```js
-const asyncEffect = (callback, deps)=>{
- useEffect(()=>{
- callback()
- },deps)
-}
-```
-
-### useLayoutEffect 渲染更新之前的 useEffect
-
-useEffect 执行顺序：组件更新挂载完成 -> 浏览器dom 绘制完成 -> 执行useEffect回调 。
-
-useLayoutEffect 执行顺序：组件更新挂载完成 -> 执行useLayoutEffect回调-> 浏览器dom 绘制完成
-
-所以说useLayoutEffect 代码可能会阻塞浏览器的绘制 如果我们在useEffect 重新请求数据，渲染视图过程中，肯定会造成画面闪动的效果,而如果用useLayoutEffect ，**回调函数的代码就会阻塞浏览器绘制**，所以可定会引起画面卡顿等效果，那么具体要用 useLayoutEffect 还是 useEffect ，要看实际项目的情况，大部分的情况 useEffect 都可以满足的。
-
-```jsx
-const DemoUseLayoutEffect = () => {
- const target = useRef()
- useLayoutEffect(() => {
- /*我们需要在dom绘制之前，移动dom到制定位置*/
- const { x ,y } = getPositon() /* 获取要移动的 x,y坐标 */
- animate(target.current,{ x,y })
- }, []);
- return (
-
-
-
- )
-}
-```
-
-### useRef 获取元素 ,缓存数据。
-
-和传统的class组件ref一样，react-hooks 也提供获取元素方法 useRef,它有一个参数可以作为缓存数据的初始值，返回值可以被dom元素ref标记，可以获取被标记的元素节点.
-
-```jsx
-const DemoUseRef = ()=>{
- const dom= useRef(null)
- const handerSubmit = ()=>{
- /*
表单组件
dom 节点 */
- console.log(dom.current)
- }
- return
- {/* ref 标记当前dom节点 */}
-
表单组件
-
-
-}
-```
-
-#### 高阶用法 缓存数据
-
-**当然useRef还有一个很重要的作用就是缓存数据，我们知道usestate ,useReducer 是可以保存当前的数据源的，但是如果它们更新数据源的函数执行必定会带来整个组件从新执行到渲染，如果在函数组件内部声明变量，则下一次更新也会重置，如果我们想要悄悄的保存数据，而又不想触发函数的更新，那么useRef是一个很棒的选择。**
-
-> const currenRef = useRef(InitialData)
-
-获取 currenRef.current 改变 currenRef.current = newValue
-
-useRef可以第一个参数可以用来初始化保存数据，这些数据可以在current属性上获取到 ，当然我们也可以通过对current赋值新的数据源。
-
-### useContext 自由获取context
-
-我们可以使用useContext ，来获取父级组件传递过来的context值，**这个当前值就是最近的父级组件 Provider 设置的value值**，useContext参数一般是由 createContext 方式引入 ,也可以父级上下文context传递 ( 参数为context )。useContext 可以代替 context.Consumer 来获取Provider中保存的value值
-
-```jsx
-/* 用useContext方式 */
-const DemoContext = ()=> {
- const value:any = useContext(Context)
- /* my name is alien */
-return
my name is { value.name }
-}
-
-/* 用Context.Consumer 方式 */
-const DemoContext1 = ()=>{
- return
- {/* my name is alien */}
- { (value)=> my name is { value.name }
}
-
-}
-
-export default ()=>{
- return
-
-
-
-
-
-}
-```
-
-### useReducer 无状态组件中的redux
-
-useReducer 是react-hooks提供的能够在无状态组件中运行的类似redux的功能api，至于它到底能不能代替redux react-redux ,我个人的看法是不能的 ，redux 能够复杂的逻辑中展现优势 ，而且 redux的中间件模式思想也是非常优秀了，我们可以通过中间件的方式来增强dispatch redux-thunk redux-sage redux-action redux-promise都是比较不错的中间件，可以把同步reducer编程异步的reducer。useReducer 接受的第一个参数是一个函数，我们可以认为它就是一个reducer ,reducer的参数就是常规reducer里面的state和action,返回改变后的state, useReducer第二个参数为state的初始值 返回一个数组，数组的第一项就是更新之后state的值 ，第二个参数是派发更新的dispatch函数 。**dispatch 的触发会触发组件的更新，这里能够促使组件从新的渲染的一个是useState派发更新函数，另一个就 useReducer中的dispatch**
-
-```jsx
-const DemoUseReducer = ()=>{
- /* number为更新后的state值, dispatchNumbner 为当前的派发函数 */
- const [ number , dispatchNumbner ] = useReducer((state,action)=>{
- const { payload , name } = action
- /* return的值为新的state */
- switch(name){
- case 'add':
- return state + 1
- case 'sub':
- return state - 1
- case 'reset':
- return payload
- }
- return state
- },0)
- return
- 当前值：{ number }
- { /* 派发更新 */ }
-
-
-
- { /* 把dispatch 和 state 传递给子组件 */ }
-
-
-}
-```
-
-当然实际业务逻辑可能更复杂的，需要我们在reducer里面做更复杂的逻辑操作。
-
-### useMemo 小而香性能优化
-
-useMemo我认为是React设计最为精妙的hooks之一，优点就是能形成独立的渲染空间，能够使组件，变量按照约定好规则更新。渲染条件依赖于第二个参数deps。 我们知道无状态组件的更新是从头到尾的更新，如果你想要从新渲染一部分视图，而不是整个组件，那么用useMemo是最佳方案，避免了不需要的更新，和不必要的上下文的执行，在介绍useMemo之前，我们先来说一说, memo, 我们知道class声明的组件可以用componentShouldUpdate来限制更新次数，那么memo就是无状态组件的ShouldUpdate ， 而我们今天要讲的useMemo就是更为细小的ShouldUpdate单元，
-
-先来看看memo ,memo的作用结合了pureComponent纯组件和 componentShouldUpdate功能，会对传进来的props进行一次对比，然后根据第二个函数返回值来进一步判断哪些props需要更新。
-
-```jsx
-/* memo包裹的组件，就给该组件加了限制更新的条件，是否更新取决于memo第二个参数返回的boolean值， */
-const DemoMemo = connect(state =>
- ({ goodList: state.goodList })
-)(memo(({ goodList, dispatch, }) => {
- useEffect(() => {
- dispatch({
- name: 'goodList',
- })
- }, [])
- return
- /* 判断之前的goodList 和新的goodList 是否相等，如果相等，
- 则不更新此组件 这样就可以制定属于自己的渲染约定 ，让组件只有满足预定的下才重新渲染 */
-}, (pre, next) => is(pre.goodList, next.goodList)))
-```
-
-useMemo的应用理念和memo差不多，都是判定是否满足当前的限定条件来决定是否执行useMemo的callback函数，而useMemo的第二个参数是一个deps数组，数组里的参数变化决定了useMemo是否更新回调函数，useMemo返回值就是经过判定更新的结果。它可以应用在元素上，应用在组件上，也可以应用在上下文当中。如果又一个循环的list元素，那么useMemo会是一个不二选择，接下来我们一起探寻一下useMemo的优点
-
-```js
-/* 用 useMemo包裹的list可以限定当且仅当list改变的时候才更新此list，这样就可以避免selectList重新循环 */
- {useMemo(() => (
-
{
- selectList.map((i, v) => (
-
- {i.patentName}
-
- ))}
-
-), [selectList])}
-```
-
-**1 useMemo可以减少不必要的循环，减少不必要的渲染**
-
-```js
- useMemo(() => (
-
取消,
-
- ]}
- >
- { /* 减少了PatentTable组件的渲染 */ }
-
-
- ), [listshow, cacheSelectList])
-```
-
-**2 useMemo可以减少子组件的渲染次数**
-
-```jsx
-const DemoUseMemo=()=>{
- /* 用useMemo 包裹之后的log函数可以避免了每次组件更新再重新声明 ，可以限制上下文的执行 */
- const newLog = useMemo(()=>{
- const log =()=>{
- console.log(6666)
- }
- return log
- },[])
- return
newLog()} >
-}
-```
-
-**3 useMemo让函数在某个依赖项改变的时候才运行，这可以避免很多不必要的开销（这里要注意⚠️⚠️⚠️的是如果被useMemo包裹起来的上下文,形成一个独立的闭包，会缓存之前的state值,如果没有加相关的更新条件，是获取不到更新之后的state的值的，如下边👇⬇️）**
-
-```jsx
-const DemoUseMemo=()=>{
- const [ number ,setNumber ] = useState(0)
- const newLog = useMemo(()=>{
- const log =()=>{
- /* 点击span之后 打印出来的number 不是实时更新的number值 */
- console.log(number)
- }
- return log
- /* [] 没有 number */
- },[])
- return
-
newLog()} >打印
-
setNumber( number + 1 ) } >增加
-
-}
-```
-
-**useMemo很不错，react-redux 用react-hooks重写后运用了大量的useMemo情景，我为大家分析两处**
-
-useMemo 同过 store didStoreComeFromProps contextValue 属性制定是否需要重置更新订阅者subscription ，这里我就不为大家讲解react-redux了，有兴趣的同学可以看看react-redux源码，看看是怎么用useMemo的
-
-```js
-const [subscription, notifyNestedSubs] = useMemo(() => {
- if (!shouldHandleStateChanges) return NO_SUBSCRIPTION_ARRAY
-
- const subscription = new Subscription(
- store,
- didStoreComeFromProps ? null : contextValue.subscription // old
- )
-
- const notifyNestedSubs = subscription.notifyNestedSubs.bind(
- subscription
- )
-
- return [subscription, notifyNestedSubs]
-}, [store, didStoreComeFromProps, contextValue])
-```
-
-react-redux通过 判断 redux store的改变来获取与之对应的state
-
-```js
- const previousState = useMemo(() => store.getState(), [store])
-```
-
-讲到这里，**如果我们应用useMemo根据依赖项合理的颗粒化我们的组件，能起到很棒的优化组件的作用。**
-
-### 8 useCallback useMemo版本的回调函数
-
-useMemo和useCallback接收的参数都是一样，都是在其依赖项发生变化后才执行，都是返回缓存的值，区别在于useMemo返回的是函数运行的结果，useCallback返回的是函数，这个回调函数是经过处理后的也就是说父组件传递一个函数给子组件的时候，由于是无状态组件每一次都会重新生成新的props函数，这样就使得每一次传递给子组件的函数都发生了变化，这时候就会触发子组件的更新，这些更新是没有必要的，此时我们就可以通过usecallback来处理此函数，然后作为props传递给子组件
-
-```js
-/* 用react.memo */
-const DemoChildren = React.memo((props)=>{
- /* 只有初始化的时候打印了 子组件更新 */
- console.log('子组件更新')
- useEffect(()=>{
- props.getInfo('子组件')
- },[])
- return
子组件
-})
-
-const DemoUseCallback=({ id })=>{
- const [number, setNumber] = useState(1)
- /* 此时usecallback的第一参数 (sonName)=>{ console.log(sonName) }
- 经过处理赋值给 getInfo */
- const getInfo = useCallback((sonName)=>{
- console.log(sonName)
- },[id])
- return
- {/* 点击按钮触发父组件更新 ，但是子组件没有更新 */}
-
-
-
-}
-```
-
-**这里应该提醒的是，useCallback ，必须配合 react.memo pureComponent ，否则不但不会提升性能，还有可能降低性能**
diff --git "a/src/React/ReactRouter V6 \350\247\243\346\236\220.md" "b/src/React/ReactRouter V6 \350\247\243\346\236\220.md"
deleted file mode 100644
index d5682692..00000000
--- "a/src/React/ReactRouter V6 \350\247\243\346\236\220.md"
+++ /dev/null
@@ -1,124 +0,0 @@
----
-date: 2022-05-12
-category:
-- React
----
-# ReactRouter V6 解析
-
-## 基础使用
-
-基于项目模板安装react-router-dom
-
-` yarn add react-router-dom@6`
-
-## 核心组件
-
-### BrowerRouter
-
-**作用：**包裹整个应用，一个 React 应用只需要使用一次
-
-**两种常用 Router** **:** HashRouter 和 BrowserRouter
-
-**HashRouter**
-
-使用 URL 的哈希值实现（http://localhost:3000/#/first）
-
-**BrowserRouter** **(** **推荐** **)**
-
-使用 H5 的 history.pushState API 实现（http://localhost:3000/first）
-
-### Link
-
-**作用** **：**用于指定导航链接，完成路由跳转
-
-**语法说明：** 组件通过to属性指定路由地址，最终会渲染为a链接元素
-
-```jsx
-
-```
-
-### Routes
-
-**作用** **：**提供一个路由出口，满足条件的路由组件会渲染到组件内部，定义path和组件的对应关系。用于指定导航链接，完成路由匹配
-
-**语法说明：** path属性指定匹配的路径地址，element属性指定要渲染的组件。
-
-```jsx
-
}/>
-```
-
-**说明：**当url路径为 ‘/about’ 时，会渲染` `组件
-
-## 编程式导航
-
-### 跳转
-
-**作用** **：**通过js编程的方式进行路由页面跳转，比如从登录页跳转到关于页
-
-**语法说明：**
-
-1. 导入useNavigate钩子函数
-
-
-2. 执行钩子函数得到跳转函数
-
-
-3. 执行跳转函数完成跳转
-
-
-
- **注意**：如果在跳转时不想加历史记录，可以添加额外参数replace为true
-
-### 跳转携带参数
-
-**场景** **：**有些时候不光需要跳转路由还需要传递参数
-
-**俩种方式：**
-
-1. searchParams传参
-
- 传参：
-
- 
-
- 取参：
-
- 
-
-2. params传参（path配合：/：id）
-
- 传参：
-
- 
-
- 取参：
-
- 
-
-## 嵌套路由
-
-### 代码实现
-
-1. App.js: 定义嵌套路由声明
-
- 
-
-2. Layout.js: 使用 ``指定二级路由出口
-
- 
-
-### 默认二级路由
-
-**场景：** 应用首次渲染完毕就需要显示的二级路由
-
-**怎么做：** 1. 给默认路由标记index 2. 修改跳转路径path
-
-
-
-## 404页配置
-
-**场景：**当所有的路径都没有匹配的时候显示
-
-**语法说明：** 在各级路由的最后添加 * 号路由 作为兜底
-
-
diff --git "a/src/React/React\345\237\272\347\241\200.md" "b/src/React/React\345\237\272\347\241\200.md"
deleted file mode 100644
index e09b311d..00000000
--- "a/src/React/React\345\237\272\347\241\200.md"
+++ /dev/null
@@ -1,2074 +0,0 @@
----
-date: 2022-05-02
-category:
-- React
----
-
-# React基础
-
-## React介绍
-
-`目标任务:` 了解什么是React以及它的特点
-
-**React是什么**
-
- 一个专注于构建用户界面的 JavaScript 库，和vue和angular并称前端三大框架，不夸张的说，react引领了很多新思想，世界范围内是最流行的js前端框架，最近发布了18版本，加入了很多新特性
-
- React英文文档（https://reactjs.org/）
-
- React中文文档 （https://zh-hans.reactjs.org/）
-
- React新文档 （https://beta.reactjs.org/）（开发中....）
-
-**React有什么特点**
-
-1. 声明式UI（JSX）
-
- 写UI就和写普通的HTML一样，抛弃命令式的繁琐实现
-
- 
-
-2. 组件化
-
- 组件是react中最重要的内容，组件可以通过搭积木的方式拼成一个完整的页面，通过组件的抽象可以增加复用能力和提高可维护性
-
-
-
-3. 一次学习，矿平台编写
-
- react既可以开发web应用也可以使用同样的语法开发原生应用（react-native），比如安卓和ios应用，甚至可以使用react开发VR应用，想象力空间十足，react更像是一个 `元框架` 为各种领域赋能
-
-
-
-## 环境初始化
-
-`目标任务:` 能够独立使用React脚手架创建一个react项目
-
-### 1. 使用脚手架创建项目
-
-
-
-- 打开命令行窗口
-
-- 执行命令
-
- ```bash
- npx create-react-app react-basic
- ```
-
- 说明：
-
- 1. npx create-react-app 是固定命令，`create-react-app`是React脚手架的名称
- 2. react-basic表示项目名称，可以自定义，保持语义化
- 3. npx 命令会帮助我们临时安装create-react-app包，然后初始化项目完成之后会自自动删掉，所以不需要全局安装create-react-app
-
-- 启动项目
-
- ```bash
- yarn start
- or
- npm start
- ```
-
-### 2. 项目目录说明调整
-
-- 目录说明
-
- 1. `src` 目录是我们写代码进行项目开发的目录
-
- 2. `package.json` 中俩个核心库：react 、react-dom
-
-- 目录调整
-
- 1. 删除src目录下自带的所有文件，只保留app.js根组件和index.js
- 2. 创建index.js文件作为项目的入口文件，在这个文件中书写react代码即可
-
-- 入口文件说明
-
- ```jsx
- import React from 'react'
- import ReactDOM from 'react-dom'
- import './index.css'
- // 引入根组件App
- import App from './App'
- // 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上
- ReactDOM.render(
-
-
- ,
- document.getElementById('root')
- )
- ```
-
-## JSX基础
-
-### 1. JSX介绍
-
-`目标任务:` 能够理解什么是JSX，JSX的底层是什么
-
-概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构
-
-作用：在React中创建HTML结构（页面UI结构）
-
-优势：
-
-1. 采用类似于HTML的语法，降低学习成本，会HTML就会JSX
-2. 充分利用JS自身的可编程能力创建HTML结构
-
-注意：JSX 并不是标准的 JS 语法，是 JS 的语法扩展，浏览器默认是不识别的，脚手架中内置的 [@babel/plugin-transform-react-jsx](@babel/plugin-transform-react-jsx) 包，用来解析该语法
-
-
-
-
-
-
-
-### 2. JSX中使用js表达式
-
-`目标任务:` 能够在JSX中使用表达式
-
-**语法**
-
-`{ JS 表达式 }`
-
-```jsx
-const name = '柴柴'
-
-你好，我叫{name}
// 你好,我叫柴柴
-```
-
-**可以使用的表达式**
-
-1. 字符串、数值、布尔值、null、undefined、object（ [] / {} ）
-2. 1 + 2、'abc'.split('')、['a', 'b'].join('-')
-3. fn()
-
-**特别注意**
-
- if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 `{}` 中！！
-
-### 3. JSX列表渲染
-
-`目标任务:` 能够在JSX中实现列表渲染
-
-> 页面的构建离不开重复的列表结构，比如歌曲列表，商品列表等，我们知道vue中用的是v-for，react这边如何实现呢？
-
-实现：使用数组的`map` 方法
-
-案例：
-
-```jsx
-// 来个列表
-const songs = [
- { id: 1, name: '痴心绝对' },
- { id: 2, name: '像我这样的人' },
- { id: 3, name: '南山南' }
-]
-
-function App() {
- return (
-
-
- {
- songs.map(item => - {item.name}
)
- }
-
-
- {/* 条件渲染字符串 */}
- {flag ? 'react真有趣' : 'vue真有趣'}
- {/* 条件渲染标签/组件 */}
- {flag ? this is span : null}
-
- )
-}
-export default App
-```
-
-
-
-### 5. JSX样式处理
-
-`目标任务:` 能够在JSX中实现css样式处理
-
-- 行内样式 - style
-
- ```jsx
- function App() {
- return (
-
- )
- }
-
- export default App
- ```
-
-- 行内样式 - style - 更优写法
-
- ```jsx
- const styleObj = {
- color:red
- }
-
- function App() {
- return (
-
- )
- }
-
- export default App
- ```
-
-
-
-- 类名 - className（推荐）
-
- `app.css`
-
- ```css
- .title {
- font-size: 30px;
- color: blue;
- }
- ```
-
- `app.js`
-
- ```jsx
- import './app.css'
-
- function App() {
- return (
-
- )
- }
- export default App
- ```
-
-- 类名 - className - 动态类名控制
-
- ```jsx
- import './app.css'
- const showTitle = true
- function App() {
- return (
-
- )
- }
- export default App
- ```
-
-### 6. JSX注意事项
-
-`目标任务:` 掌握JSX在实际应用时的注意事项
-
-1. JSX必须有一个根节点，如果没有根节点，可以使用`<>`（幽灵节点）替代
-2. 所有标签必须形成闭合，成对闭合或者自闭合都可以
-3. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 `class -> className` `for -> htmlFor`
-4. JSX支持多行（换行），如果需要换行，需使用`()` 包裹，防止bug出现
-
-## 格式化配置
-
-`目标任务:` 基于vscode配置格式化工具，提高开发效率
-
-1. 安装vsCode prettier插件
-
-2. 修改配置文件 `setting.json`
-
- ```json
- {
- "git.enableSmartCommit": true,
- // 修改注释颜色
- "editor.tokenColorCustomizations": {
- "comments": {
- "fontStyle": "bold",
- "foreground": "#82e0aa"
- }
- },
- // 配置文件类型识别
- "files.associations": {
- "*.js": "javascript",
- "*.json": "jsonc",
- "*.cjson": "jsonc",
- "*.wxss": "css",
- "*.wxs": "javascript"
- },
- "extensions.ignoreRecommendations": false,
- "files.exclude": {
- "**/.DS_Store": true,
- "**/.git": true,
- "**/.hg": true,
- "**/.svn": true,
- "**/CVS": true,
- "**/node_modules": false,
- "**/tmp": true
- },
- // "javascript.implicitProjectConfig.experimentalDecorators": true,
- "explorer.confirmDragAndDrop": false,
- "typescript.updateImportsOnFileMove.enabled": "prompt",
- "git.confirmSync": false,
- "editor.tabSize": 2,
- "editor.fontWeight": "500",
- "[json]": {},
- "editor.tabCompletion": "on",
- "vsicons.projectDetection.autoReload": true,
- "editor.fontFamily": "Monaco, 'Courier New', monospace, Meslo LG M for Powerline",
- "[html]": {
- "editor.defaultFormatter": "vscode.html-language-features"
- },
- "editor.fontSize": 16,
- "debug.console.fontSize": 14,
- "vsicons.dontShowNewVersionMessage": true,
- "editor.minimap.enabled": true,
- "emmet.extensionsPath": [
- ""
- ],
- // vue eslint start 保存时自动格式化代码
- "editor.formatOnSave": true,
- // eslint配置项，保存时自动修复错误
- "editor.codeActionsOnSave": {
- "source.fixAll": true
- },
- "vetur.ignoreProjectWarning": true,
- // 让vetur使用vs自带的js格式化工具
- // uni-app和vue 项目使用
- "vetur.format.defaultFormatter.js": "vscode-typescript",
- "javascript.format.semicolons": "remove",
- // // 指定 *.vue 文件的格式化工具为vetur
- "[vue]": {
- "editor.defaultFormatter": "octref.vetur"
- },
- // // 指定 *.js 文件的格式化工具为vscode自带
- "[javascript]": {
- "editor.defaultFormatter": "vscode.typescript-language-features"
- },
- // // 默认使用prettier格式化支持的文件
- "editor.defaultFormatter": "esbenp.prettier-vscode",
- "prettier.jsxBracketSameLine": true,
- // 函数前面加个空格
- "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
- "prettier.singleQuote": true,
- "prettier.semi": false,
- // eslint end
- // react
- // 当按tab键的时候，会自动提示
- "emmet.triggerExpansionOnTab": true,
- "emmet.showAbbreviationSuggestions": true,
- "emmet.includeLanguages": {
- // jsx的提示
- "javascript": "javascriptreact",
- "vue-html": "html",
- "vue": "html",
- "wxml": "html"
- },
- // end
- "[jsonc]": {
- "editor.defaultFormatter": "vscode.json-language-features"
- },
- // @路径提示
- "path-intellisense.mappings": {
- "@": "${workspaceRoot}/src"
- },
- "security.workspace.trust.untrustedFiles": "open",
- "git.ignoreMissingGitWarning": true,
- "window.zoomLevel": 1
- }
- ```
-
-
-
-## 阶段小练习
-
-
-
-练习说明
-
-1. 拉取准备好的项目模块到本地 ，安装依赖，run起来项目
-
- https://gitee.com/react-course-series/react-jsx-demo
-
-2. 按照图示，完成 `评论数据渲染` `tab内容渲染` `评论列表点赞和点踩` 三个视图渲染
-
-
-
-# React组件基础
-
-## 组件概念
-
-
-
-## 函数组件
-
-`目标任务:` 能够独立使用函数完成react组件的创建和渲染
-
-**概念**
-
-> 使用 JS 的函数（或箭头函数）创建的组件，就叫做`函数组件`
-
-**组件定义与渲染**
-
-```jsx
-// 定义函数组件
-function HelloFn () {
- return 这是我的第一个函数组件!
-}
-
-// 定义类组件
-function App () {
- return (
-
- {/* 渲染函数组件 */}
-
-
-
- )
-}
-export default App
-```
-
-**约定说明**
-
-1. 组件的名称**必须首字母大写**，react内部会根据这个来判断是组件还是普通的HTML标签
-2. 函数组件**必须有返回值**，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
-
-3. 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的**返回值**就是对应的内容
-4. 使用函数名称作为组件标签名称，可以成对出现也可以自闭合
-
-## 类组件
-
-`目标任务:` 能够独立完成类组件的创建和渲染
-
-> 使用 ES6 的 class 创建的组件，叫做类（class）组件
-
-**组件定义与渲染**
-
-```jsx
-// 引入React
-import React from 'react'
-
-// 定义类组件
-class HelloC extends React.Component {
- render () {
- return 这是我的第一个类组件!
- }
-}
-
-function App () {
- return (
-
- {/* 渲染类组件 */}
-
-
-
- )
-}
-export default App
-```
-
-**约定说明**
-
-1. **类名称也必须以大写字母开头**
-
-2. 类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
-
-3. 类组件必须提供 render 方法**render 方法必须有返回值，表示该组件的 UI 结构**
-
-
-## 事件绑定
-
-`目标任务:` 能够独立绑定任何事件并能获取到事件对象e
-
-### 1. 如何绑定事件
-
-- 语法
-
- on + 事件名称 = { 事件处理程序 } ，比如：`{}}>
`
-
-- 注意点
-
- react事件采用驼峰命名法，比如：onMouseEnter、onFocus
-
-- 样例
-
- ```jsx
- // 函数组件
- function HelloFn () {
- // 定义事件回调函数
- const clickHandler = () => {
- console.log('事件被触发了')
- }
- return (
- // 绑定事件
-
- )
- }
-
- // 类组件
- class HelloC extends React.Component {
- // 定义事件回调函数
- clickHandler = () => {
- console.log('事件被触发了')
- }
- render () {
- return (
- // 绑定事件
-
- )
- }
- }
- ```
-
-### 2. 获取事件对象
-
-- 通过事件处理程序的参数获取事件对象e
-
- ```jsx
- // 函数组件
- function HelloFn () {
- // 定义事件回调函数
- const clickHandler = (e) => {
- e.preventDefault()
- console.log('事件被触发了', e)
- }
- return (
- // 绑定事件
- 百度
- )
- }
- ```
-
-
-## 组件状态
-
-`目标任务:` 能够为组件添加状态和修改状态的值
-
-> 一个前提：在react hook出来之前，函数式组件是没有自己的状态的，所以我们统一通过类组件来讲解
-
-
-
-### 1. 初始化状态
-
-- 通过class的实例属性state来初始化
-
-- state的值是一个对象结构，表示一个组件可以有多个数据状态
-
- ```jsx
- class Counter extends React.Component {
- // 初始化状态
- state = {
- count: 0
- }
- render() {
- return
- }
- }
- ```
-
-### 2. 读取状态
-
-- 通过this.state来获取状态
-
- ```jsx
- class Counter extends React.Component {
- // 初始化状态
- state = {
- count: 0
- }
- render() {
- // 读取状态
- return
- }
- }
- ```
-
-### 3. 修改状态
-
-- 语法
-
- `this.setState({ 要修改的部分数据 })`
-
-- setState方法作用
-
- 1. 修改state中的数据状态
- 2. 更新UI
-
-- 思想
-
- 数据驱动视图，也就是只要修改数据状态，那么页面就会自动刷新，无需手动操作dom
-
-- 注意事项
-
- **不要直接修改state中的值，必须通过setState方法进行修改**
-
-
-```jsx
-class Counter extends React.Component {
- // 定义数据
- state = {
- count: 0
- }
- // 定义修改数据的方法
- setCount = () => {
- this.setState({
- count: this.state.count + 1
- })
- }
- // 使用数据 并绑定事件
- render () {
- return
- }
-}
-```
-
-## this问题说明
-
-
-
-这里我们作为了解内容，随着js标准的发展，主流的写法已经变成了class fields，无需考虑太多this问题
-
-## React的状态不可变
-
-`目标任务:` 能够理解不可变的意义并且知道在实际开发中如何修改状态
-
-**概念**：不要直接修改状态的值，而是基于当前状态创建新的状态值
-
-**1. 错误的直接修改**
-
-```js
-state = {
- count : 0,
- list: [1,2,3],
- person: {
- name:'jack',
- age:18
- }
-}
-// 直接修改简单类型Number
-this.state.count++
-++this.state.count
-this.state.count += 1
-this.state.count = 1
-
-// 直接修改数组
-this.state.list.push(123)
-this.state.list.spice(1,1)
-
-// 直接修改对象
-this.state.person.name = 'rose'
-```
-
-**2. 基于当前状态创建新值**
-
-```js
-this.setState({
- count: this.state.count + 1
- list: [...this.state.list, 4],
- person: {
- ...this.state.person,
- // 覆盖原来的属性 就可以达到修改对象中属性的目的
- name: 'rose'
- }
-})
-```
-
-## 表单处理
-
-`目标任务:` 能够使用受控组件的方式获取文本框的值
-
-使用React处理表单元素，一般有俩种方式：
-
-1. 受控组件 （推荐使用）
-
-2. 非受控组件 （了解）
-
-### 1. 受控表单组件
-
-> 什么是受控组件？ `input框自己的状态被React组件状态控制`
->
-> React组件的状态的地方是在state中，input表单元素也有自己的状态是在value中，React将state与表单元素的值（value）绑定到一起，由state的值来控制表单元素的值，从而保证单一数据源特性
-
-**实现步骤**
-
-以获取文本框的值为例，受控组件的使用步骤如下：
-
-1. 在组件的state中声明一个组件的状态数据
-2. 将状态数据设置为input标签元素的value属性的值
-3. 为input添加change事件，在事件处理程序中，通过事件对象e获取到当前文本框的值（`即用户当前输入的值`）
-
-4. 调用setState方法，将文本框的值作为state状态的最新值
-
-**代码落地**
-
-```jsx
-import React from 'react'
-
-class InputComponent extends React.Component {
- // 声明组件状态
- state = {
- message: 'this is message',
- }
- // 声明事件回调函数
- changeHandler = (e) => {
- this.setState({ message: e.target.value })
- }
- render () {
- return (
-
- {/* 绑定value 绑定事件*/}
-
-
- )
- }
-}
-
-
-function App () {
- return (
-
-
-
- )
-}
-export default App
-```
-
-### 2. 非受控表单组件
-
-> 什么是非受控组件？
->
-> 非受控组件就是通过手动操作dom的方式获取文本框的值，文本框的状态不受react组件的state中的状态控制，直接通过原生dom获取输入框的值
-
-**实现步骤**
-
-1. 导入`createRef` 函数
-2. 调用createRef函数，创建一个ref对象，存储到名为`msgRef`的实例属性中
-3. 为input添加ref属性，值为`msgRef`
-4. 在按钮的事件处理程序中，通过`msgRef.current`即可拿到input对应的dom元素，而其中`msgRef.current.value`拿到的就是文本框的值
-
-**代码落地**
-
-```jsx
-import React, { createRef } from 'react'
-
-class InputComponent extends React.Component {
- // 使用createRef产生一个存放dom的对象容器
- msgRef = createRef()
-
- changeHandler = () => {
- console.log(this.msgRef.current.value)
- }
-
- render() {
- return (
-
- {/* ref绑定 获取真实dom */}
-
-
-
- )
- }
-}
-
-function App () {
- return (
-
-
-
- )
-}
-export default App
-```
-
-## 阶段小练习
-
-
-
-练习说明
-
- 1. 拉取项目模板到本地，安装依赖，run起来项目
-
- https://gitee.com/react-course-series/react-component-demo
-
-2. 完成tab点击切换激活状态交互
-
-3. 完成发表评论功能
-
- 注意：生成独立无二的id 可以使用 uuid 包 `yarn add uuid`
-
- ```js
- import {v4 as uuid} from 'uuid'
- uuid() // 得到一个独一无二的id
- ```
-
-4. 完成删除评论功能
-
-# React组件通信
-
-## 组件通信的意义
-
-`目标任务:` 了解为什么需要组件通信
-
-组件是独立且封闭的单元，默认情况下组件**只能使用自己的数据（state）**
-
-组件化开发的过程中，完整的功能会拆分多个组件，在这个过程中不可避免的需要互相传递一些数据
-
-为了能让各组件之间可以进行互相沟通，数据传递，这个过程就是组件通信
-
-1. 父子关系 - **最重要的**
-2. 兄弟关系 - 自定义事件模式产生技术方法 eventBus / 通过共同的父组件通信
-3. 其它关系 - **mobx / redux / 基于hook的方案**
-
-## 父传子实现
-
-`目标任务:` 实现父子通信中的父传子，把父组件中的数据传给子组件
-
-**实现步骤**
-
-1. 父组件提供要传递的数据 - `state`
-
-2. 给子组件标签`添加属性`值为 state中的数据
-
-3. 子组件中通过 `props` 接收父组件中传过来的数据
-
- 1. 类组件使用this.props获取props对象
- 2. 函数式组件直接通过参数获取props对象
-
-
-
-
-
-
-
-**代码实现**
-
-```jsx
-import React from 'react'
-
-// 函数式子组件
-function FSon(props) {
- console.log(props)
- return (
-
- 子组件1
- {props.msg}
-
- )
-}
-
-// 类子组件
-class CSon extends React.Component {
- render() {
- return (
-
- 子组件2
- {this.props.msg}
-
- )
- }
-}
-// 父组件
-class App extends React.Component {
- state = {
- message: 'this is message'
- }
- render() {
- return (
-
- )
- }
-}
-
-export default App
-```
-
-## props说明
-
-`目标任务:` 知道props传递时的一些注意事项
-
-**1. props是只读对象（readonly）**
-
-根据单项数据流的要求，子组件只能读取props中的数据，不能进行修改
-
-**2. props可以传递任意数据**
-
-数字、字符串、布尔值、数组、对象、`函数、JSX`
-
-```jsx
-class App extends React.Component {
- state = {
- message: 'this is message'
- }
- render() {
- return (
-
-
父组件
-
{ console.log(1) }}
- child={this is child}
- />
-
-
- {props.msg}
-
-
- )
-}
-
-
-class App extends React.Component {
- state = {
- message: 'this is message'
- }
- // 提供回调函数
- changeMessage = (newMsg) => {
- console.log('子组件传过来的数据:',newMsg)
- this.setState({
- message: newMsg
- })
- }
- render() {
- return (
-
- )
- }
-}
-
-export default App
-```
-
-## 兄弟组件通信
-
-`目标任务:` 实现兄弟组件之间的通信
-
-**核心思路：** 通过状态提升机制，利用共同的父组件实现兄弟通信
-
-
-
-**实现步骤**
-
-1. 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
-
- - 提供共享状态
-
- - 提供操作共享状态的方法
-
-2. 要接收数据状态的子组件通过 props 接收数据
-3. 要传递数据状态的子组件通过props接收方法，调用方法传递数据
-
-
-
-**代码实现**
-
-```jsx
-import React from 'react'
-
-// 子组件A
-function SonA(props) {
- return (
-
- SonA
- {props.msg}
-
- )
-}
-// 子组件B
-function SonB(props) {
- return (
-
- SonB
-
-
- )
-}
-
-// 父组件
-class App extends React.Component {
- // 父组件提供状态数据
- state = {
- message: 'this is message'
- }
- // 父组件提供修改数据的方法
- changeMsg = (newMsg) => {
- this.setState({
- message: newMsg
- })
- }
-
- render() {
- return (
- <>
- {/* 接收数据的组件 */}
-
- {/* 修改数据的组件 */}
-
-
- )
- }
-}
-
-export default App
-```
-
-## 跨组件通信Context
-
-`目标任务:` 了解Context机制解决的问题和使用步骤
-
-**问题场景**
-
-
-
-> 上图是一个react形成的嵌套组件树，如果我们想从App组件向任意一个下层组件传递数据，该怎么办呢？目前我们能采取的方式就是一层一层的props往下传，显然很繁琐
->
-> 那么，Context 提供了一个**无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法**
-
-
-
-**实现步骤**
-
-1. 创建Context对象 导出 Provider 和 Consumer对象
-
- ```js
- const { Provider, Consumer } = createContext()
- ```
-
-2. 使用Provider包裹根组件提供数据
-
- ```jsx
-
- {/* 根组件 */}
-
- ```
-
-3. 需要用到数据的组件使用Consumer包裹获取数据
-
- ```jsx
-
- {value => /* 基于 context 值进行渲染*/}
-
- ```
-
-
-
-**代码实现**
-
-```jsx
-import React, { createContext } from 'react'
-
-// 1. 创建Context对象
-const { Provider, Consumer } = createContext()
-
-
-// 3. 消费数据
-function ComC() {
- return (
-
- {value => {value}
}
-
- )
-}
-
-function ComA() {
- return (
-
- )
-}
-
-// 2. 提供数据
-class App extends React.Component {
- state = {
- message: 'this is message'
- }
- render() {
- return (
-
-
-
-
-
- )
- }
-}
-
-export default App
-```
-
-
-
-
-
-## 阶段小练习
-
-> 要求：App为父组件用来提供列表数据 ，ListItem为子组件用来渲染列表数据
-
-
-
-```js
-// 列表数据
-[
- { id: 1, name: '超级好吃的棒棒糖', price: 18.8, info: '开业大酬宾，全场8折' },
- { id: 2, name: '超级好吃的大鸡腿', price: 34.2, info: '开业大酬宾，全场8折' },
- { id: 3, name: '超级无敌的冰激凌', price: 14.2, info: '开业大酬宾，全场8折' }
-]
-```
-
-完整代码
-
-```jsx
-import React from 'react'
-
-// 子组件
-function ListItem(props) {
- const { name, price, info, id, delHandler } = props
- return (
-
-
{name}
-
{price}
-
{info}
-
-
- 此处展示props的默认值：{ pageSize }
-
- )
-}
-
-// 不传入pageSize属性
-
-```
-
-### 2. 类组件
-
-使用类静态属性声明默认值，`static defaultProps = {}`
-
-```jsx
-class List extends Component {
- static defaultProps = {
- pageSize: 10
- }
-
- render() {
- return (
-
- 此处展示props的默认值：{this.props.pageSize}
-
- )
- }
-}
-
-```
-
-## 生命周期 - 概述
-
-`目标任务:` 能够说出组件生命周期一共几个阶段
-
-> 组件的生命周期是指组件从被创建到挂载到页面中运行起来，再到组件不用时卸载的过程，注意，只有类组件才有生命周期（类组件 实例化 函数组件 不需要实例化）
-
-
-
-
-
-
-
-## 生命周期 - 挂载阶段
-
-`目标任务:` 能够说出在组件挂载阶段执行的钩子函数和执行时机
-
-
-
-| 钩子 函数 | 触发时机 | 作用 |
-| ----------------- | --------------------------------------------------- | ------------------------------------------------------------ |
-| constructor | 创建组件时，最先执行，初始化的时候只执行一次 | 1. 初始化state 2. 创建 Ref 3. 使用 bind 解决 this 指向问题等 |
-| render | 每次组件渲染都会触发 | 渲染UI（**注意： 不能在里面调用setState()** ） |
-| componentDidMount | 组件挂载（完成DOM渲染）后执行，初始化的时候执行一次 | 1. 发送网络请求 2.DOM操作 |
-
-## 生命周期 - 更新阶段
-
-`目标任务:` 能够说出组件的更新阶段的钩子函数以及执行时机
-
-
-
-| 钩子函数 | 触发时机 | 作用 |
-| ------------------ | ------------------------- | ------------------------------------------------------------ |
-| render | 每次组件渲染都会触发 | 渲染UI（与 挂载阶段 是同一个render） |
-| componentDidUpdate | 组件更新后（DOM渲染完毕） | DOM操作，可以获取到更新后的DOM内容，**不要直接调用setState** |
-
-## 生命周期 - 卸载阶段
-
-`目标任务:` 能够说出组件的销毁阶段的钩子函数以及执行时机
-
-| 钩子函数 | 触发时机 | 作用 |
-| -------------------- | ------------------------ | ---------------------------------- |
-| componentWillUnmount | 组件卸载（从页面中消失） | 执行清理工作（比如：清理定时器等） |
-
-## 阶段小练习 - todoMVC
-
-案例仓库地址：https://gitee.com/react-course-series/react-todo-mvc
-
-**项目演示步骤：**
-
-1. 克隆项目到本地
-
- ```bash
- git clone https://gitee.com/react-course-series/react-todo-mvc.git
- ```
-
-2. 安装必要依赖
-
- ```bash
- yarn
- ```
-
-3. 开启mock接口服务，**保持窗口不关闭** ！！！！！
-
- ```bash
- # 启动mock服务
- yarn mock-serve
- ```
-
-4. **另起一个bash窗口**开启前端服务
-
- ```bash
- yarn start
- ```
-
-5. 浏览器输入 localhost:3000演示效果
-
-**项目开发步骤：**
-
-1. 切换到todo-test分支
-
- ```bash
- git checkout todo-test
- ```
-
-2. 打开 app.js
-
- 已有基础样板代码，在这个基础上编写业务逻辑即可
-
-3. 接口文档
-
- | 接口作用 | 接口地址 | 接口方法 | 接口参数 |
- | -------- | ------------------------------------- | -------- | ---------------------- |
- | 获取列表 | http://localhost:3001/data | GET | 无 |
- | 删除 | http://localhost:3001/data/:id | DELETE | id |
- | 搜索 | http://localhost:3001/data/?q=keyword | GET | name（以name字段搜索） |
-
-**实现功能**
-
-| 功能 | 核心思路 |
-| ------------ | ------------------------------------ |
-| 表格数据渲染 | elementPlus el-table组件使用 |
-| 删除功能 | 获取当前id 调用接口 |
-| 搜索功能 | 用的依旧是列表接口，多传一个name参数 |
-| 清除搜索功能 | 清空搜索参数 重新获取列表 |
-
-# Hooks基础
-
-## Hooks概念理解
-
-`本节任务:` 能够理解hooks的概念及解决的问题
-
-### 1. 什么是hooks
-
-> Hooks的本质：**一套能够使函数组件更强大，更灵活的“钩子”**
-
-React体系里组件分为 类组件 和 函数组件
-
-经过多年的实战，函数组件是一个更加匹配React的设计理念 `UI = f(data)`，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生
-
-**注意点：**
-
-1. 有了hooks之后，为了兼容老版本，class类组件并没有被移除，俩者都可以使用
-2. 有了hooks之后，不能在把函数成为无状态组件了，因为hooks为函数组件提供了状态
-3. hooks只能在函数组件中使用
-
-### 2. Hooks解决了什么问题
-
-Hooks的出现解决了俩个问题 1. 组件的状态逻辑复用 2.class组件自身的问题
-
-1. 组件的逻辑复用
-
- 在hooks出现之前，react先后尝试了 mixins混入，HOC高阶组件，render-props等模式
-
- 但是都有各自的问题，比如mixin的数据来源不清晰，高阶组件的嵌套问题等等
-
-2. class组件自身的问题
-
- class组件就像一个厚重的‘战舰’ 一样，大而全，提供了很多东西，有不可忽视的学习成本，比如各种生命周期，this指向问题等等，而我们更多时候需要的是一个轻快灵活的'快艇'
-
-## useState
-
-### 1. 基础使用
-
-`本节任务:` 能够学会useState的基础用法
-
-**作用**
-
- useState为函数组件提供状态（state）
-
-**使用步骤**
-
-1. 导入 `useState` 函数
-2. 调用 `useState` 函数，并传入状态的初始值
-3. 从`useState`函数的返回值中，拿到状态和修改状态的方法
-4. 在JSX中展示状态
-5. 调用修改状态的方法更新状态
-
-**代码实现**
-
-```jsx
-import { useState } from 'react'
-
-function App() {
- // 参数：状态初始值比如,传入 0 表示该状态的初始值为 0
- // 返回值：数组,包含两个值：1 状态值（state） 2 修改该状态的函数（setState）
- const [count, setCount] = useState(0)
- return (
-
- )
-}
-export default App
-```
-
-### 2. 状态的读取和修改
-
-`本节任务:` 能够理解useState下状态的读取和修改
-
-**读取状态**
-
- 该方式提供的状态，是函数内部的局部变量，可以在函数内的任意位置使用
-
-**修改状态**
-
-1. setCount是一个函数，参数表示`最新的状态值`
-2. 调用该函数后，将使用新值替换旧值
-3. 修改状态后，由于状态发生变化，会引起视图变化
-
-**注意事项**
-
- 修改状态的时候，一定要使用新的状态替换旧的状态，不能直接修改旧的状态，尤其是引用类型
-
-### 3. 组件的更新过程
-
-`本节任务:` 能够理解使用hook之后组件的更新情况
-
-函数组件使用 **useState** hook 后的执行过程，以及状态值的变化
-
-- 组件第一次渲染
- 1. 从头开始执行该组件中的代码逻辑
- 2. 调用 `useState(0)` 将传入的参数作为状态初始值，即：0
- 3. 渲染组件，此时，获取到的状态 count 值为： 0
-
-- 组件第二次渲染
- 1. 点击按钮，调用 `setCount(count + 1)` 修改状态，因为状态发生改变，所以，该组件会重新渲染
- 2. 组件重新渲染时，会再次执行该组件中的代码逻辑
- 3. 再次调用 `useState(0)`，此时 **React 内部会拿到最新的状态值而非初始值**，比如，该案例中最新的状态值为 1
- 4. 再次渲染组件，此时，获取到的状态 count 值为：1
-
-注意：**useState 的初始值(参数)只会在组件第一次渲染时生效**。也就是说，以后的每次渲染，useState 获取到都是最新的状态值，React 组件会记住每次最新的状态值
-
-```jsx
-import { useState } from 'react'
-
-function App() {
- const [count, setCount] = useState(0)
- // 在这里可以进行打印测试
- console.log(count)
- return (
-
- )
-}
-export default App
-```
-
-
-
-### 4. 使用规则
-
-`本节任务:` 能够记住useState的使用规则
-
-1. `useState` 函数可以执行多次，每次执行互相独立，每调用一次为函数组件提供一个状态
-
- ```js
- function List(){
- // 以字符串为初始值
- const [name, setName] = useState('cp')
- // 以数组为初始值
- const [list,setList] = useState([])
- }
- ```
-
-2. `useState` 注意事项
-
- 1. 只能出现在函数组件中
-
- 2. 不能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook）
-
- ```js
- let num = 1
- function List(){
- num++
- if(num / 2 === 0){
- const [name, setName] = useState('cp')
- }
- const [list,setList] = useState([])
- }
- // 俩个hook的顺序不是固定的，这是不可以的！！！
- ```
-
- 3. 可以通过开发者工具查看hooks状态
-
-## useEffect
-
-### 1. 理解函数副作用
-
-`本节任务:` 能够理解副作用的概念
-
-**什么是副作用**
-
- 副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，**主作用就是根据数据（state/props）渲染 UI**，除此之外都是副作用（比如，手动修改 DOM）
-
-**常见的副作用**
-
-1. 数据请求 ajax发送
-2. 手动修改dom
-3. localstorage操作
-
-useEffect函数的作用就是为react函数组件提供副作用处理的！
-
-### 2. 基础使用
-
-`本节任务:` 能够学会useEffect的基础用法并且掌握默认的执行执行时机
-
-**作用**
-
- 为react函数组件提供副作用处理
-
-**使用步骤**
-
-1. 导入 `useEffect` 函数
-2. 调用 `useEffect` 函数，并传入回调函数
-3. 在回调函数中编写副作用处理（dom操作）
-4. 修改数据状态
-5. 检测副作用是否生效
-
-**代码实现**
-
-```jsx
-import { useEffect, useState } from 'react'
-
-function App() {
- const [count, setCount] = useState(0)
-
- useEffect(()=>{
- // dom操作
- document.title = `当前已点击了${count}次`
- })
- return (
-
- )
-}
-
-export default App
-
-```
-
-
-
-### 3. 依赖项控制执行时机
-
-`本节任务:` 能够学会使用依赖项控制副作用的执行时机
-
-**1. 不添加依赖项**
-
-> 组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行
->
-> 1. 组件初始渲染
-> 2. 组件更新 （不管是哪个状态引起的更新）
-
-```jsx
-useEffect(()=>{
- console.log('副作用执行了')
-})
-```
-
-
-
-**2. 添加空数组**
-
-> 组件只在首次渲染时执行一次
-
-```jsx
-useEffect(()=>{
- console.log('副作用执行了')
-},[])
-```
-
-
-
-**3. 添加特定依赖项**
-
-> 副作用函数在首次渲染时执行，在依赖项发生变化时重新执行
-
-```jsx
-function App() {
- const [count, setCount] = useState(0)
- const [name, setName] = useState('zs')
-
- useEffect(() => {
- console.log('副作用执行了')
- }, [count])
-
- return (
- <>
-
-
-
- )
-}
-```
-
-**注意事项**
-
-useEffect 回调函数中用到的数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有bug出现
-
-## 阶段小练习 - 自定义hook
-
-**需求描述**：自定义一个hook函数，实现获取滚动距离Y
-
-> `const [y] = useWindowScroll()`
-
-```js
-import { useState } from "react"
-
-export function useWindowScroll () {
- const [y, setY] = useState(0)
- window.addEventListener('scroll', () => {
- const h = document.documentElement.scrollTop
- setY(h)
- })
- return [y]
-}
-```
-
-**需求描述：** 自定义hook函数，可以自动同步到本地LocalStorage
-
-> `const [message, setMessage] = useLocalStorage(key，defaultValue)`
->
-> 1. message可以通过自定义传入默认初始值
-> 2. 每次修改message数据的时候 都会自动往本地同步一份
-
-```js
-import { useEffect, useState } from 'react'
-
-export function useLocalStorage (key, defaultValue) {
- const [message, setMessage] = useState(defaultValue)
- // 每次只要message变化 就会自动同步到本地ls
- useEffect(() => {
- window.localStorage.setItem(key, message)
- }, [message, key])
- return [message, setMessage]
-}
-```
-
-
-
-# Hooks进阶
-
-## useState - 回调函数的参数
-
-`本节任务:` 能够理解useState回调函数作为参数的使用场景
-
-**使用场景**
-
-参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过计算才能获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用
-
-**语法**
-
-```jsx
-const [name, setName] = useState(()=>{ // 编写计算逻辑 return '计算之后的初始值'})
-```
-
-**语法规则**
-
-1. 回调函数return出去的值将作为 `name` 的初始值
-2. 回调函数中的逻辑只会在组件初始化的时候执行一次
-
-**语法选择**
-
-1. 如果就是初始化一个普通的数据 直接使用 `useState(普通数据)` 即可
-2. 如果要初始化的数据无法直接得到需要通过计算才能获取到，使用`useState(()=>{})`
-
-**来个需求**
-
-
-
-```jsx
-import { useState } from 'react'
-
-function Counter(props) {
- const [count, setCount] = useState(() => {
- return props.count
- })
- return (
-
-
-
- )
-}
-
-function App() {
- return (
- <>
-
-
-
- )
-}
-
-export default App
-```
-
-
-
-## useEffect - 清理副作用
-
-`本节任务:` 能够掌握清理useEffect的方法
-
-**使用场景**
-
-在组件被销毁时，如果有些副作用操作需要被清理，就可以使用此语法，比如常见的定时器
-
-**语法及规则**
-
-```js
-useEffect(() => {
- console.log('副作用函数执行了')
- // 副作用函数的执行时机为: 在下一次副作用函数执行之前执行
- return () => {
- console.log('清理副作用的函数执行了')
- // 在这里写清理副作用的代码
- }
-})
-```
-
-**定时器小案例**
-
-> 添加副作用函数前：组件虽然已经不显示了，但是定时器依旧在运行
-
-```jsx
-import { useEffect, useState } from 'react'
-function Foo() {
- useEffect(() => {
- setInterval(() => {
- console.log('副作用函数执行了')
- }, 1000)
- })
- return Foo
-}
-
-
-function App() {
- const [flag, setFlag] = useState(true)
- return (
- <>
-
- {flag ? : null}
-
- )
-}
-
-export default App
-```
-
-> 添加清理副作用函数后：一旦组件被销毁，定时器也被清理
-
-```jsx
-import { useEffect, useState } from 'react'
-
-function Foo() {
- useEffect(() => {
- const timerId = setInterval(() => {
- console.log('副作用函数执行了')
- }, 1000)
- // 添加清理副租用函数
- return () => {
- clearInterval(timerId)
- }
- })
- return Foo
-}
-function App() {
- const [flag, setFlag] = useState(true)
- return (
- <>
-
- {flag ? : null}
-
- )
-}
-
-export default App
-```
-
-## useEffect - 发送网络请求
-
-`本节任务:` 能够掌握使用useEffect hook发送网络请求
-
-**使用场景**
-
-如何在useEffect中发送网络请求，并且封装同步 async await操作
-
-**语法要求**
-
-不可以直接在useEffect的回调函数外层直接包裹 await ，因为**异步会导致清理函数无法立即返回**
-
-```js
-useEffect(async ()=>{
- const res = await axios.get('http://geek.itheima.net/v1_0/channels')
- console.log(res)
-},[])
-```
-
-**正确写法**
-
-在内部单独定义一个函数，然后把这个函数包装成同步
-
-```jsx
-useEffect(()=>{
- async function fetchData(){
- const res = await axios.get('http://geek.itheima.net/v1_0/channels') console.log(res)
- }
-},[])
-```
-
-## useRef
-
-`本节任务:` 能够掌握使用useRef获取真实dom或组件实例的方法
-
-**使用场景**
-
-在函数组件中获取真实的dom元素对象或者是组件对象
-
-**使用步骤**
-
-1. 导入 `useRef` 函数
-2. 执行 `useRef` 函数并传入null，返回值为一个对象 内部有一个current属性存放拿到的dom对象（组件实例）
-3. 通过ref 绑定 要获取的元素或者组件
-
-**获取dom**
-
-```jsx
-import { useEffect, useRef } from 'react'
-function App() {
- const h1Ref = useRef(null)
- useEffect(() => {
- console.log(h1Ref)
- },[])
- return (
-
-
this is h1
-
- )
-}
-export default App
-```
-
-**获取组件实例**
-
-> **函数组件由于没有实例，不能使用ref获取，如果想获取组件实例，必须是类组件**
-
-`Foo.js`
-
-```jsx
-class Foo extends React.Component {
- sayHi = () => {
- console.log('say hi')
- }
- render(){
- return Foo
- }
-}
-
-export default Foo
-```
-
-`App.js`
-
-```jsx
-import { useEffect, useRef } from 'react'
-import Foo from './Foo'
-function App() {
- const h1Foo = useRef(null)
- useEffect(() => {
- console.log(h1Foo)
- }, [])
- return (
-
- )
-}
-export default App
-```
-
-## useContext
-
-`本节任务:` 能够掌握hooks下的context使用方式
-
-
-
-**实现步骤**
-
-1. 使用`createContext` 创建Context对象
-2. 在顶层组件通过`Provider` 提供数据
-3. 在底层组件通过`useContext`函数获取数据
-
-**代码实现**
-
-```jsx
-import { createContext, useContext } from 'react'
-// 创建Context对象
-const Context = createContext()
-
-function Foo() {
- return Foo
-}
-
-function Bar() {
- // 底层组件通过useContext函数获取数据
- const name = useContext(Context)
- return Bar {name}
-}
-
-function App() {
- return (
- // 顶层组件通过Provider 提供数据
-
-
-
- )
-}
-
-export default App
-```
-
diff --git "a/src/React/eslint-plugin-react \351\205\215\347\275\256.md" "b/src/React/eslint-plugin-react \351\205\215\347\275\256.md"
deleted file mode 100644
index 076df043..00000000
--- "a/src/React/eslint-plugin-react \351\205\215\347\275\256.md"
+++ /dev/null
@@ -1,222 +0,0 @@
-## 安装
-
-```bash
-npm install eslint eslint-plugin-react --save-dev
-```
-
-也可以全局而不是本地安装 ESLint（使用`npm install -g eslint`）。但是，不建议这样做，无论哪种情况，你使用的任何插件或可共享配置都必须安装在本地。
-
-## 配置 `.eslintrc`
-
-1. `.eslintrc.js` 或者`.eslintrc.json`,添加预设默认值：
-
-```json
- "extends": [
- "eslint:recommended",
- "plugin:react/recommended" // 当前插件的
- ]
-```
-
-如果在使用[来自 React 17 的新 JSX 转换](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports)，请使用[`react/jsx-runtime`](https://github.com/jsx-eslint/eslint-plugin-react/blob/c8917b0885094b5e4cc2a6f613f7fb6f16fe932e/index.js#L163-L176)扩展 eslint 配置（添加`"plugin:react/jsx-runtime"`到`"extends"`）以禁用相关规则。
-
-```json
- "extends": [
- "eslint:recommended",
- "plugin:react/recommended" // 当前插件的
- "plugin:react/jsx-runtime" // 补充配置
- ]
-```
-
-2. 将“React”添加到插件部分
-
-```json
-{
- "plugins": [
- "react"
- ]
-}
-```
-
-3. 启用 JSX 支持。（eslint 2以上版本）
-
-```json
-{
- "parserOptions": {
- "ecmaFeatures": {
- "jsx": true
- }
- }
-}
-```
-
-4. 开启某些额外想要使用的规则
-
-```json
- "rules": {
- "react/jsx-uses-react": "error",
- "react/jsx-uses-vars": "error",
- }
-```
-
-### 可共享配置
-
-这个插件导出了一个`recommended`强制执行 React 良好实践的配置。
-
-要启用此配置，请使用配置文件`extends`中的属性`.eslintrc`：
-
-```
-{
- "extends": ["eslint:recommended", "plugin:react/recommended"]
-}
-```
-
-有关扩展配置文件的更多信息，请参阅[`eslint`文档。](https://eslint.org/docs/user-guide/configuring/configuration-files#extending-configuration-files)
-
-#### 全部
-
-此插件还导出`all`包含每个可用规则的配置。这与规则很相配`eslint:all`。
-
-```
-{
- "plugins": [
- "react"
- ],
- "extends": ["eslint:all", "plugin:react/all"]
-}
-```
-
-**注意**：这些配置将在[解析器选项](https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options)`eslint-plugin-react`中导入和启用 JSX 。
-
-## 新配置 `eslint.config.js`
-
-从[`v8.21.0`](https://github.com/eslint/eslint/releases/tag/v8.21.0)，eslint 宣布了一个新的配置系统。在新系统中，`.eslintrc*`不再使用。`eslint.config.js`将是默认的配置文件名。在 eslint 中`v8`，遗留系统 ( `.eslintrc*`) 仍将受支持，而在 eslint 中`v9`，仅支持新系统。
-
-然后[`v8.23.0`](https://github.com/eslint/eslint/releases/tag/v8.23.0)，eslint CLI 开始查找`eslint.config.js`。 **因此，如果你的 eslint 是`>=8.23.0`，那么你得 100% 准备好使用新的配置系统。**
-
-官方博客文章，
-
-- https://eslint.org/blog/2022/08/new-config-system-part-1/
-- https://eslint.org/blog/2022/08/new-config-system-part-2/
-- https://eslint.org/blog/2022/08/new-config-system-part-3/
-
-和[官方文档](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new)。
-
-### 插件
-
-默认导出的`eslint-plugin-react`是一个插件对象。
-
-```js
-const react = require('eslint-plugin-react');
-const globals = require('globals');
-
-module.exports = [
- …
- {
- files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
- plugins: {
- react,
- },
- languageOptions: {
- parserOptions: {
- ecmaFeatures: {
- jsx: true,
- },
- },
- globals: {
- ...globals.browser,
- },
- },
- rules: {
- // ... any rules you want
- 'react/jsx-uses-react': 'error',
- 'react/jsx-uses-vars': 'error',
- },
- // ... others are omitted for brevity
- },
- …
-];
-```
-
-### 配置共享设置
-
-参考[官方文档](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuring-shared-settings)。
-
-对象的架构`settings.react`将与上面遗留配置部分中已经描述的架构相同。
-
-### 可共享的配置
-
-还有 3 个可共享的配置。
-
-- `eslint-plugin-react/configs/all`
-- `eslint-plugin-react/configs/recommended`
-- `eslint-plugin-react/configs/jsx-runtime`
-
-如果你的`eslint.config.js` 是 ESM，请包含`.js`扩展名，但是下个主要版本可以忽略。
-
-在新的配置系统中，`plugin:`协议（例如`plugin:react/recommended`）不再有效。由于 eslint 不会自动导入预设配置（可共享配置），您需要自己明确地导入。
-
-```js
-const reactRecommended = require('eslint-plugin-react/configs/recommended');
-
-module.exports = [
- …
- reactRecommended, // This is not a plugin object, but a shareable config object
- …
-];
-```
-
-**注意**：我们的可共享配置不会预先配置`files`或[`languageOptions.globals`](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuration-objects). 对于大多数情况，你可能希望自己配置一些属性。
-
-```js
-const reactRecommended = require('eslint-plugin-react/configs/recommended');
-const globals = require('globals');
-
-module.exports = [
- …
- {
- files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
- ...reactRecommended,
- languageOptions: {
- ...reactRecommended.languageOptions,
- globals: {
- ...globals.serviceworker,
- ...globals.browser,
- },
- },
- },
- …
-];
-```
-
-上面的例子和下面的例子一样，因为新的配置系统是基于link的。
-
-```js
-const reactRecommended = require('eslint-plugin-react/configs/recommended');
-const globals = require('globals');
-
-module.exports = [
- …
- {
- files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
- ...reactRecommended,
- },
- {
- files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
- languageOptions: {
- globals: {
- ...globals.serviceworker,
- ...globals.browser,
- },
- },
- },
- …
-];
-```
-
-## 支持规则列表
-
-[jsx-eslint/eslint-plugin-react：ESLint 的特定于 React 的 linting 规则](https://github.com/jsx-eslint/eslint-plugin-react#list-of-supported-rules)
-
-## 参考文档
-
-- [jsx-eslint/eslint-plugin-react: React-specific linting rules for ESLint](https://github.com/jsx-eslint/eslint-plugin-react)
diff --git "a/src/React/umi\346\241\206\346\236\266/UmiJS \344\271\214\347\261\263\345\255\246\344\271\240\345\256\236\346\210\230.md" "b/src/React/umi\346\241\206\346\236\266/UmiJS \344\271\214\347\261\263\345\255\246\344\271\240\345\256\236\346\210\230.md"
deleted file mode 100644
index 80f24167..00000000
--- "a/src/React/umi\346\241\206\346\236\266/UmiJS \344\271\214\347\261\263\345\255\246\344\271\240\345\256\236\346\210\230.md"
+++ /dev/null
@@ -1,271 +0,0 @@
----
-date: 2022-07-18
-category:
-- React
----
-
-# UmiJS 乌米学习实战:rice:
-
-> 参照文档
->
-> [官方文档](https://umijs.org/)
->
-> [Umi 4 发布啦 🎈](https://juejin.cn/post/7111528216631705608)
->
-> [umi3教程](https://juejin.cn/post/7021358536504393741)
-
-目前umi已经更新到4啦~，文章就只挑重要的讲解记录~
-
-## 简介
-
-Umi，中文发音为「乌米」，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
-
-Umi 是蚂蚁集团的底层前端框架，已直接或间接地服务了 10000+ 应用，包括 Java、Node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用、Electron 应用、Serverless 应用等。他已经很好地服务了我们的内部用户，同时也服务了不少外部用户，包括淘系、飞猪、阿里云、字节、腾讯、口碑、美团等。在 2021 年字节的[调研报告](https://zhuanlan.zhihu.com/p/403206195)中，Umi 是其中 25.33% 开发者的选择。
-
-Umi 有很多非常有意思的特性，比如。
-
-1、**企业级**，在安全性、稳定性、最佳实践、约束能力方面会考虑更多
-2、**插件化**，啥都能改，Umi 本身也是由插件构成
-3、**MFSU**，比 Vite 还快的 Webpack 打包方案
-4、基于 React Router 6 的完备路由
-5、默认最快的请求
-6、SSR & SSG
-7、稳定白盒性能好的 ESLint 和 Jest
-8、React 18 的框架级接入
-9、Monorepo 最佳实践
-...
-
-引用一下云谦大佬的话：
-
->
-
-### 啥时候不用？
-
-总结一下：低版本浏览器、React或者Node14以下环境，需要高粒度的路由管理和Webpack处理的
-
-### 为什么不用？
-
-**create-react-app：**有没有可能，Vue CLI 这种渐进式设计就是很好的正面例子？create-react-app就是逊啦（狗头）、
-
-**next.js**：如果要做 SSR，next.js 是非常好的选择，但是作者也说了，Umi更好的扩展性（插件很好用），更接地气
-
-**remix**：还没了解....
-
-### [快速上手](https://umijs.org/docs/tutorials/getting-started)
-
-去官方文档看吧~
-
-### 请求的封装
-
-src文件夹下新建 `request`文件夹 新建`request.ts`
-
-```js
-request.ts
-/**
- * 网络请求工具 封装umi-request
- * 更详细的 api 文档: https://github.com/umijs/umi-request
- */
-
-import { extend } from 'umi-request';
-import type { RequestOptionsInit } from 'umi-request';
-import { notification } from 'antd';
-
-// codeMessage仅供参考 具体根据和后端协商,在详细定义.
-const codeMessage = {
- 200: '服务器成功返回请求的数据。',
- 400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
- 500: '服务器发生错误，请检查服务器。',
-};
-type mapCode = 200 | 400 | 500;
-
-/**
- * 错误异常处理程序
- */
-const errorHandler = (error: { response: Response }): Response => {
- const { response } = error;
- if (response && response.status) {
- let errorText = codeMessage[response.status as mapCode] || response.statusText;
- const { status, url } = response;
- response
- ?.clone()
- ?.json()
- ?.then((res) => {
- // 后端返回错误信息,就用后端传回的
- errorText = res.msg ? res.msg : errorText;
- notification.error({
- message: `请求错误 ${status}: ${url}`,
- description: errorText,
- });
- });
- } else if (!response) {
- notification.error({
- description: '您的网络发生异常，无法连接服务器',
- message: '网络异常',
- });
- }
- return response;
-};
-
-/**
- * 配置request请求时的默认参数
- */
-const request = extend({
- errorHandler, // 默认错误处理
- credentials: 'include', // 默认请求是否带上cookie
-});
-
-// 根据不同的开发环境,配置请求前缀
-interface ApiPrefix {
- dev: string;
- test: string;
- prd: string;
-}
-const apiPreFix: ApiPrefix = {
- dev: 'http://120.55.193.14:3030/',
- test: 'http://120.55.193.14:3030/',
- prd: 'http://120.55.193.14:3030/',
-};
-// request拦截器, 携带token,以及根据环境,配置不同的请求前缀
-request.interceptors.request.use((url: string, options: RequestOptionsInit) => {
- // 不携带token的请求数组
- let notCarryTokenArr: string[] = [];
- if (notCarryTokenArr.includes(url)) {
- return {
- url: `${apiPreFix[CurrentEnvironment]}${url}`,
- options,
- };
- }
- // 给每个请求带上token
- let token = localStorage.getItem('tokens') || '';
- let headers = {
- Authorization: `Bearer ${token}`,
- };
- return {
- url: `${apiPreFix[CurrentEnvironment]}${url}`,
- options: { ...options, interceptors: true, headers },
- };
-});
-
-/**
- * @url 请求的url
- * @parameter 上传的参数
- */
-
-// 封装的get,post.put,delete请求
-const get = async (url: string, parameter?: Record): Promise => {
- try {
- const res = await request(url, { method: 'get', params: parameter });
- return res;
- } catch (error) {
- console.error(error);
- }
-};
-const deletes = async (url: string, parameter?: Record): Promise => {
- try {
- const res = await request(url, { method: 'delete', params: parameter });
- return res;
- } catch (error) {
- console.error(error);
- }
-};
-const post = async (url: string, parameter?: Record): Promise => {
- try {
- const res = await request(url, { method: 'post', data: parameter });
- return res;
- } catch (error) {
- console.error(error);
- }
-};
-const put = async (url: string, parameter?: Record): Promise => {
- try {
- const res = await request(url, { method: 'put', data: parameter });
- return res;
- } catch (error) {
- console.error(error);
- }
-};
-
-export default {
- get,
- post,
- put,
- deletes,
-};
-复制代码
-```
-
-这里封装了umi-request,统一处理了接口错误,请求拦截器携带token等.最后在配合useRequest 非常的好用.
-
-## 设计思路
-
-1、技术收敛 :star:
-
-我们希望开发者依赖 Umi 之后就无需关心 babel、webpack、postcss、react、react-router 等依赖，而依赖 @umijs/max 之后无需再关心开发中台项目的依赖和技术栈。
-
-2、插件和插件集 :star:
-
-Umi 通过提供插件和插件集的机制来满足不同场景和业务的需求。插件是为了扩展一个功能，而插件集是为了扩展一类业务。比如要支持 vue，我们可以有 `@umijs/preset-vue`，包含 vue 相关的构建和运行时；比如要支持 h5 的应用类型，可以有 `@umijs/preset-h5`，把 h5 相关的功能集合到一起。
-
-3、最佳实践
-
-4、企业级
-
-5、import all from umi :star:
-
-很多人可能都第一次听到。import all from umi 意思是所有 import 都来自 `umi`。比如 dva 不是 `import { connect } from 'dva'`，而是 `import { connect } from 'umi'`，从 umi 中导出。导出的方法不仅来自 umi 自身，还来自 umi 插件。
-
-6、编译时框架
-
-7、依赖预打包
-
-8、默认快
-
-9、约束与开放
-
-## 常用API
-
-
-
-## [Umi Max 简介](https://umijs.org/docs/max/introduce)
-
-> 为了方便开发者更加方便的使用这些插件，在我们这些插件开源的基础上，直接将他们集成到一起，打造了 `@umijs/max`。 让开发者直接可以通过脚手架马上获得和蚂蚁集团开发 Umi 应用一样的开发体检。
-
-新建的项目默认安装以下插件, 可以按需开启：
-
-- [权限](https://umijs.org/docs/max/access)
-- [站点统计](https://umijs.org/docs/max/analytics)
-- [Antd](https://umijs.org/docs/max/antd)
-- [dva](https://umijs.org/docs/max/dva)
-- [initial-state](https://umijs.org/docs/api/runtime-config#getinitialstate)
-- [布局和菜单](https://umijs.org/docs/max/layout-menu)
-- [多语言](https://umijs.org/docs/max/locale)
-- [model](https://umijs.org/docs/max/data-flow)
-- [乾坤微前端](https://umijs.org/docs/max/micro-frontend)
-- [请求库](https://umijs.org/docs/max/request)
-- [tailwindCSS支持](https://umijs.org/docs/max/tailwindcss)
-
-## UmiJS 4更新内容
-
-**多构建引擎。** Umi 4 同时支持 Vite 和 Webpack 两种构建方式，并尽量确保他们之间功能的一致性，让开发者可以通过一行配置进行切换。可能有些同学会喜欢 dev 用 vite，build 用 webpack 这样的组合。同时我们也在探索包括 ESMi 在内的其他构建方案的探索。
-
-**默认快。** 默认快是多维度的，我们通过 MFSU V3 + Webpack 5 缓存解 Dev 时编译慢的问题；内网还有通过 Webpack 5 物理缓存和 CD 平台结合解 Build 时编译慢的问题；有使用 esbuild 做 js 和 css 的压缩器、配置和 MOCK 文件的读取、jest 的 transformer，让除构建之外的其他环节也飞快；此外还有运行时速度也有考虑。
-
-**MFSU V3。** Umi 3 的 MFSU 大家可能多少有接触过，虽然有用，但 DX 不够好。用的时候会遇到一些坑，以至于很多同学都掌握了一项特殊技能，遇到问题时 rm -rf src/.umi。大家可能会遇到 monorepo 不支持、热更新导致 Tab 卡死、请求多导致页面打开慢、一些语法不支持的问题。以上问题在 MFSU V3 中全解！基于此，我们非常有信心地在 Umi 4 中默认开启 MFSU 功能。当然，如果你不喜欢，会保留手动配置 mfsu: false 关闭的口子。同时，MFSU V3 还可脱离 Umi 独立使用。
-
-**Umi Max。** 这是内部 Bigfish 框架的对外版本，解我们自己的问题，同时也给社区另一个集中化框架的选择，定位是中后台框架，包含了中后台相关的大量最佳实践的插件。如果有定制需求，大家可以参考他来实现内网框架的定制，比如快手团队就有基于 Umi 4 的框架定制，还有 Alita 也是基于 Umi 定制的面向移动端的框架。
-
-**React Router 6。** 我们升级了路由方案到 React Router 6，喜忧参半。好消息是，React Router 6 是 Remix 的基础库，面向框架层做了很多优化，路由实现层更优雅，Umi 得以删除大量路由渲染的代码；坏消息是，带来不少 Break Change，比如之前父路由渲染子路由用 children，得换成 。
-
-**支持 Vue。** Umi 4 中提供了 Vue 支持，记得我在 Umi 2 时画过一张架构图，其中就有 Vue 的一环，Umi 3 时也有过尝试，但那会 Vue 3 还不太成熟，接入时遇到不少坑，这个坑今天总算是补上了。此功能由社区同学操刀，只需装载一个 preset 即可切换到 Vue。
-
-**默认最快的 CSR 请求。** 项目构建快解的是 DX 问题，但同时也应该关注 UX。Client Loader 的目的是让应用加载默认快，避免 React 项目经典的 Render-Then-Fetch 的加载瀑布流问题。效果见下图，示例项目的从 9s 降到 6s，这 6s 还是之前截的图，上了 Preload 功能之后其实已更快。
-
-**白盒文档的 Lint。** Umi 4 里内置了我们精挑细选的 lint 规则，只有质量类不开可能会导致项目问题的规则，不包含风格类的规则，不包含 TypeScript 中 type-aware 类的规则，这类规则需要跑整个项目，会导致性能问题；同时，我们通过 @rushstack/eslint-pach 的方式锁定了 config 里找 plugin 的规则，确保规则是长期稳定的。
-
-**SSR。** Umi 4 重写了 SSR 功能，目前此功能还在 beta 阶段，请勿将其用于生产环境。Umi 4 的 SSR 有以下特点，1）server 代码的构建基于 esbuild，所以极快，2）请求的处理类似 next.js 的 getServerSideProps 和 remix 的 loader，只在服务端跑，3）基于 react 18 的 suspense 和 renderToPipeableStream。实现原因，部署层目前仅实现了 vercel 的 adapter。这里有个简单的 Todos 示例：[test-vercel-chencheng.vercel.app/](https://link.juejin.cn?target=https%3A%2F%2Ftest-vercel-chencheng.vercel.app%2F)
-
-**Umi UI 卷土重来？** 日常排查问题时，很多 Umi 框架的内部状态是看不到的，比如插件启用情况、appData 元数据、修改过的最终配置、修改过的最终 webpack 配置、修改过的最终路由、MFSU 的 module graph 信息等。Umi 4 提供了 /__umi/ 路由，dev 阶段可用，效果见下图。定位是开发辅助，大家也可以理解为是「丐版 Umi UI」。
-
-## 额外的:octopus:
-
-**基于 React 的应用研发框架 icejs** [**飞冰**](https://ice.work/)
diff --git "a/src/React/useReducer\357\274\232\347\261\273Redux\347\232\204useState\346\233\277\344\273\243\346\226\271\346\241\210.md" "b/src/React/useReducer\357\274\232\347\261\273Redux\347\232\204useState\346\233\277\344\273\243\346\226\271\346\241\210.md"
deleted file mode 100644
index 16ab2d7e..00000000
--- "a/src/React/useReducer\357\274\232\347\261\273Redux\347\232\204useState\346\233\277\344\273\243\346\226\271\346\241\210.md"
+++ /dev/null
@@ -1,60 +0,0 @@
----
-date: 2022-08-16
-category:
-- React
----
-# useReducer：类Redux的useState替代方案
-
-```tsx
-const [state, dispatch] = useReducer(reducer, initialArg, init);
-```
-
-[`useState`](https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate) 的替代方案（更复杂的方案）。它接收一个形如 `(state, action) => newState` 的 reducer，并返回当前的 state 以及与其配套的 `dispatch` 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）
-
-在某些场景下，`useReducer` 会比 `useState` 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。并且，使用 `useReducer` 还能给那些会触发深更新的组件做性能优化，因为[你可以向子组件传递 `dispatch` 而不是回调函数](https://zh-hans.reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down) 。
-
-以下是用 reducer 重写 [`useState`](https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate) 一节的计数器示例：
-
-```tsx
-const initialState = {count: 0};
-
-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] = useReducer(reducer, initialState);
- return (
- <>
- Count: {state.count}
-
-
-
- );
-}
-```
-
-> 注意
->
-> React 会确保 `dispatch` 函数的标识是稳定的，并且不会在组件重新渲染时改变。这就是为什么可以安全地从 `useEffect` 或 `useCallback` 的依赖列表中省略 `dispatch`。
-
-#### 指定初始 state
-
-有两种不同初始化 `useReducer` state 的方式，你可以根据使用场景选择其中的一种。将初始 state 作为第二个参数传入 `useReducer` 是最简单的方法：
-
-```
- const [state, dispatch] = useReducer(
- reducer,
- {count: initialCount} );
-```
-
-> 注意
->
-> React 不使用 `state = initialState` 这一由 Redux 推广开来的参数约定。有时候初始值依赖于 props，因此需要在调用 Hook 时指定。如果你特别喜欢上述的参数约定，可以通过调用 `useReducer(reducer, undefined, reducer)` 来模拟 Redux 的行为，但我们不鼓励你这么做。
diff --git "a/src/React/\345\256\271\345\231\250\345\206\205\351\200\211\346\213\251\345\215\225\344\270\200\345\210\227\350\241\250\345\271\266\350\277\233\350\241\214\351\253\230\344\272\256\345\210\207\346\215\242\347\232\204\345\256\236\350\267\265.md" "b/src/React/\345\256\271\345\231\250\345\206\205\351\200\211\346\213\251\345\215\225\344\270\200\345\210\227\350\241\250\345\271\266\350\277\233\350\241\214\351\253\230\344\272\256\345\210\207\346\215\242\347\232\204\345\256\236\350\267\265.md"
deleted file mode 100644
index 0e5339b8..00000000
--- "a/src/React/\345\256\271\345\231\250\345\206\205\351\200\211\346\213\251\345\215\225\344\270\200\345\210\227\350\241\250\345\271\266\350\277\233\350\241\214\351\253\230\344\272\256\345\210\207\346\215\242\347\232\204\345\256\236\350\267\265.md"
+++ /dev/null
@@ -1,159 +0,0 @@
-# 容器内选择单一列表并进行高亮切换的实践
-
-基于React和antd技术栈下，对有限容器内列表选择的行进行高亮提示，并且不影响容器内部进行的滚动查看引发的思考，涉及的内容包括overflow熟悉，CSS 类名替换而不是改写style、React Element的复用和性能优化。
-
-## 前置知识
-
-### overflow
-
-overflow 是overflow-x 和overflow-y的简写，用来设定当一块级元素（通常设置了height/max-height）的内容太大而超出范围的时候，元素内容如何加载。
-
-```css
-overflow：属性值；
-overflow: [overflow-x] [overflow-y];
-```
-
-只设定一个值的话，则同时对x和y轴生效，当其中一方被设置了auto的话，visible的表现也会是auto
-
-### 其他用途
-
-- text-overflow 与 overflow 配合用于文字省略
-
- > 超出文字隐藏：overflow：hidden;
- > 文字不换行：text-wrap:nowrap;
-
-- overflow: hidden 清除浮动
-
-- overflow: hidden 解决外边距折叠问题（触发BFC）
-
-## 分析实践
-
-CSS 类名替换而不是改写style
-
-并不适用于虚拟列表
-
-### demo 演示
-
-
-
-设置容器、列表样式以及选中行的样式：
-
-```css
-.main {
- background: grey;
- margin: auto;
- width: 50vw;
- height: 400px;
- overflow: auto;
-}
-
-.list {
- width: 100vw;
- height: 100vw;
-}
-
-.active {
- background: aqua;
-}
-```
-
-```jsx
-// App.jsx
-import React, {useState} from 'react';
-import './App.css';
-import {List} from "antd";
-
-const data = [
- 'Racing car sprays burning fuel into crowd.',
- 'Japanese princess to wed commoner.',
- 'Australian walks 100km after outback crash.',
- 'Man charged over missing wedding girl.',
- 'Los Angeles battles huge wildfires.',
-];
-
-function App() {
- const [activeIndex, setActiveIndex] = useState(-1)
- return (
-
-
- (
- {
- setActiveIndex(index)
- }}>{item}
- )}
- />
-
-
- i am
- KaSong
-
- )
-}
-```
-
-对应的`Fiber树`结构： 
-
-> 什么父级指针叫做`return`而不是`parent`或者`father`呢？因为作为一个工作单元，`return`指节点执行完`completeWork`（本章后面会介绍）后会返回的下一个节点。子`Fiber节点`及其兄弟节点完成工作后会返回其父级节点，所以用`return`指代父级节点。
-
-#### 静态数据结构
-
-作为一种静态的数据结构，保存了组件相关的信息：
-
-```js
-// Fiber对应组件的类型 Function/Class/Host...
-this.tag = tag;
-// key属性
-this.key = key;
-// 大部分情况同type，某些情况不同，比如FunctionComponent使用React.memo包裹
-this.elementType = null;
-// 对于 FunctionComponent，指函数本身，对于ClassComponent，指class，对于HostComponent，指DOM节点tagName
-this.type = null;
-// Fiber对应的真实DOM节点
-this.stateNode = null;
-```
-
-#### 动态的工作单元
-
-作为动态的工作单元，`Fiber`中如下参数保存了本次更新相关的信息，我们会在后续的更新流程中使用到具体属性时再详细介绍。
-
-```js
-// 保存本次更新造成的状态改变相关信息
-this.pendingProps = pendingProps;
-this.memoizedProps = null;
-this.updateQueue = null;
-this.memoizedState = null;
-this.dependencies = null;
-
-this.mode = mode;
-
-// 保存本次更新会造成的DOM操作
-this.effectTag = NoEffect;
-this.nextEffect = null;
-
-this.firstEffect = null;
-this.lastEffect = null;
-```
-
-如下两个字段保存调度优先级相关的信息，会在讲解`Scheduler`时介绍。
-
-```js
-// 调度优先级相关
-this.lanes = NoLanes;
-this.childLanes = NoLanes;
-```
-
-## Fiber 架构工作原理
-
-`Fiber节点`构成的`Fiber树`就对应`DOM树`，更新DOM则用到双缓存技术。
-
-### 双缓存 Fiber 树
-
-#### 什么是双缓存
-
-当我们用`canvas`绘制动画，每一帧绘制前都会调用`ctx.clearRect`清除上一帧的画面。
-
-如果当前帧画面计算量比较大，导致清除上一帧画面到绘制当前帧画面之间有较长间隙，就会出现白屏。
-
-为了解决这个问题，我们可以在内存中绘制当前帧动画，绘制完毕后直接用当前帧替换上一帧画面，由于省去了两帧替换间的计算时间，不会出现从白屏到出现画面的闪烁情况。
-
-这种**在内存中构建并直接替换**的技术叫做[双缓存](https://baike.baidu.com/item/双缓冲)
-
-#### 构建方法
-
-`React`使用“双缓存”来完成`Fiber树`的构建与替换——对应着`DOM树`的创建与更新
-
-`current Fiber树`中的`Fiber节点`被称为`current fiber`，`workInProgress Fiber树`中的`Fiber节点`被称为`workInProgress fiber`，他们通过`alternate`属性连接。
-
-```js
-currentFiber.alternate === workInProgressFiber;
-workInProgressFiber.alternate === currentFiber;
-```
-
-`React`应用的根节点通过使`current`指针在不同`Fiber树`的`rootFiber`间切换来完成`current Fiber`树指向的切换，完成`DOM`更新。当当前的`workInProgress Fiber树`变成`current Fiber树`，相应地也开始进行新的`workInProgress Fiber树`的生成。
-
-## 生命周期中的构建/替换流程
-
-### mount 时
-
-考虑如下例子：
-
-```js
-function App() {
- const [num, add] = useState(0);
- return (
- add(num + 1)}>{num}
- )
-}
-
-ReactDOM.render(, document.getElementById('root'));
-```
-
-1. 首次执行`ReactDOM.render`会创建`fiberRootNode`（源码中叫`fiberRoot`）和`rootFiber`。其中`fiberRootNode`是整个应用的根节点，`rootFiber`是``所在组件树的根节点。
-
-之所以要区分`fiberRootNode`与`rootFiber`，是因为在应用中我们可以多次调用`ReactDOM.render`渲染不同的组件树，他们会拥有不同的`rootFiber`。但是整个应用的根节点只有一个，那就是`fiberRootNode`。
-
-`fiberRootNode`的`current`会指向当前页面上已渲染内容对应`Fiber树`，即`current Fiber树`。
-
-
-
-```js
-fiberRootNode.current = rootFiber;
-```
-
-由于是首屏渲染，页面中还没有挂载任何`DOM`，所以`fiberRootNode.current`指向的`rootFiber`没有任何`子Fiber节点`（即`current Fiber树`为空）。
-
-1. 接下来进入`render阶段`，根据组件返回的`JSX`在内存中依次创建`Fiber节点`并连接在一起构建`Fiber树`，被称为`workInProgress Fiber树`。（下图中右侧为内存中构建的树，左侧为页面显示的树）
-
-在构建`workInProgress Fiber树`时会尝试复用`current Fiber树`中已有的`Fiber节点`内的属性，在`首屏渲染`时只有`rootFiber`存在对应的`current fiber`（即`rootFiber.alternate`）。
-
-
-
-1. 图中右侧已构建完的`workInProgress Fiber树`在`commit阶段`渲染到页面。
-
-此时`DOM`更新为右侧树对应的样子。`fiberRootNode`的`current`指针指向`workInProgress Fiber树`使其变为`current Fiber 树`。
-
-
-
-## update时
-
-1. 接下来我们点击`p节点`触发状态改变，这会开启一次新的`render阶段`并构建一棵新的`workInProgress Fiber 树`。
-
-
-
-和`mount`时一样，`workInProgress fiber`的创建可以复用`current Fiber树`对应的节点数据。
-
-> 这个决定是否复用的过程就是Diff算法，后面章节会详细讲解
-
-1. `workInProgress Fiber 树`在`render阶段`完成构建后进入`commit阶段`渲染到页面上。渲染完毕后，`workInProgress Fiber 树`变为`current Fiber 树`。
-
-
diff --git "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/React \346\236\266\346\236\204.md" "b/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/React \346\236\266\346\236\204.md"
deleted file mode 100644
index 476b224d..00000000
--- "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/React \346\236\266\346\236\204.md"
+++ /dev/null
@@ -1,150 +0,0 @@
----
-date: 2022-08-24
-category:
-- React
-- 源码探究
----
-
-# React 架构
-
-因为v15不能满足快速响应的理念（或者说原先的设计缺陷），`React`从v15升级到v16后重构了整个架构。
-
-## React 15 架构
-
-React15架构可以分为两层：
-
-- Reconciler（协调器）—— 负责找出变化的组件
-- Renderer（渲染器）—— 负责将变化的组件渲染到页面上
-
-### Reconciler（协调器）
-
-我们知道，在`React`中可以通过`this.setState`、`this.forceUpdate`、`ReactDOM.render`等API触发更新。
-
-每当有更新发生时，**Reconciler**会做如下工作（对比并协调渲染器更新）：
-
-1. 调用函数组件、或class组件的`render`方法，将返回的 JSX 转化为虚拟 DOM
-
-2. 将虚拟DOM和上次更新时的虚拟DOM对比
-3. 通过对比找出本次更新中变化的虚拟DOM
-4. 通知**Renderer**将变化的虚拟DOM渲染到页面上
-
-> **官方描述：**
->
-> “stack” reconciler 是 React 15 及更早的解决方案，React已经停止了对它的使用。
->
-
-### Renderer（渲染器）
-
-由于`React`支持跨平台，所以不同平台有不同的**Renderer**。我们前端最熟悉的是负责在浏览器环境渲染的**Renderer** —— [ReactDOM](https://www.npmjs.com/package/react-dom) （接受协调的工具人）
-
-> **渲染器用于管理一棵 React 树，使其根据底层平台进行不同的调用。**
-
-除此之外，还有：
-
-- [ReactNative (opens new window)](https://www.npmjs.com/package/react-native)渲染器，渲染App原生组件
-- [ReactTest (opens new window)](https://www.npmjs.com/package/react-test-renderer)渲染器，渲染出纯Js对象用于测试
-- [ReactArt (opens new window)](https://www.npmjs.com/package/react-art)渲染器，渲染到Canvas, SVG 或 VML (IE8)
-
-在每次更新发生时，**Renderer**接到**Reconciler**通知，将变化的组件渲染在当前宿主环境。
-
-### React15架构的缺点
-
-在Reconciler中，mount的组件会调用mountComponent (opens new window)，update的组件会调用updateComponent (opens new window)。这两个方法都会递归更新子组件。
-
-#### 递归更新的缺点
-
-由于递归执行，所以更新一旦开始，中途就无法中断。当层级很深时，递归更新时间超过了16ms，用户交互就会卡顿。
-
-
-
-而v15使用同步更新，**Reconciler**和**Renderer**是交替工作的，当第一个`li`在页面上已经变化后，第二个`li`再进入**Reconciler**。由于整个过程都是同步的，所以在用户看来所有DOM是同时更新的，但是这样也就导致了对多个节点同步更新的卡顿问题，因为他需要“全部”更新完成后交付给用户，只有当时间比较短的时候才会使用户感觉是同步更新的。
-
-让我们模拟一下，如果中途中断更新会怎么样？
-
-> 实际中v15并不能直接中断，而这也是导致卡顿的矛盾点
-
-
-
-当第一个`li`完成更新时中断更新，即步骤3完成后中断更新，此时后面的步骤都还未执行。
-
-用户本来期望`123`变为`246`。实际却看见更新不完全的DOM！（即`223`）
-
-基于这个原因，`React`决定重写整个架构。
-
-## React 16 架构
-
-React16架构可以分为三层：
-
-- Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入**Reconciler**
-- Reconciler（协调器）—— 负责找出变化的组件
-- Renderer（渲染器）—— 负责将变化的组件渲染到页面上
-
-### Scheduler（调度器）:star:
-
-既然我们以浏览器是否有剩余时间作为任务中断的标准，那么我们需要一种机制，当浏览器有剩余时间时通知我们。
-
-其实部分浏览器已经实现了这个API，这就是[requestIdleCallback](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback)，但由于以下缺陷，React放弃使用：
-
-- 服务器兼容性
-- 触发频率不稳定，受很多因素影响。比如当我们的浏览器切换tab后，之前tab注册的`requestIdleCallback`触发的频率会变得很低
-
-> 又再次证明了，前端工程师的技术升级靠的是客户的浏览器的升级
-
-基于以上原因，`React`实现了功能更完备的`requestIdleCallback ` polyfill（腻子脚本），这就是**Scheduler**。除了在空闲时触发回调的功能外，**Scheduler**还提供了多种调度优先级供任务设置。[Scheduler](https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/scheduler/README.md)是独立于`React`的库。
-
-### Reconciler（协调器）变动
-
-更新工作从递归变成了可以中断的循环过程。每次循环都会调用`shouldYield`判断当前是否有剩余时间。
-
-```js
-/** @noinline */
-function workLoopConcurrent() {
- // Perform work until Scheduler asks us to yield
- while (workInProgress !== null && !shouldYield()) {
- workInProgress = performUnitOfWork(workInProgress);
- }
-}
-```
-
-在React16中，**Reconciler**与**Renderer**不再是交替工作。当**Scheduler**将任务交给**Reconciler**后，**Reconciler**会为变化的虚拟DOM打上代表增/删/更新的标记，类似这样：
-
-```js
-export const Placement = /* */ 0b0000000000010;
-export const Update = /* */ 0b0000000000100;
-export const PlacementAndUpdate = /* */ 0b0000000000110;
-export const Deletion = /* */ 0b0000000001000;
-```
-
-整个**Scheduler**与**Reconciler**的工作都在内存中进行。只有当所有组件都完成**Reconciler**的工作，才会统一交给**Renderer**。
-
-> **官方描述：**
->
-> “fiber” reconciler 是一个新尝试，致力于解决 stack reconciler 中固有的问题，同时解决一些历史遗留问题。Fiber 从 React 16 开始变成了默认的 reconciler。
->
-> 它的主要目标是：
->
-> - 能够把可中断的任务切片处理。
-> - 能够调整优先级，重置并复用任务。
-> - 能够在父元素与子元素之间交错处理，以支持 React 中的布局。
-> - 能够在 `render()` 中返回多个元素。
-> - 更好地支持错误边界。
->
-> 你可以在[这里](https://github.com/acdlite/react-fiber-architecture)和[这里](https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e)，深入了解 React Fiber 架构。虽然这已经在 React 16 中启用了，但是 async 特性还没有默认开启。
-
-### Renderer（渲染器）变动
-
-在React16架构中整个更新流程为：
-
-
-
-其中红框中的步骤随时可能由于以下原因被中断：
-
-- 有其他更高优任务需要先更新
-- 当前帧没有剩余时间
-
-由于红框中的工作都在内存中进行，不会更新页面上的DOM，所以即使反复中断，用户也不会看见更新不完全的DOM（即上一节演示的情况）。所以，实际上真实DOM更新还是同步进行的，但对虚拟DOM的检查和更新是异步可中断的，当没有其他变化的时候，Reconciler将完整的可交付虚拟DOM交给渲染器统一渲染。
-
-> 实际上，由于**Scheduler**和**Reconciler**都是平台无关的，所以`React`为他们单独发了一个包[react-Reconciler](https://www.npmjs.com/package/react-reconciler)
->
-> 还有就是，从红色框到渲染器的部分还依赖于双缓存的实现，以保证用户无法明显感知这一更新过程。
-
diff --git "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/React \346\272\220\347\240\201\346\226\207\344\273\266\347\273\223\346\236\204.md" "b/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/React \346\272\220\347\240\201\346\226\207\344\273\266\347\273\223\346\236\204.md"
deleted file mode 100644
index 842a0f14..00000000
--- "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/React \346\272\220\347\240\201\346\226\207\344\273\266\347\273\223\346\236\204.md"
+++ /dev/null
@@ -1,85 +0,0 @@
-# React 源码文件结构
-
-## 顶层目录
-
-除去配置文件和隐藏文件夹，根目录的文件夹包括三个：
-
-```text
-根目录
-├── fixtures # 包含一些给贡献者准备的小型 React 测试项目
-├── packages # 包含元数据（比如 package.json）和 React 仓库中所有 package 的源码（子目录 src）
-├── scripts # 各种工具链的脚本，比如git、jest、eslint等
-```
-
-^5cfbe9
-
-这里我们关注**packages**目录
-
-## packages目录
-
-### [react (opens new window)](https://github.com/facebook/react/tree/master/packages/react)文件夹
-
-React的核心，包含所有全局 React API，如：
-
-- React.createElement
-- React.Component
-- React.Children
-
-这些 API 是全平台通用的，它不包含`ReactDOM`、`ReactNative`等平台特定的代码。在 NPM 上作为[单独的一个包 (opens new window)](https://www.npmjs.com/package/react)发布。
-
-### [#](https://react.iamkasong.com/preparation/file.html#scheduler文件夹)[scheduler (opens new window)](https://github.com/facebook/react/tree/master/packages/scheduler)文件夹
-
-Scheduler（调度器）的实现。
-
-### [#](https://react.iamkasong.com/preparation/file.html#shared文件夹)[shared (opens new window)](https://github.com/facebook/react/tree/master/packages/shared)文件夹
-
-源码中其他模块公用的**方法**和**全局变量**，比如在[shared/ReactSymbols.js (opens new window)](https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/shared/ReactSymbols.js)中保存`React`不同组件类型的定义。
-
-```js
-// ...
-export let REACT_ELEMENT_TYPE = 0xeac7;
-export let REACT_PORTAL_TYPE = 0xeaca;
-export let REACT_FRAGMENT_TYPE = 0xeacb;
-// ...
-```
-
-### [#](https://react.iamkasong.com/preparation/file.html#renderer相关的文件夹)Renderer相关的文件夹
-
-如下几个文件夹为对应的**Renderer**
-
-```text
-- react-art
-- react-dom # 注意这同时是DOM和SSR（服务端渲染）的入口
-- react-native-renderer
-- react-noop-renderer # 用于debug fiber（后面会介绍fiber）
-- react-test-renderer
-```
-
-### [#](https://react.iamkasong.com/preparation/file.html#试验性包的文件夹)试验性包的文件夹
-
-`React`将自己流程中的一部分抽离出来，形成可以独立使用的包，由于他们是试验性质的，所以不被建议在生产环境使用。包括如下文件夹：
-
-```text
-- react-server # 创建自定义SSR流
-- react-client # 创建自定义的流
-- react-fetch # 用于数据请求
-- react-interactions # 用于测试交互相关的内部特性，比如React的事件模型
-- react-reconciler # Reconciler的实现，你可以用他构建自己的Renderer
-```
-
-### [#](https://react.iamkasong.com/preparation/file.html#辅助包的文件夹)辅助包的文件夹
-
-`React`将一些辅助功能形成单独的包。包括如下文件夹：
-
-```text
-- react-is # 用于测试组件是否是某类型
-- react-client # 创建自定义的流
-- react-fetch # 用于数据请求
-- react-refresh # “热重载”的React官方实现
-```
-
-### react-reconciler 文件夹
-
-我们需要重点关注**react-reconciler**，在接下来源码学习中 80%的代码量都来自这个包。
-
-虽然他是一个实验性的包，内部的很多功能在正式版本中还未开放。但是他一边对接**Scheduler**，一边对接不同平台的**Renderer**，构成了整个 React16 的架构体系。
diff --git "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/React \347\212\266\346\200\201\346\233\264\346\226\260.md" "b/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/React \347\212\266\346\200\201\346\233\264\346\226\260.md"
deleted file mode 100644
index 3eb03023..00000000
--- "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/React \347\212\266\346\200\201\346\233\264\346\226\260.md"
+++ /dev/null
@@ -1,48 +0,0 @@
-## React 状态更新
-
-## 流程概览
-
-
-
-## 类比分支管理的心智模型
-
-
-
-
-
-在`React`中，通过`ReactDOM.createBlockingRoot`和`ReactDOM.createRoot`创建的应用会采用`并发`的方式`更新状态`。
-
-`高优更新`（红色节点）中断正在进行中的`低优更新`（蓝色节点），先完成`render - commit流程`。
-
-待`高优更新`完成后，`低优更新`基于`高优更新`的结果`重新更新`。
-
-
-
-## Update 对象
-
-
-
-### Update与Fiber的联系
-
-`Fiber节点`组成`Fiber树`，页面中最多同时存在两棵`Fiber树`：
-
-- 代表当前页面状态的`current Fiber树`
-- 代表正在`render阶段`的`workInProgress Fiber树`
-
-类似`Fiber节点`组成`Fiber树`，`Fiber节点`上的多个`Update`会组成链表并被包含在`fiber.updateQueue`中。
-
-> 什么情况下一个Fiber节点会存在多个Update？
->
-> 方法内部多次调用this.setState
-
-`Fiber节点`最多同时存在两个`updateQueue`：
-
-- `current fiber`保存的`updateQueue`即`current updateQueue`
-- `workInProgress fiber`保存的`updateQueue`即`workInProgress updateQueue`
-
-在`commit阶段`完成页面渲染后，`workInProgress Fiber树`变为`current Fiber树`，`workInProgress Fiber树`内`Fiber节点`的`updateQueue`就变成`current updateQueue`。
-
-### updateQueue
-
-
-
diff --git "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/React \347\220\206\345\277\265.md" "b/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/React \347\220\206\345\277\265.md"
deleted file mode 100644
index 7a89770d..00000000
--- "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/React \347\220\206\345\277\265.md"
+++ /dev/null
@@ -1,53 +0,0 @@
----
-date: 2022-08-24
-category:
-- React
-- 源码探究
----
-
-> 笔记内容来自于：
->
-> [React官网](https://reactjs.org/docs/react-component.html#setstate)
->
-> [React技术揭秘](https://react.iamkasong.com/)
->
-> 添加了个人笔记注释和观点，希望能帮助大家理解。此外，如果想要完整阅读原文内容，请前往卡颂的网站 [React技术揭秘](https://react.iamkasong.com/)。
-
-# React 理念
-
-> 我们认为，React 是用 JavaScript 构建**快速响应**的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。
-
-React 通过解决Web应用的CPU的瓶颈、IO的瓶颈达到快速响应。
-
-### CPU瓶颈
-
-当项目变得庞大、组件数量繁多时（构建树压力大），就容易遇到CPU的瓶颈。
-
-主流浏览器刷新频率为60Hz，即每（1000ms / 60Hz）16.6ms浏览器刷新一次。我们知道，JS可以操作DOM，`GUI渲染线程`与`JS线程`是互斥的。所以**JS脚本执行**和**浏览器布局、绘制**不能同时执行。即在这短时间内要完成：
-
-```js
-JS脚本执行 ----- 样式布局 ----- 样式绘制
-```
-
-当JS执行时间过长，超出了16.6ms，这次刷新就没有时间执行**样式布局**和**样式绘制**，即常见的页面未响应，不更新等情况。
-
-**React 解决**
-
-在浏览器每一帧的时间中，预留一些时间给JS线程，`React`利用这部分时间更新组件（在[源码](https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/scheduler/src/forks/SchedulerHostConfig.default.js#L119)中，预留的初始时间是5ms）。当预留的时间不够用时，`React`将线程控制权交还给浏览器使其有时间渲染UI，`React`则等待下一帧时间到来继续被中断的工作。
-
-这种将长任务分拆到每一帧中，像蚂蚁搬家一样一次执行一小段任务的操作，被称为`时间切片`（time slice）
-
-此时我们的长任务被拆分到每一帧不同的`task`中，`JS脚本`执行时间大体在`5ms`左右，这样浏览器就有剩余时间执行**样式布局**和**样式绘制**，减少掉帧的可能性。
-
-所以，解决`CPU瓶颈`的关键是实现`时间切片`，而`时间切片`的关键是：将**同步的更新**变为**可中断的异步更新**。
-
-> `React`从v15升级到v16后重构了整个架构，这是16 + 架构的重要更新，此前的同步更新遇到长递归更新的情况会直接导致页面卡死，长时间占用CPU资源
-
-### IO 瓶颈
-
-对于前端应用主要需要解决的是网络延迟情况下减少用户对这种情况的感知。`React`给出的答案是[将人机交互研究的结果整合到真实的 UI 中](https://zh-hans.reactjs.org/docs/concurrent-mode-intro.html#putting-research-into-production)，实际上是对用户行为有意的“延迟”对UI的更新和反馈，并在背后并行地执行数据请求，并且使这个时间足够的短，使用户无感知，直到这个时间超过某个阈值之后再显示`loading`效果。
-
-为了支持这些特性，同样需要将同步的更新变为可中断的异步更新。
-
-
-
diff --git "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/commit \351\230\266\346\256\265\346\265\201\347\250\213.md" "b/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/commit \351\230\266\346\256\265\346\265\201\347\250\213.md"
deleted file mode 100644
index 28b26659..00000000
--- "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/commit \351\230\266\346\256\265\346\265\201\347\250\213.md"
+++ /dev/null
@@ -1,35 +0,0 @@
-# commit 阶段流程
-
-## 概览
-
-- 副作用
-- commit阶段工作
-
-这些`副作用`对应的`DOM操作`在`commit`阶段执行。
-
-
-
-除此之外，一些生命周期钩子（比如`componentDidXXX`）、`hook`（比如`useEffect`）需要在`commit`阶段执行。
-
-`commit`阶段的主要工作（即`Renderer`的工作流程）分为三部分：
-
-- before mutation阶段（执行`DOM`操作前）
-- mutation阶段（执行`DOM`操作）
-- layout阶段（执行`DOM`操作后）
-
-
-
-在`before mutation阶段`之前和`layout阶段`之后还有一些额外工作，涉及到比如`useEffect`的触发、`优先级相关`的重置、`ref`的绑定/解绑。
-
-
-
-## before mutation阶段
-
-
-
-## mutation阶段
-
-
-
-## layout阶段
-
diff --git "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/render \351\230\266\346\256\265\346\265\201\347\250\213.md" "b/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/render \351\230\266\346\256\265\346\265\201\347\250\213.md"
deleted file mode 100644
index 38ebed01..00000000
--- "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/render \351\230\266\346\256\265\346\265\201\347\250\213.md"
+++ /dev/null
@@ -1,117 +0,0 @@
-# render 阶段流程
-
-## 总览
-
-- 同异步更新调用不同的方法，`performSyncWorkOnRoot`或`performConcurrentWorkOnRoot`，他们唯一的区别是是否调用`shouldYield`
-- `shouldYield`终止循环、取决于浏览器帧[剩余时间]()
-- Fiber Reconciler是从Stack Reconciler重构而来，通过遍历的方式实现可中断的递归，所以performUnitOfWork的工作可以分为递(beginWork)、归(completeWork)
-
-## 递归遍历树
-
-### “递”阶段
-
-首先从`rootFiber`开始向下深度优先遍历。为遍历到的每个`Fiber节点`调用[beginWork方法](https://github.com/facebook/react/blob/970fa122d8188bafa600e9b5214833487fbf1092/packages/react-reconciler/src/ReactFiberBeginWork.new.js#L3058)。
-
-该方法会根据传入的`Fiber节点`创建`子Fiber节点`，并将这两个`Fiber节点`连接起来。
-
-当遍历到叶子节点（即没有子组件的组件）时就会进入“归”阶段。
-
-### “归”阶段
-
-在“归”阶段会调用[completeWork](https://github.com/facebook/react/blob/970fa122d8188bafa600e9b5214833487fbf1092/packages/react-reconciler/src/ReactFiberCompleteWork.new.js#L652)处理`Fiber节点`。
-
-当某个`Fiber节点`执行完`completeWork`，如果其存在`兄弟Fiber节点`（即`fiber.sibling !== null`），会进入其`兄弟Fiber`的“递”阶段。
-
-> 注意多子树结构、存储的是第一个子节点和第一个（右）兄弟节点
->
-> ```js
-> // 指向父级Fiber节点
-> this.return = null;
-> // 指向子Fiber节点
-> this.child = null;
-> // 指向右边第一个兄弟Fiber节点
-> this.sibling = null;
-> ```
-
-如果不存在`兄弟Fiber`，会进入`父级Fiber`的“归”阶段。
-
-“递”和“归”阶段会交错执行直到“归”到`rootFiber`。至此，`render阶段`的工作就结束了。
-
-### 例子
-
-```jsx
-function App() {
- return (
-
- i am
- KaSong
-
- )
-}
-
-ReactDOM.render(, document.getElementById("root"));
-```
-
-render 依次执行
-
-```js
-1. rootFiber beginWork
-2. App Fiber beginWork
-3. div Fiber beginWork
-4. "i am" Fiber beginWork
-5. "i am" Fiber completeWork
-6. span Fiber beginWork
-7. span Fiber completeWork
-8. div Fiber completeWork
-9. App Fiber completeWork
-10. rootFiber completeWork
-```
-
-> 之所以没有 “KaSong” Fiber 的 beginWork/completeWork，是因为作为一种性能优化手段，针对只有单一文本子节点的`Fiber`，`React`会特殊处理。
-
-## beginWork()
-
-`beginWork`的工作是传入`当前Fiber节点`，创建`子Fiber节点`，我们从传参来看看具体是如何做的。
-
-```js
-function beginWork(
- current: Fiber | null,
- workInProgress: Fiber,
- renderLanes: Lanes,
-): Fiber | null {
- // ...省略函数体
-}
-```
-
-其中传参：
-
-- current：当前组件对应的`Fiber节点`在上一次更新时的`Fiber节点`，即`workInProgress.alternate`
-- workInProgress：当前组件对应的`Fiber节点`
-- renderLanes：优先级相关，在讲解`Scheduler`时再讲解
-
-除[`rootFiber`](https://react.iamkasong.com/process/doubleBuffer.html#mount时)以外， 组件`mount`时，由于是首次渲染，是不存在当前组件对应的`Fiber节点`在上一次更新时的`Fiber节点`，即`mount`时`current === null`。
-
-组件`update`时，由于之前已经`mount`过，所以`current !== null`。
-
-所以我们可以通过`current === null ?`来区分组件是处于`mount`还是`update`。
-
-### 根据current 区分执行阶段
-
-- `update`时：如果`current`存在，在满足一定条件时可以复用`current`节点，这样就能克隆`current.child`作为`workInProgress.child`，而不需要新建`workInProgress.child`。
-- `mount`时：除`fiberRootNode`以外，`current === null`。会根据`fiber.tag`不同，创建不同类型的`子Fiber节点`
-
-## completeWork()
-
-类似`beginWork`，`completeWork`也是针对不同`fiber.tag`调用不同的处理逻辑。
-
-
-
-
-
-## 流程结尾
-
-至此，`render阶段`全部工作完成。在`performSyncWorkOnRoot`函数中`fiberRootNode`被传递给`commitRoot`方法，开启`commit阶段`工作流程。
-
-```js
-commitRoot(root);
-```
diff --git "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/structure.md" "b/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/structure.md"
deleted file mode 100644
index e69de29b..00000000
diff --git "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/\346\267\261\345\205\245\347\220\206\350\247\243JSX.md" "b/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/\346\267\261\345\205\245\347\220\206\350\247\243JSX.md"
deleted file mode 100644
index 0a21db1e..00000000
--- "a/src/React/\346\272\220\347\240\201\345\255\246\344\271\240/\346\267\261\345\205\245\347\220\206\350\247\243JSX.md"
+++ /dev/null
@@ -1,115 +0,0 @@
-# 深入理解JSX
-
-`JSX`在编译时会被`Babel`编译为`React.createElement`方法。这也是为什么在每个使用`JSX`的JS文件中，你必须显式的声明。但在React 17 中，已经不需要显式导入React了。
-
-> React 17 发布在即，尽管我们想对 JSX 的转换进行改进，但我们不想打破现有的配置。于是我们选择[与 Babel 合作](https://babeljs.io/blog/2020/03/16/7.9.0#a-new-jsx-transform-11154httpsgithubcombabelbabelpull11154) ，为想要升级的开发者**提供了一个全新的，重构过的 JSX 转换的版本**。
->
-> - 使用全新的转换，你可以单独使用 JSX 而无需引入 React。
-> - 根据你的配置，JSX 的编译输出可能会略微改善 bundle 的大小。
-> - 它将减少你需要学习 React 概念的数量，以备未来之需。
->来源[介绍全新的 JSX 转换](https://zh-hans.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
-
-`JSX`并不是只能被编译为`React.createElement`方法，你可以通过[@babel/plugin-transform-react-jsx](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx)插件显式告诉`Babel`编译时需要将`JSX`编译为什么函数的调用（默认为`React.createElement`）。
-
-## React.createElement 做了什么
-
-```js
-export function createElement(type, config, children) {
- let propName;
-
- const props = {};
-
- let key = null;
- let ref = null;
- let self = null;
- let source = null;
-
- if (config != null) {
- // 将 config 处理后赋值给 props
- // ...省略
- }
-
- const childrenLength = arguments.length - 2;
- // 处理 children，会被赋值给props.children
- // ...省略
-
- // 处理 defaultProps
- // ...省略
-
- return ReactElement(
- type,
- key,
- ref,
- self,
- source,
- ReactCurrentOwner.current,
- props,
- );
-}
-
-const ReactElement = function(type, key, ref, self, source, owner, props) {
- const element = {
- // 标记这是个 React Element
- $$typeof: REACT_ELEMENT_TYPE,
-
- type: type,
- key: key,
- ref: ref,
- props: props,
- _owner: owner,
- };
-
- return element;
-};
-```
-
-我们可以看到，`React.createElement`最终会调用`ReactElement`方法返回一个包含组件数据的对象，该对象有个参数`$$typeof: REACT_ELEMENT_TYPE`标记了该对象是个`React Element`。
-
-`React`提供了验证合法`React Element`的全局API [React.isValidElement (opens new window)](https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react/src/ReactElement.js#L547)：
-
-```js
-export function isValidElement(object) {
- return (
- typeof object === 'object' &&
- object !== null &&
- object.$$typeof === REACT_ELEMENT_TYPE
- );
-}
-```
-
-可以看到，`$$typeof === REACT_ELEMENT_TYPE`的非`null`对象就是一个合法的`React Element`。换言之，在`React`中，所有`JSX`在运行时的返回结果（即`React.createElement()`的返回值）都是`React Element`。
-
-## React Component 分类
-
-`ClassComponent`对应的`Element`的`type`字段为`AppClass`自身。
-
-`FunctionComponent`对应的`Element`的`type`字段为`AppFunc`自身。
-
-同时，AppClass 和 AppFunc 都是函数类型
-
-```js
-AppClass instanceof Function === true;
-AppFunc instanceof Function === true;
-```
-
-所以无法通过引用类型区分`ClassComponent`和`FunctionComponent`。`React`通过`ClassComponent`实例原型上的`isReactComponent`变量判断是否是`ClassComponent`。
-
-```js
-ClassComponent.prototype.isReactComponent = {};
-```
-
-## 由JSX生成Fiber节点
-
-从上面的内容我们可以发现，`JSX`是一种描述当前组件内容的数据结构，他不包含组件**schedule**、**reconcile**、**render**所需的相关信息。
-
-比如如下信息就不包括在`JSX`中：
-
-- 组件在更新中的`优先级`
-- 组件的`state`
-- 组件被打上的用于**Renderer**的`标记`
-
-**这些内容都包含在`Fiber节点`中。**
-
-所以，在组件`mount`时，`Reconciler`根据`JSX`描述的组件内容生成组件对应的`Fiber节点`。
-
-在`update`时，`Reconciler` 将`JSX`与`Fiber节点`保存的数据对比，生成组件对应的`Fiber节点`，并根据对比结果为`Fiber节点`打上`标记`。
\ No newline at end of file
diff --git "a/src/React/\351\235\242\350\257\225\351\242\230/React \351\235\242\350\257\225.md" "b/src/React/\351\235\242\350\257\225\351\242\230/React \351\235\242\350\257\225.md"
deleted file mode 100644
index 23affe97..00000000
--- "a/src/React/\351\235\242\350\257\225\351\242\230/React \351\235\242\350\257\225.md"
+++ /dev/null
@@ -1,1148 +0,0 @@
----
-date: 2022-05-12
-category:
-- React
----
-# React 面试
-
-> [React 面试知识点](https://juejin.cn/post/6844903857135304718)
-
-### 什么是声明式编程
-
-声明式编程是一种编程范式，它关注的是你**要做什么**，而不是**如何做**。它表达逻辑而不显式地定义步骤。这意味着我们需要根据逻辑的计算来声明要显示的组件。它没有描述控制流步骤。声明式编程的例子有HTML、SQL等
-
-**HTML file**
-
-```html
-// HTML
-
-
Declarative Programming
-
-
{heading}
-
- )
-}
-```
-
-### 组件和不同类型
-
-React 中一切都是组件。 我们通常将应用程序的整个逻辑分解为小的单个部分。 我们将每个单独的部分称为组件。 通常，组件是一个javascript函数，它接受输入，处理它并返回在UI中呈现的React元素。
-
-在React中有不同类型的组件。让我们详细看看。
-
-#### 函数/无状态/展示组件
-
-函数或无状态组件是一个纯函数，它可接受接受参数，并返回react元素。这些都是没有任何副作用的纯函数。这些组件没有状态或生命周期方法，这里有一个例子。
-
-```jsx
-import React from 'react';
-import Jumbotron from 'react-bootstrap/Jumbotron';
-
-export const Header = () => {
- return(
-
- TODO App
-
- )
-}
-```
-
-#### 类/有状态组件
-
-类或有状态组件具有状态和生命周期方可能通过`setState()`方法更改组件的状态。类组件是通过扩展React创建的。它在构造函数中初始化，也可能有子组件,这里有一个例子。
-
-```jsx
-import React from 'react';
-import '../App.css';
-import { ToDoForm } from './todoform';
-import { ToDolist } from './todolist';
-
-export class Dashboard extends React.Component {
-
- constructor(props){
- super(props);
-
- this.state = {
-
- }
- }
-
- render() {
- return (
-
-
-
-
- );
- }
-}
-```
-
-#### 受控组件
-
-**受控组件是在 React 中处理输入表单的一种技术。**表单元素通常维护它们自己的状态，而react则在组件的状态属性中维护状态。我们可以将两者结合起来控制输入表单。这称为受控组件。因此，在受控组件表单中，数据由React组件处理。
-
-这里有一个例子。当用户在 todo 项中输入名称时，调用一个javascript函数`handleChange`捕捉每个输入的数据并将其放入状态，这样就在 `handleSubmit`中的使用数据。
-
-```jsx
-import React from 'react';
-import Form from 'react-bootstrap/Form';
-import Button from 'react-bootstrap/Button';
-import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
-
-export class ToDoForm extends React.Component {
- constructor(props) {
- super(props);
- this.state = {value: ''};
-
- this.handleChange = this.handleChange.bind(this);
- this.handleSubmit = this.handleSubmit.bind(this);
- }
-
- handleChange(event) {
- this.setState({value: event.target.value});
- }
-
- handleSubmit(event) {
- alert('A name was submitted: ' + this.state.value);
- event.preventDefault();
- }
-
- render() {
- return (
-
-
-
- );
- }
- }
-```
-
-#### 非受控组件
-
-**大多数情况下，建议使用受控组件。有一种称为非受控组件的方法可以通过使用`Ref`来处理表单数据。在非受控组件中，`Ref`用于直接从`DOM`访问表单值，而不是事件处理程序。**
-
-我们使用`Ref`构建了相同的表单，而不是使用React状态。 我们使用`React.createRef()` 定义`Ref`并传递该输入表单并直接从`handleSubmit`方法中的`DOM`访问表单值。
-
-```jsx
-import React from 'react';
-import Form from 'react-bootstrap/Form';
-import Button from 'react-bootstrap/Button';
-import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
-
-export class ToDoForm extends React.Component {
- constructor(props) {
- super(props);
- this.state = {value: ''};
- this.input = React.createRef();
-
- this.handleSubmit = this.handleSubmit.bind(this);
- }
-
- handleSubmit(event) {
- alert('A name was submitted: ' + this.input.current.value);
- event.preventDefault();
- }
-
- render() {
- return (
-
-
-
- );
- }
- }
-```
-
-#### 容器组件
-
-容器组件是处理获取数据、订阅 redux 存储等的组件。它们包含展示组件和其他容器组件，但是里面从来没有html。
-
-#### 高阶组件
-
-高阶组件是将组件作为参数并生成另一个组件的组件。 Redux `connect`是高阶组件的示例。 这是一种用于生成可重用组件的强大技术。
-
-### Props 和 State
-
-**Props** 是只读属性，传递给组件以呈现UI和状态，我们可以随时间更改组件的输出。
-
-下面是一个类组件的示例，它在构造函数中定义了`props`和`state`，每当使用`this.setState()` 修改状态时，将再次调用 `render( )` 函数来更改UI中组件的输出。
-
-```jsx
-import React from 'react';
-import '../App.css';
-
-export class Dashboard extends React.Component {
-
- constructor(props){
- super(props);
-
- this.state = {
- name: "some name"
- }
- }
-
- render() {
-
- // reading state
- const name = this.state.name;
-
- //reading props
- const address = this.props.address;
-
- return (
-
- {name}
- {address}
-
- );
- }
-}
-```
-
-### 什么是PropTypes
-
-随着时间的推移，应用程序会变得越来越大，因此类型检查非常重要。`PropTypes`为组件提供类型检查，并为其他开发人员提供很好的文档。如果react项目不使用 Typescript，建议为组件添加 `PropTypes`。
-
-如果组件没有收到任何 props，我们还可以为每个组件定义要显示的默认 props。这里有一个例子。`UserDisplay`有三个 prop:`name`、`address`和`age`，我们正在为它们定义默认的props 和 prop类型。
-
-```jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export const UserDisplay = ({name, address, age}) => {
-
- UserDisplay.defaultProps = {
- name: 'myname',
- age: 100,
- address: "0000 onestreet"
- };
-
- return (
- <>
-
-
-
-
- )
-}
-
-UserDisplay.propTypes = {
- name: PropTypes.string.isRequired,
- address: PropTypes.objectOf(PropTypes.string),
- age: PropTypes.number.isRequired
-}
-```
-
-### 如何更新状态以及如何不更新
-
-你不应该直接修改状态。可以在构造函数中定义状态值。直接使用状态不会触发重新渲染。React 使用`this.setState()`时合并状态。
-
-```
-// 错误方式
-this.state.name = "some name"
-// 正确方式
-this.setState({name:"some name"})
-```
-
-使用`this.setState()`的第二种形式总是更安全的，**因为更新的props和状态是异步的**。这里，我们根据这些 props 更新状态。
-
-```jsx
-// 错误方式
-this.setState({
- timesVisited: this.state.timesVisited + this.props.count
-})
-// 正确方式
-this.setState((state, props) => {
- timesVisited: state.timesVisited + props.count
-});
-```
-
-### 组件生命周期方法
-
-组件在进入和离开DOM时要经历一系列生命周期方法，下面是这些生命周期方法。
-
-#### componentWillMount() 组件将要加载
-
-在渲染前调用,在客户端也在服务端，它只发生一次。
-
-#### componentDidMount() 组件完成加载
-
-在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过`this.getDOMNode()`来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用`setTimeout`, `setInterval`或者发送AJAX请求等操作(防止异部操作阻塞UI)。
-
-#### componentWillReceiveProps() 将要接收prop
-
-在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
-
-#### shouldComponentUpdate() 组件应该被更新？
-
-返回一个布尔值。在组件接收到新的`props`或者`state`时被调用。在初始化时或者使用`forceUpdate`时不被调用。 可以在你确认不需要更新组件时使用。
-
-#### componentWillUpdate() 组件将更新
-
-在组件接收到新的`props`或者`state`但还没有`render`时被调用。在初始化时不会被调用。
-
-#### componentDidUpdate() 组件已更新
-
-在组件完成更新后立即调用。在初始化时不会被调用。
-
-#### componentWillUnMount() 组件将销毁（不挂载）
-
-组件从 DOM 中移除的时候立刻被调用。
-
-#### getDerivedStateFromError() 从错误中获取派生状态
-
-这个生命周期方法在**ErrorBoundary**类中使用。实际上，如果使用这个生命周期方法，任何类都会变成`ErrorBoundary`。这用于在组件树中出现错误时呈现回退UI，而不是在屏幕上显示一些奇怪的错误。
-
-#### componentDidCatch() 捕获错误
-
-这个生命周期方法在ErrorBoundary类中使用。实际上，如果使用这个生命周期方法，任何类都会变成ErrorBoundary。这用于在组件树中出现错误时记录错误。
-
-### 超越继承的组合
-
-在React中，**我们总是使用组合而不是继承。**我们已经在函数式编程部分讨论了什么是组合。这是一种结合简单的可重用函数来生成高阶组件的技术。下面是一个组合的例子，我们在 dashboard 组件中使用两个小组件`todoForm`和`todoList`。
-
-```jsx
-import React from 'react';
-import '../App.css';
-import { ToDoForm } from './todoform';
-import { ToDolist } from './todolist';
-
-export class Dashboard extends React.Component {
-
- render() {
- return (
-
-
-
-
- );
- }
-}
-```
-
-### 如何在React中应用样式
-
-将样式应用于React组件有三种方法。
-
-#### 外部样式表
-
-在此方法中，你可以将外部样式表导入到组件使用类中。 但是你应该使用`className`而不是`class`来为React元素应用样式, 这里有一个例子。
-
-```jsx
-import React from 'react';
-import './App.css';
-import { Header } from './header/header';
-import { Footer } from './footer/footer';
-import { Dashboard } from './dashboard/dashboard';
-import { UserDisplay } from './userdisplay';
-
-function App() {
- return (
-
-
-
-
-
-
- );
-}
-
-export default App;
-```
-
-#### 内联样式
-
-在这个方法中，我们可以直接将 `props` 传递给HTML元素，属性为`style`。这里有一个例子。这里需要注意的重要一点是，我们将javascript对象传递给style，这就是为什么我们使用 `backgroundColor` 而不是CSS方法`backbackground -color`。
-
-```jsx
-import React from 'react';
-
-export const Header = () => {
-
- const heading = 'TODO App'
-
- return(
-
-
{heading}
-
- )
-}
-```
-
-#### 定义样式对象并使用它
-
-因为我们将javascript对象传递给`style`属性，所以我们可以在组件中定义一个`style`对象并使用它。下面是一个示例，你也可以将此对象作为 `props` 传递到组件树中。
-
-```jsx
-import React from 'react';
-
-const footerStyle = {
- width: '100%',
- backgroundColor: 'green',
- padding: '50px',
- font: '30px',
- color: 'white',
- fontWeight: 'bold'
-}
-
-export const Footer = () => {
- return(
-
- All Rights Reserved 2019
-
- )
-}
-```
-
-### 什么是Redux及其工作原理
-
-Redux 是 React的一个状态管理库，它基于flux。 Redux简化了React中的单向数据流。 Redux将状态管理完全从React中抽象出来。
-
-#### 它是如何工作的
-
-在React中，组件连接到 redux ，如果要访问 redux，需要派出一个包含 `id`和负载(payload) 的 `action`。action 中的 `payload` 是可选的，action 将其转发给 Reducer。
-
-当`reducer`收到`action`时，通过 `swithc...case` 语法比较 `action` 中`type`。 匹配时，更新对应的内容返回新的 `state`。
-
-当`Redux`状态更改时，连接到`Redux`的组件将接收新的状态作为`props`。当组件接收到这些`props`时，它将进入更新阶段并重新渲染 UI。
-
-
-
-#### Redux 循环细节
-
-让我们详细看看整个redux 循环细节。
-
-
-
-
-
-**Action**: Action 只是一个简单的json对象，**type** 和有**payload**作为键。**type** 是必须要有的，**payload**是可选的。下面是一个 action 的例子。
-
-```js
-// action
-
-{
- type:"SEND_EMAIL",
- payload: data
-};
-```
-
-**Action Creators**：这些是创建`Actions`的函数，因此我们在派发`action`时不必在组件中手动编写每个 `action`。 以下是 action creator 的示例。
-
-```js
-// action creator
-
-export function sendEamil(data) {
- return { type:"SEND_EMAIL", payload: data};
-}
-```
-
-**Reducers**：Reducers 是纯函数，它将 `action`和当前 `state` 作为参数,计算必要的逻辑并返回一个新r的`state`。 这些 Reducers 没有任何副作用。 它不会改变 `state` 而是总是返回 `state` 。
-
-```js
-export default function emailReducer(state = [], action){
-
- switch(action.type) {
- case "SEND_EMAIL": return Object.assign({}, state, {
- email: action.payload
- });
- default: return state;
- }
-}
-```
-
-#### 组件如何与 `redux` 进行连接
-
-**mapStateToProps**：此函数将`state`映射到 `props` 上，因此只要`state`发生变化，新 state 会重新映射到 `props`。 这是订阅`store`的方式。
-
-**mapDispatchToProps**：此函数用于将 `action creators` 绑定到你的`props` 。以便我们可以在第`12`行中使用This . `props.actions.sendemail()`来派发一个动作。
-
-`connect`和`bindActionCreators`来自 redux。 前者用于连接 store ，如第22行，后者用于将 action creators 绑定到你的 `props` ，如第20行。
-
-```js
-// import connect
-import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux'
-
-// import action creators
-import * as userActions from '../../../actions/userActions';
-
-export class User extends React.Component {
-
- handleSubmit() {
- // dispatch an action
- this.props.actions.sendEmail(this.state.email);
- }
-
-}
-
-// you are mapping you state props
-const mapStateToProps = (state, ownProps) => ({user: state.user})
-// you are binding your action creators to your props
-const mapDispatchToProps = (dispatch) => ({actions: bindActionCreators(userActions, dispatch)})
-
-export default connect(mapStateToProps, mapDispatchToProps)(User);
-```
-
-## 什么是 React Router Dom 及其工作原理
-
-`react-router-dom`是应用程序中路由的库。 React库中没有路由功能，需要单独安装`react-router-dom`。
-
-react-router-dom 提供两个路由器`BrowserRouter`和`HashRoauter`。前者基于rul的pathname段，后者基于hash段。
-
-```awk
- 前者：http://127.0.0.1:3000/article/num1
-
- 后者：http://127.0.0.1:3000/#/article/num1（不一定是这样，但#是少不了的）
-```
-
-#### **react-router-dom 组件**
-
-- `BrowserRouter` 和 `HashRouter` 是路由器。
-- `Route` 用于路由匹配。
-- `Link` 组件用于在应用程序中创建链接。 它将在HTML中渲染为锚标记。
-- `NavLink`是突出显示当前活动链接的特殊链接。
-- `Switch` 不是必需的，但在组合路由时很有用。
-- `Redirect` 用于强制路由重定向
-
-下面是组件中的`Link`、`NavLink`和`Redirect` 的例子
-
-```jsx
-// normal link
-Home
-
-// link which highlights currentlu active route with the given class name
-
- React
-
-
-// you can redirect to this url
-
-```
-
-以下是 react router 组件的示例。 如果你查看下面的示例，我们将匹配路径并使用`Switch`和`Route`呈现相应的组件。
-
-```javascript
-import React from 'react'
-// import react router DOM elements
-import { Switch, Route, Redirect } from 'react-router-dom'
-import ComponentA from '../common/compa'
-import ComponentB from '../common/compb'
-import ComponentC from '../common/compc'
-import ComponentD from '../common/compd'
-import ComponentE from '../common/compe'
-
-
-const Layout = ({ match }) => {
- return(
-
-
-
-
-
-
-
-
-
- )}
-
-export default Layout
-```
-
-## 什么是错误边界
-
-在 React 中，我们通常有一个组件树。如果任何一个组件发生错误，它将破坏整个组件树。没有办法捕捉这些错误，我们可以用错误边界优雅地处理这些错误。
-
-错误边界有两个作用
-
-- 如果发生错误，显示回退UI
-- 记录错误
-
-下面是`ErrorBoundary`类的一个例子。如果类实现了 `getDerivedStateFromError`或`componentDidCatch` 这两个生命周期方法的任何一下，，那么这个类就会成为**ErrorBoundary**。前者返回`{hasError: true}`来呈现回退UI，后者用于记录错误。
-
-```jsx
-import React from 'react'
-
-export class ErrorBoundary extends React.Component {
- constructor(props) {
- super(props);
- this.state = { hasError: false };
- }
-
- static getDerivedStateFromError(error) {
- // Update state so the next render will show the fallback UI.
- return { hasError: true };
- }
-
- componentDidCatch(error, info) {
- // You can also log the error to an error reporting service
- console.log('Error::::', error);
- }
-
- render() {
- if (this.state.hasError) {
- // You can render any custom fallback UI
- return OOPS!. WE ARE LOOKING INTO IT.
;
- }
-
- return this.props.children;
- }
- }
-```
-
-以下是我们如何在其中一个组件中使用ErrorBoundary。使用ErrorBoundary类包裹 `ToDoForm`和`ToDoList`。 如果这些组件中发生任何错误，我们会记录错误并显示回退UI。
-
-```javascript
-import React from 'react';
-import '../App.css';
-import { ToDoForm } from './todoform';
-import { ToDolist } from './todolist';
-import { ErrorBoundary } from '../errorboundary';
-
-export class Dashboard extends React.Component {
-
- render() {
- return (
-
-
-
-
-
-
- );
- }
-}
-```
-
-## 什么是 Fragments 片段
-
-在React中，我们需要有一个父元素，同时从组件返回React元素。有时在DOM中添加额外的节点会很烦人。使用 **Fragments**，我们不需要在DOM中添加额外的节点。我们只需要用 `React.Fragment` 或才简写 `<>` 来包裹内容就行了。如下 所示：
-
-```jsx
- // Without Fragments
-return (
-
-
-
-
-
-)
-
-// With Fragments
- return (
-
-
-
-
-
- )
-
- // shorthand notation Fragments
- return (
- <>
-
-
-
-
- )
-```
-
-## 什么是传送门(Portals)
-
-默认情况下，所有子组件都在UI上呈现，具体取决于组件层次结构。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。
-
-这里有一个例子。默认情况下，父组件在DOM层次结构中有子组件。
-
-
-
-我们可以将 `children` 组件移出`parent` 组件并将其附加 **id** 为 `someid` 的 Dom 节点下。
-
-首先，获取 id 为 someid，我们在constrcutorand中创建一个元素div，将child附加到componentDidMount中的someRoot。 最后，我们在ReactDOM.createPortal（this.props.childen），domnode的帮助下将子节点传递给该特定DOM节点。
-
-首先，先获取 id 为`someid` DOM元素，接着在构造函数中创建一个元素div，在 `componentDidMount`方法中将 `someRoot` 放到 div 中 。 最后，通过
-`ReactDOM.createPortal(this.props.childen), domnode)`将 `children` 传递到对应的节点下。
-
-```javascript
-const someRoot = document.getElementById('someid');
-
-class Modal extends React.Component {
- constructor(props) {
- super(props);
- this.el = document.createElement('div');
- }
-
- componentDidMount() {
- someRoot.appendChild(this.el);
- }
-
- componentWillUnmount() {
- someRoot.removeChild(this.el);
- }
-
- render() {
- return ReactDOM.createPortal(
- this.props.children,
- this.el,
- );
- }
-}
-```
-
-
-
-## 什么是上下文 Context
-
-有时我们必须将`props` 传递给组件树，即使所有中间组件都不需要这些`props` 。上下文是一种传递`props` 的方法，而不用在每一层传递组件树。
-
-## 什么是 Hooks
-
-Hooks 是React版本16.8中的新功能。 请记住，我们不能在函数组件中使用`state` ，因为它们不是类组件。**Hooks 让我们在函数组件中可以使用`state` 和其他功能。**
-
-目前没有重大变化，我们不必放弃类组件。
-
-Hook 不会影响你对 React 概念的理解。 恰恰相反，Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。
-
-我们可以使用一些钩子，例如useState，useEffect，useContext，useReducer等。
-
-下面是 Hooks 的基本规则
-
-- Hooks 应该在外层使用，不应该在循环，条件或嵌套函数中使用
-- Hooks 应该只在函数组件中使用。
-
-让我们看一个例子来理解 hooks。 这是一个函数组件，它采用`props`并在UI上显示这些`props`。 在`useState`钩子的帮助下，我们将这个函数组件转换为有状态组件。 首先，我们在第5行定义状态，这相当于
-
-```delphi
-constructor(props) {
- super(props);
- this.state = {
- name:'myname', age:10, address:'0000 one street'
- }
-}
-```
-
-`useState`返回两个项，一个是`user`，另一个是`setUser`函数。 `user` 是一个可以在没有 `this`关键字的情况下直接使用的对象，`setUser`是一个可以用来设置用户点击第`21`行按钮的状态的函数，该函数等效于以下内容。
-
-```reasonml
-this.setState({name:'name changed'})
-```
-
-
-
-```dust
- 1 import React, { useState } from 'react';
- 2
- 3 export const UserDisplay = ({name, address, age}) => {
- 4
- 5 const [user, setUser] = useState({ name: 'myname', age: 10, address: '0000 onestreet' });
- 6
- 7 return (
- 8 <>
- 9
- 10
Name:
- 11
{user.name}
- 12
- 14
Address:
- 15
{user.address}
- 16
- 18
Age:
- 19
{user.age}
- 20
点我
-```
-
-React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。
-
-除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event.stopProppagation()方法。
-
-
-
-JSX 上写的事件并没有绑定在对应的真实 DOM 上，而是**通过事件代理的方式**，将所有的事件都统一绑定在了 `document` 上。这样的方式不仅减少了内存消耗，还能在组件挂载销毁时统一订阅和移除事件。
-
-另外冒泡到 `document` 上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticEvent）。因此我们如果不想要事件冒泡的话，调用 `event.stopPropagation` 是无效的，而应该调用 `event.preventDefault`。
-
-实现合成事件的目的如下：
-
-- 合成事件首先抹平了浏览器之间的兼容问题，另外这是一个跨浏览器原生事件包装器，赋予了跨浏览器开发的能力；
-- 对于原生浏览器事件来说，浏览器会给监听器创建一个事件对象。如果你有很多的事件监听，那么就需要分配很多的事件对象，造成高额的内存分配问题。但是对于合成事件来说，**有一个事件池专门来管理它们的创建和销毁**，当事件需要被使用时，就会从池子中复用对象，事件回调结束后，就会销毁事件对象上的属性，从而便于下次复用事件对象。
-
-### 2. React的事件和普通的HTML事件有什么不同？:star:
-
-区别：
-
-- 对于事件名称命名方式，原生事件为全小写，react 事件采用小驼峰；
-- 对于事件函数处理语法，原生事件为字符串，react 事件为函数；
-- react 事件不能采用 return false 的方式来阻止浏览器的默认行为，而必须要地明确地调用`preventDefault()`来阻止默认行为。
-
-合成事件是 react 模拟原生 DOM 事件所有能力的一个事件对象，其优点如下：
-
-- 兼容所有浏览器，更好的跨平台；
-- 将事件统一存放在一个数组，避免频繁的新增与删除（垃圾回收）。
-- 方便 react 统一管理和事务机制。
-
-事件的执行顺序为原生事件先执行，合成事件后执行，合成事件会冒泡绑定到 document 上，所以尽量避免原生事件与合成事件混用，如果原生事件阻止冒泡，可能会导致合成事件不执行，因为需要冒泡到document 上合成事件才会执行。
-
-### 3. React 组件中怎么做事件代理？它的原理是什么？
-
-React基于Virtual DOM实现了一个SyntheticEvent层（合成事件层），定义的事件处理器会接收到一个合成事件对象的实例，它符合W3C标准，且与原生的浏览器事件拥有同样的接口，支持冒泡机制，所有的事件都自动绑定在最外层上。
-
-在React底层，主要对合成事件做了两件事：
-
-- **事件委派：** React会把所有的事件绑定到结构的最外层，使用统一的事件监听器，这个事件监听器上维持了一个映射来保存所有组件内部事件监听和处理函数。
-- **自动绑定：** React组件中，每个方法的上下文都会指向该组件的实例，即自动绑定this为当前组件。
-
-### 4. React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代
-
-这三者是目前react解决代码复用的主要方式：
-
-- **高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧**。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。
-- **render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术，**更具体的说，render prop 是一个用于告知组件需要渲染什么内容的函数 prop。
-- 通常，render props 和高阶组件只渲染一个子节点。让 Hook 来服务这个使用场景更加简单。这两种模式仍有用武之地，（例如，一个虚拟滚动条组件或许会有一个 renderltem 属性，或是一个可见的容器组件或许会有它自己的 DOM 结构）。但在大部分场景下，Hook 足够了，并且能够帮助减少嵌套。
-
-**（1）HOC** 官方解释∶
-
-> 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
-
-简言之，HOC是一种组件的设计模式，HOC接受一个组件和额外的参数（如果需要），返回一个新的组件。HOC 是纯函数，没有副作用。
-
-```javascript
-// hoc的定义
-function withSubscription(WrappedComponent, selectData) {
- return class extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- data: selectData(DataSource, props)
- };
- }
- // 一些通用的逻辑处理
- render() {
- // ... 并使用新数据渲染被包装的组件!
- return ;
- }
- };
-
-// 使用
-const BlogPostWithSubscription = withSubscription(BlogPost,
- (DataSource, props) => DataSource.getBlogPost(props.id));
-```
-
-HOC的优缺点∶
-
-- 优点∶ 逻辑服用、不影响被包裹组件的内部逻辑。
-- 缺点∶ hoc传递给被包裹组件的props容易和被包裹后的组件重名，进而被覆盖
-
-**（2）Render props** 官方解释∶
-
-> "render prop"是指一种在 React 组件之间使用一个**值为函数的 prop 共享代码的简单技术**
-
-具有render prop 的组件接受一个返回React元素的函数，将render的渲染逻辑注入到组件内部。在这里，**"render"的命名可以是任何其他有效的标识符。**
-
-```jsx
-// DataProvider组件内部的渲染逻辑如下
-class DataProvider extends React.Components {
- state = {
- name: 'Tom'
- }
-
- render() {
- return (
-
-
共享数据组件自己内部的渲染逻辑
- { this.props.render(this.state) }
-
Hello {data.name}
-)}/>
-```
-
-由此可以看到，render props的优缺点也很明显∶
-
-- 优点：数据共享、代码复用，将组件内的state作为props传递给调用者，将渲染逻辑交给调用者。
-- 缺点：无法在 return 语句外访问数据、嵌套写法不够优雅
-
-**（3）Hooks** 官方解释∶
-
-> Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。通过自定义hook，可以复用代码逻辑。
-
-```javascript
-// 自定义一个获取订阅数据的hook
-function useSubscription() {
- const data = DataSource.getComments();
- return [data];
-}
-//
-function CommentList(props) {
- const {data} = props;
- const [subData] = useSubscription();
- ...
-}
-// 使用
-
-```
-
-以上可以看出，hook解决了hoc的prop覆盖的问题，同时使用的方式解决了render props的嵌套地狱的问题。hook的优点如下∶
-
-- 使用直观；
-- 解决hoc的prop 重名问题；
-- 解决render props 因共享数据 而出现嵌套地狱的问题；
-- 能在return之外使用数据的问题。
-
-需要注意的是：hook只能在组件顶层使用，不可在分支语句中使用。
-
-**总结∶** Hoc、render props和hook都是为了解决代码复用的问题，但是hoc和render props都有特定的使用场景和明显的缺点。hook是react16.8更新的新的API，让组件逻辑复用更简洁明了，同时也解决了hoc和render props的一些缺点。
-
-### 5. 对React-Fiber的理解，它解决了什么问题？:star:
-
-React V15 在渲染时，会递归比对 VirtualDOM 树，找出需要变动的节点，然后同步更新它们， 一气呵成。这个过程期间， React 会占据浏览器资源，这会导致用户触发的事件得不到响应，并且会导致掉帧，**导致用户感觉到卡顿**。
-
-为了给用户制造一种应用很快的“假象”，不能让一个任务长期霸占着资源。 可以将浏览器的渲染、布局、绘制、资源加载(例如 HTML 解析)、事件响应、脚本执行视作操作系统的“进程”，需要通过某些调度策略合理地分配 CPU 资源，从而提高浏览器的用户响应速率, 同时兼顾任务执行效率。
-
-**所以 React 通过Fiber 架构，让这个执行过程变成可被中断。“适时”地让出 CPU 执行权，除了可以让浏览器及时地响应用户的交互，还有其他好处:**
-
-- 分批延时对DOM进行操作，避免一次性操作大量 DOM 节点，可以得到更好的用户体验；
-- 给浏览器一点喘息的机会，它会对代码进行编译优化（JIT）及进行热代码优化，或者对 reflow 进行修正。
-
-:star:**核心思想:** Fiber 也称协程或者纤程。它和线程并不一样，协程本身是没有并发或者并行能力的（需要配合线程），它只是一种控制流程的让出机制。让出 CPU 的执行权，让 CPU 能在这段时间执行其他的操作。渲染的过程可以被中断，可以将控制权交回浏览器，让位给高优先级的任务，浏览器空闲后再恢复渲染。
-
-### 6. React.Component 和 React.PureComponent 的区别
-
-PureComponent表示一个纯组件，可以用来优化React程序，减少render函数执行的次数，从而提高组件的性能。
-
-在React中，当prop或者state发生变化时，可以通过在shouldComponentUpdate生命周期函数中执行return false来阻止页面的更新，从而减少不必要的render执行。React.PureComponent会自动执行 shouldComponentUpdate。
-
-不过，pureComponent中的 shouldComponentUpdate() 进行的是**浅比较**，也就是说如果是引用数据类型的数据，只会比较不是同一个地址，而不会比较这个地址里面的数据是否一致。浅比较会忽略属性和或状态突变情况，其实也就是数据引用指针没有变化，而数据发生改变的时候render是不会执行的。如果需要重新渲染那么就需要重新开辟空间引用数据。PureComponent一般会用在一些纯展示组件上。
-
-使用pureComponent的**好处**：当组件更新时，如果组件的props或者state都没有改变，render函数就不会触发。省去虚拟DOM的生成和对比过程，达到提升性能的目的。这是因为react自动做了一层浅比较。
-
-### 7. Component, Element, Instance 之间有什么区别和联系？
-
-- **元素：** 一个元素`element`是一个普通对象(plain object)，描述了对于一个DOM节点或者其他组件`component`，你想让它在屏幕上呈现成什么样子。元素`element`可以在它的属性`props`中包含其他元素(译注:用于形成元素树)。创建一个React元素`element`成本很低。元素`element`创建之后是不可变的。
-- **组件：** 一个组件`component`可以通过多种方式声明。可以是带有一个`render()`方法的类，简单点也可以定义为一个函数。这两种情况下，它都把属性`props`作为输入，把返回的一棵元素树作为输出。
-- **实例：** 一个实例`instance`是你在所写的组件类`component class`中使用关键字`this`所指向的东西(译注:组件实例)。它用来存储本地状态和响应生命周期事件很有用。
-
-函数式组件(`Functional component`)根本没有实例`instance`。类组件(`Class component`)有实例`instance`，但是永远也不需要直接创建一个组件的实例，因为React帮我们做了这些。
-
-### 8. React.createClass和extends Component的区别有哪些？:star:
-
-React.createClass和extends Component的bai区别主要在于：
-
-**（1）语法区别**
-
-- createClass本质上是一个**工厂函数**，extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。
-- createClass方式的方法定义使用逗号，隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；而class的方式定义方法时务必谨记不要使用逗号隔开，这是ES6 class的语法规范。
-
-**（2）propType 和 getDefaultProps**
-
-- React.createClass：通过proTypes对象和getDefaultProps()方法来设置和获取props.
-- React.Component：通过设置两个属性propTypes和defaultProps
-
-**（3）状态的区别**
-
-- React.createClass：通过getInitialState()方法返回一个包含初始值的对象
-- React.Component：通过constructor设置初始状态
-
-**（4）this区别**
-
-- React.createClass：会正确绑定this
-- React.Component：由于使用了 ES6，这里会有些微不同，属性并不会自动绑定到 React 类的实例上。
-
-**（5）Mixins**
-
-- React.createClass：使用 React.createClass 的话，可以在创建组件时添加一个叫做 mixins 的属性，并将可供混合的类的集合以数组的形式赋给 mixins。
-- 如果使用 ES6 的方式来创建组件，那么 `React mixins` 的特性将不能被使用了。
-
-### 9. React 高阶组件是什么，和普通组件有什么区别，适用什么场景:star::star:
-
-官方解释∶
-
-> 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
-
-高阶组件（HOC）就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，它只是一种组件的设计模式，这种设计模式是由react自身的组合性质必然产生的。我们将它们称为纯组件，因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件中的任何行为。
-
-```javascript
-// hoc的定义
-function withSubscription(WrappedComponent, selectData) {
- return class extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- data: selectData(DataSource, props)
- };
- }
- // 一些通用的逻辑处理
- render() {
- // ... 并使用新数据渲染被包装的组件!
- return ;
- }
- };
-
-// 使用
-const BlogPostWithSubscription = withSubscription(BlogPost,
- (DataSource, props) => DataSource.getBlogPost(props.id));
-```
-
-**1）HOC的优缺点**
-
-- 优点∶逻辑服用、不影响被包裹组件的内部逻辑。
-- **缺点∶hoc传递给被包裹组件的props容易和被包裹后的组件重名，进而被覆盖**
-
-**2）适用场景**
-
-- 代码复用，逻辑抽象
-- 渲染劫持
-- State 抽象和更改
-- Props 更改
-
-**3）具体应用例子**
-
-- **权限控制：** 利用高阶组件的 **条件渲染** 特性可以对页面进行权限控制，权限控制一般分为两个维度：页面级别和 页面元素级别
-
-```javascript
-// HOC.js
-function withAdminAuth(WrappedComponent) {
- return class extends React.Component {
- state = {
- isAdmin: false,
- }
- async UNSAFE_componentWillMount() {
- const currentRole = await getCurrentUserRole();
- this.setState({
- isAdmin: currentRole === 'Admin',
- });
- }
- render() {
- if (this.state.isAdmin) {
- return ;
- } else {
- return (您没有权限查看该页面，请联系管理员！
);
- }
- }
- };
-}
-
-// pages/page-a.js
-class PageA extends React.Component {
- constructor(props) {
- super(props);
- // something here...
- }
- UNSAFE_componentWillMount() {
- // fetching data
- }
- render() {
- // render page with data
- }
-}
-export default withAdminAuth(PageA);
-
-
-// pages/page-b.js
-class PageB extends React.Component {
- constructor(props) {
- super(props);
- // something here...
- }
- UNSAFE_componentWillMount() {
- // fetching data
- }
- render() {
- // render page with data
- }
-}
-export default withAdminAuth(PageB);
-```
-
-- **组件渲染性能追踪：** 借助父组件子组件生命周期规则捕获子组件的生命周期，可以方便的对某个组件的渲染时间进行记录∶
-
-```jsx
-class Home extends React.Component {
- render() {
- return (Hello World.
);
- }
- }
- function withTiming(WrappedComponent) {
- return class extends WrappedComponent {
- constructor(props) {
- super(props);
- this.start = 0;
- this.end = 0;
- }
- UNSAFE_componentWillMount() {
- super.componentWillMount && super.componentWillMount();
- this.start = Date.now();
- }
- componentDidMount() {
- super.componentDidMount && super.componentDidMount();
- this.end = Date.now();
- console.log(`${WrappedComponent.name} 组件渲染时间为 ${this.end - this.start} ms`);
- }
- render() {
- return super.render();
- }
- };
- }
-
- export default withTiming(Home);
-```
-
-注意：withTiming 是利用 反向继承 实现的一个高阶组件，功能是计算被包裹组件（这里是 Home 组件）的渲染时间。
-
-- **页面复用**
-
-```javascript
-const withFetching = fetching => WrappedComponent => {
- return class extends React.Component {
- state = {
- data: [],
- }
- async UNSAFE_componentWillMount() {
- const data = await fetching();
- this.setState({
- data,
- });
- }
- render() {
- return ;
- }
- }
-}
-
-// pages/page-a.js
-export default withFetching(fetching('science-fiction'))(MovieList);
-// pages/page-b.js
-export default withFetching(fetching('action'))(MovieList);
-// pages/page-other.js
-export default withFetching(fetching('some-other-type'))(MovieList);
-```
-
-### 10. 对componentWillReceiveProps 的理解
-
-该方法当`props`发生变化时执行，初始化`render`时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用`this.setState()`来更新你的组件状态，旧的属性还是可以通过`this.props`来获取,这里调用更新状态是安全的，并不会触发额外的`render`调用。
-
-**使用好处：** 在这个生命周期中，可以在子组件的render函数执行前获取新的props，从而更新子组件自己的state。 可以将数据请求放在这里进行执行，需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。
-
-componentWillReceiveProps在初始化render的时候不会执行，它会在Component接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染。
-
-### 11. 哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？:star::star:
-
-**（1）哪些方法会触发 react 重新渲染?**
-
-- **setState（）方法被调用**
-
-setState 是 React 中最常用的命令，通常情况下，执行 setState 会触发 render。但是这里有个点值得关注，执行 setState 的时候不一定会重新渲染。当 setState 传入 null 时，并不会触发 render。
-
-```javascript
-class App extends React.Component {
- state = {
- a: 1
- };
-
- render() {
- console.log("render");
- return (
-
- {this.state.a}
-
-
-
-
- );
- }
-}
-```
-
-- **父组件重新渲染**
-
-只要父组件重新渲染了，即使传入子组件的 props 未发生变化，那么子组件也会重新渲染，进而触发 render
-
-**（2）重新渲染 render 会做些什么?**
-
-- 会对新旧 VNode 进行对比，也就是我们所说的Diff算法。
-- 对新旧两棵树进行一个深度优先遍历，这样每一个节点都会一个标记，在到深度遍历的时候，每遍历到一和个节点，就把该节点和新的节点树进行对比，如果有差异就放到一个对象里面
-- 遍历差异对象，根据差异的类型，根据对应对规则更新VNode
-
-**React 的处理 render 的基本思维模式是每次一有变动就会去重新渲染整个应用。**在 Virtual DOM 没有出现之前，最简单的方法就是直接调用 innerHTML。Virtual DOM厉害的地方并不是说它比直接操作 DOM 快，而是说不管数据怎么变，都会尽量以最小的代价去更新 DOM。React 将 render 函数返回的虚拟 DOM 树与老的进行比较，从而确定 DOM 要不要更新、怎么更新。当 DOM 树很大时，遍历两棵树进行各种比对还是相当耗性能的，特别是在顶层 setState 一个微小的修改，默认会去遍历整棵树。尽管 React 使用高度优化的 Diff 算法，但是这个过程仍然会损耗性能.
-
-### 12. React如何判断什么时候重新渲染组件？:star:
-
-组件状态的改变可以因为`props`的改变，或者直接通过`setState`方法改变。组件获得新的状态，然后React决定是否应该重新渲染组件。只要组件的state发生变化，React就会对组件进行重新渲染。这是因为React中的`shouldComponentUpdate`方法默认返回`true`，这就是导致每次更新都重新渲染的原因。
-
-当React将要渲染组件时会执行`shouldComponentUpdate`方法来看它是否返回`true`（组件应该更新，也就是重新渲染）。所以需要重写`shouldComponentUpdate`方法让它根据情况返回`true`或者`false`来告诉React什么时候重新渲染什么时候跳过重新渲染。
-
-### 13. React声明组件有哪几种方法，有什么不同？
-
-React **声明组件**的三种方式：
-
-- 函数式定义的`无状态组件`
-- ES5原生方式`React.createClass`定义的组件
-- ES6形式的`extends React.Component`定义的组件
-
-**（1）无状态函数式组件** 它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到state状态的操作 组件不会被实例化，整体渲染性能得到提升，不能访问this对象，不能访问生命周期的方法
-
-**（2）ES5 原生方式 React.createClass // RFC** React.createClass会自绑定函数方法，导致不必要的性能开销，增加代码过时的可能性。
-
-**（3）E6继承形式 React.Component // RCC** 目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用。
-
-**无状态组件相对于于后者的区别：** 与无状态组件相比，React.createClass和React.Component都是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。
-
-**React.createClass与React.Component区别：**
-
-**① 函数this自绑定**
-
-- React.createClass创建的组件，其每一个成员函数的this都有React**自动绑定**，函数中的this会被正确设置。
-- React.Component创建的组件，**其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。**
-
-**② 组件属性类型propTypes及其默认props属性defaultProps配置不同**
-
-- React.createClass在创建组件时，有关组件props的属性类型及组件默认的属性会作为组件实例的属性来配置，其中defaultProps是使用getDefaultProps的方法来获取默认组件属性的
-- React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的静态属性来配置的。
-
-**③ 组件初始状态state的配置不同**
-
-- React.createClass创建的组件，其状态state是通过`getInitialState`方法来配置组件相关的状态；
-- React.Component创建的组件，其状态state是在`constructor`中像初始化组件属性一样声明的。
-
-### 14. 对有状态组件和无状态组件的理解及使用场景:star::star:
-
-**（1）有状态组件**
-
-> 维护自生状态并有生命周期
-
-**特点：**
-
-- 是类组件
-- 有继承
-- 可以使用this
-- 可以使用react的生命周期
-- 使用较多，容易频繁触发生命周期钩子函数，影响性能
-- 内部使用 state，维护自身状态的变化，有状态组件根据外部组件传入的 props 和自身的 state进行渲染。
-
-**使用场景：**
-
-- 需要使用到状态的。
-- 需要使用状态操作组件的（无状态组件的也可以实现新版本react hooks也可实现）
-
-**总结：** 类组件可以维护自身的状态变量，即组件的 state ，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。类组件则既可以充当无状态组件，也可以充当有状态组件。当一个类组件不需要管理自身状态时，也可称为无状态组件。
-
-**（2）无状态组件** **特点：**
-
->
-
-- 不依赖自身的状态state
-- 可以是类组件或者函数组件。
-- 可以完全避免使用 this 关键字。（由于使用的是箭头函数事件无需绑定）
-- 有更高的性能。当不需要使用生命周期钩子时，应该首先使用无状态函数组件
-- 组件内部不维护 state ，只根据外部组件传入的 props 进行渲染的组件，当 props 改变时，组件重新渲染。
-
-**使用场景：**
-
-- 组件不需要管理 state，纯展示
-
-**优点：**
-
-- 简化代码、专注于 render
-- 组件不需要被实例化，无生命周期，提升性能。 输出（渲染）只取决于输入（属性），无副作用
-- 视图和数据的解耦分离
-
-:star:**缺点：**
-
-- 无法使用 ref
-- 无生命周期方法
-- 无法控制组件的重渲染，因为无法使用shouldComponentUpdate 方法，当组件接受到新的属性时则会重渲染
-
-**总结：** 组件内部状态且与外部无关的组件，可以考虑用状态组件，这样状态树就不会过于复杂，易于理解和管理。当一个组件不需要管理自身状态时，也就是无状态组件，应该优先设计为函数组件。比如自定义的 ``、 `` 等组件。
-
-### 15. 对React中Fragment的理解，它的使用场景是什么？:star:
-
-在React中，组件返回的元素只能有一个根元素。为了不添加多余的DOM节点，我们可以使用Fragment标签来包裹所有的元素，Fragment标签不会渲染出任何元素。React官方对Fragment的解释：
-
-> React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。
-
-```jsx
-import React, { Component, Fragment } from 'react'
-
-// 一般形式
-render() {
- return (
-
-
-
-
-
- );
-}
-// 也可以写成以下形式
-render() {
- return (
- <>
-
-
-
-
- );
-}
-```
-
-### 16. React如何获取组件对应的DOM元素？:star:
-
-可以用ref来获取某个子节点的实例，然后通过当前class组件实例的一些特定属性来直接获取子节点实例。ref有三种实现方法:
-
-- **字符串格式**：字符串格式，这是React16版本之前用得最多的，例如：`span
`
-- **函数格式**：ref对应一个方法，该方法有一个参数，也就是对应的节点实例，例如：` this.info = ele}>
`
-- **createRef方法**：React 16提供的一个API，使用React.createRef()来实现
-
-### 17. React中可以在render访问refs吗？为什么？
-
-```jsx
-<>
- {this.state.title}
- {
- this.spanRef.current ? '有值' : '无值'
- }
-
-```
-
-**不可以**，render 阶段 DOM 还没有生成，无法获取 DOM。**DOM 的获取需要在 pre-commit 阶段和 commit 阶段：**
-
-
-
-### 18. 对React的插槽(Portals)的理解，如何使用，有哪些使用场景:star:
-
-React 官方对 Portals 的定义：
-
-> Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案
-
-Portals 是React 16提供的官方解决方案，**使得组件可以脱离父组件层级挂载在DOM树的任何位置。**通俗来讲，就是我们 render 一个组件，但这个组件的 DOM 结构并不在本组件内。
-
-> 注意有别于Vue的slot 插槽的概念
-
-Portals语法如下：
-
-```javascript
-ReactDOM.createPortal(child, container);
-```
-
-- 第一个参数 child 是可渲染的 React 子项，比如元素，字符串或者片段等;
-- 第二个参数 container 是一个 DOM 元素。
-
-一般情况下，组件的render函数返回的元素会被挂载在它的父级组件上：
-
-```javascript
-import DemoComponent from './DemoComponent';
-render() {
- // DemoComponent元素会被挂载在id为parent的div的元素上
- return (
-
-
-
- );
-}
-```
-
-然而，有些元素需要被挂载在更高层级的位置。最典型的应用场景：当父组件具有`overflow: hidden`或者`z-index`的样式设置时，组件有可能被其他元素遮挡，这时就可以考虑要不要使用Portal使组件的挂载脱离父组件。例如：**对话框，模态窗**。
-
-```javascript
-import DemoComponent from './DemoComponent';
-render() {
- // DemoComponent元素会被挂载在id为parent的div的元素上
- return (
-
-
-
- );
-}
-```
-
-### 19. 在React中如何避免不必要的render？:star:
-
-React 基于虚拟 DOM 和高效 Diff 算法的完美配合，实现了对 DOM 最小粒度的更新。大多数情况下，React 对 DOM 的渲染效率足以业务日常。但在个别复杂业务场景下，性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能，其很重要的一个方向，就是避免不必要的渲染（Render）。这里提下优化的点：
-
-- **shouldComponentUpdate 和 PureComponent**
-
-在 React 类组件中，可以利用 shouldComponentUpdate或者 PureComponent 来减少因父组件更新而触发子组件的 render，从而达到目的。shouldComponentUpdate 来决定是否组件是否重新渲染，如果不希望组件重新渲染，返回 false 即可。
-
-- **利用高阶组件**
-
-在函数组件中，并没有 shouldComponentUpdate 这个生命周期，可以利用高阶组件，封装一个类似 PureComponet 的功能
-
-- **使用 React.memo**
-
-React.memo 是 React 16.6 新的一个 API，用来缓存组件的渲染，避免不必要的更新，其实也是一个高阶组件，与 PureComponent 十分类似，但不同的是， React.memo只能用于函数组件。
-
-### 20. 对 React-Intl 的理解，它的工作原理？:star:
-
-React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的组件和API可以与ReactJS绑定。
-
-React-intl提供了两种使用方法，一种是引用React组件，另一种是直接调取API，官方更加推荐在React项目中使用前者，只有在无法使用React组件的地方，才应该调用框架提供的API。它提供了一系列的React组件，包括数字格式化、字符串格式化、日期格式化等。
-
-在React-intl中，可以配置不同的语言包，他的工作原理就是根据需要，在语言包之间进行切换。
-
-### 21. 对 React context 的理解:star:
-
-在React中，数据传递一般使用props传递数据，维持单向数据流，这样可以让组件之间的关系变得简单且可预测，但是单项数据流在某些场景中并不适用。单纯一对的父子组件传递并无问题，但要是组件之间层层依赖深入，props就需要层层传递显然，这样做太繁琐了。
-
-Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。
-
-可以把context当做是特定一个组件树内共享的store，用来做数据传递。**简单说就是，当你不想在组件树中通过逐层传递props或者state的方式来传递数据时，可以使用Context来实现跨层级的组件数据传递。**
-
-JS的代码块在执行期间，会创建一个相应的作用域链，这个作用域链记录着运行时JS代码块执行期间所能访问的活动对象，包括变量和函数，JS程序通过作用域链访问到代码块内部或者外部的变量和函数。
-
-假如以JS的作用域链作为类比，React组件提供的Context对象其实就好比一个提供给子组件访问的作用域，而 Context对象的属性可以看成作用域上的活动对象。由于组件 的 Context 由其父节点链上所有组件通 过 getChildContext（）返回的Context对象组合而成，所以，**组件通过Context是可以访问到其父组件链上所有节点组件提供的Context的属性。**
-
-### 22. 为什么React并不推荐优先考虑使用Context？
-
-- Context目前还处于实验阶段，可能会在后面的发行版本中有很大的变化，事实上这种情况已经发生了，所以为了避免给今后升级带来大的影响和麻烦，不建议在app中使用context。
-- 尽管不建议在app中使用context，但是独有组件而言，由于影响范围小于app，如果可以做到高内聚，不破坏组件树之间的依赖关系，可以考虑使用context
-- 对于组件之间的数据通信或者状态管理，有效使用props或者state解决，然后再考虑使用第三方的成熟库进行解决，以上的方法都不是最佳的方案的时候，在考虑context。
-- context的更新需要通过setState()触发，但是这并不是很可靠的，Context支持跨组件的访问，但是如果中间的子组件通过一些方法不影响更新，比如 shouldComponentUpdate() 返回false 那么不能保证Context的更新一定可以使用Context的子组件，因此，Context的可靠性需要关注
-
-### 23. React中什么是受控组件和非控组件？:star::star:
-
-**（1）受控组件** 在使用表单来收集用户输入时，例如`
-
-然后关于[width:auto](https://www.zhangxinxu.com/wordpress/2018/07/css-width-auto/)这篇文章非常不错，建议阅读~
diff --git "a/src/CSS/CSS \350\207\252\345\256\232\344\271\211\345\261\236\346\200\247.md" "b/src/CSS/CSS \350\207\252\345\256\232\344\271\211\345\261\236\346\200\247.md"
deleted file mode 100644
index 4c35cb57..00000000
--- "a/src/CSS/CSS \350\207\252\345\256\232\344\271\211\345\261\236\346\200\247.md"
+++ /dev/null
@@ -1,187 +0,0 @@
----
-date: 2021-11-01
-category:
-- CSS
-- 前端
----
-
-# CSS 自定义属性/变量 (variables）
-
-自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 开发者自行定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);）复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。
-
-## 基本用法
-
-声明一个自定义属性，属性名需要以两个减号（`--`）开始，属性值则可以是任何有效的 CSS 值。和其他属性一样，自定义属性也是写在规则集之内的，如下：
-
-```css
-element {
- --main-bg-color: brown;
-}
-```
-
-所定义自定义属性需要在其可见作用域内（即被嵌套的标签内使用），通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了：
-
-```css
-:root {
- --main-bg-color: brown;
-}
-```
-
-## 相关知识点
-
-### var() 函数
-
-**`var()`**函数可以代替元素中任何属性中的**值（value）**的任何部分。
-
-**`var()`**方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。
-
-```css
-