feat: add react hook

docs/前端/React/1.React Hook.md

@@ -1,16 +1,16 @@
 # 1.React Hook
 
-## Hook 分类
+- Hook 分类
 
 - 除了 useRef,其他都可以归类为 自变量/因变量
 
-### 自变量
+## 自变量
 
 - useState
 - useReducer
 - useContext
 
-#### useState
+### useState
 
 ```JS
   // 1 定义x的方法,并且初始值为 0
@@ -28,7 +28,7 @@
 
 > 描述一下函数组件.useState 定义了 x,x 的变化导致 li 的变化，所以 useState 是自变量,导致了 li 的变化=> 对应了视图变化;
 
-#### 组件的功能不仅描述视图,还能产生副作用 - useEffect
+### 组件的功能不仅描述视图,还能产生副作用 - useEffect
 
 ```js
 const [x, setX] = useState(0);
@@ -44,18 +44,18 @@ useEffect(() => {
 // 数组可以省略，省略则在每一次组件渲染都会执行一次。
 ```
 
-#### 进阶: 从 useState 到 useReducer
+### 进阶: 从 useState 到 useReducer
 
 - useReducer 解决的问题：假设有数据 a，要进行传递。只有一级层次的情况下可以通过 props 传递，但是如果有 n 级组件,那么一级传到 n 级会很麻烦。
 - 如何解决：在一级组件通过 createContext 后,在后续组件需要用到地方通过 useContext 可以直接消费一级组件的 context。
 
-### 因变量
+## 因变量
 
 - useMemo
 - useEffect
 - useCallback
 
-#### 可以缓存的 useMemo 和 useCallback
+### 可以缓存的 useMemo 和 useCallback
 
 1. 可以用 useMemo 和 useCallback 分别包裹 y 和 cahngeX
 
@@ -75,3 +75,45 @@ const changX = useCallback(() => setX(x + 1), [x]);
   2. 使用的时候 y 和 changeX 会被缓存下来,只要 x 不变,始终读取的是缓存的值
   3. 不使用的时候,每次函数组件调用,都会创建新的 y 和 changeX
   4. 在遇到性能瓶颈之前,都可以不使用这 2 个 hooks
+
+### useMemo和useCallback的区别
+- useMemo 经常与 useCallback 一同出现。当尝试优化子组件时，它们都很有用。他们会 记住（或者说，缓存）正在传递的东西：
+```js
+import { useMemo, useCallback } from 'react';
+
+function ProductPage({ productId, referrer }) {
+  const product = useData('/product/' + productId);
+
+  const requirements = useMemo(() => { //调用函数并缓存结果
+    return computeRequirements(product);
+  }, [product]);
+
+  const handleSubmit = useCallback((orderDetails) => { // 缓存函数本身
+    post('/product/' + productId + '/buy', {
+      referrer,
+      orderDetails,
+    });
+  }, [productId, referrer]);
+
+  return (
+    <div className={theme}>
+      <ShippingForm requirements={requirements} onSubmit={handleSubmit} />
+    </div>
+  );
+}
+```
+区别在于你需要缓存 什么:
+
+- **useMemo** **缓存函数调用的结果**。在这里，它缓存了调用 computeRequirements(product) 的结果。除非 product 发生改变，否则它将不会发生变化。这让你向下传递 requirements 时而无需不必要地重新渲染 ShippingForm。必要时，React 将会调用传入的函数重新计算结果。
+- **useCallback** **缓存函数本身**。不像 useMemo，它不会调用你传入的函数。相反，它缓存此函数。从而除非 productId 或 referrer 发生改变，handleSubmit 自己将不会发生改变。这让你向下传递 handleSubmit 函数而无需不必要地重新渲染 ShippingForm。直至用户提交表单，你的代码都将不会运行。
+
+- 如果你已经熟悉了 useMemo，你可能发现将 useCallback 视为以下内容会很有帮助：
+```js
+// 在 React 内部的简化实现
+function useCallback(fn, dependencies) {
+  return useMemo(() => fn, dependencies);
+}
+```
+
+
+## useTransition

docs/前端/React/6.React的高阶组件.md

@@ -0,0 +1,50 @@
+# 6.React 的高阶组件（HOC）
+
+## 什么是高阶组件
+
+1. 高阶函数接收函数作为参数，并且返回值也是一个函数
+2. 类似的，高阶组件接收React组件作为参数，并且返回一个新的React组件。
+3. 高阶组件本质上也是一个函数，并不是一个组件，这一点一定要注意。
+
+## 高阶组件的作用
+
+1. 如下面的代码，封装了一个通用的功能：需从LocalStorage中获取数据，然后渲染出来
+2. 本质上的作用：封装并分离组件的通用逻辑，让通用逻辑在组件间更好地被复用
+3. 本质上是一个装饰者设计模式
+
+```js
+import React, { Component } from 'react'
+
+function withPersistentData(WrappedComponent) {
+  return class extends Component {
+    componentWillMount() {
+      let data = localStorage.getItem('data');
+        this.setState({data});
+    }
+
+    render() {
+      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
+      return <WrappedComponent data={this.state.data} {...this.props} />
+    }
+  }
+}
+
+class MyComponent2 extends Component {  
+  render() {
+    return <div>{this.props.data}</div>
+  }
+}
+
+const MyComponentWithPersistentData = withPersistentData(MyComponent2)
+```
+
+
+## 缺点
+1. 高阶组件（HOC）则容易导致Dom树嵌套很深。
+2. React hook 可以减少组件嵌套的层数
+
+## React Hooks最佳使用场景：
+
+1. 每个组件需要单独定制相关逻辑；
+2. 目标行为只在局部有限的几个组件使用，而不是全局很多组件在使用；
+3. 目标行为为组件添加很多属性；

docs/前端/React/7.组件通信的方式.md

@@ -1 +1,9 @@
 # 7.组件通信的方式
+
+
+## 组件间共享状态state
+1. 共享状态提升为公共父级（状态提升）
+
+## 使用reducer统一管理状态（redux）
+
+## useContext注入环境

docs/前端/ReactNative/1.cpu打包格式区别.md

@@ -0,0 +1,56 @@
+# 1.cpu打包格式区别
+
+## 安卓cpu架构（armeabi-v7a，arm64-v8a，x86和 x86_64.区别）
+这些术语通常用于描述Android应用程序的不同CPU架构。下面是它们之间的区别：
+### 1. armeabi-v7a：
+- **ARM架构**：armeabi-v7a是一种基于ARMv7指令集的CPU架构。
+- **32位**：armeabi-v7a是32位ARM处理器的应用程序二进制接口（ABI）。
+- **向后兼容**：支持大多数现代Android设备，包括大多数旧版和新版的手机和平板电脑。
+
+### 2. arm64-v8a：
+- **ARM64架构**：arm64-v8a是一种基于ARMv8指令集的64位CPU架构。
+- **64位**：arm64-v8a是64位ARM处理器的应用程序二进制接口（ABI）。
+- **性能**：通常具有更好的性能和更高的内存寻址能力，适用于高端设备。
+
+### 3. x86：
+- **x86架构**：x86是一种基于Intel的32位CPU架构。
+- **兼容性**：适用于一些基于Intel的Android设备，例如一些平板电脑和开发板。
+- **模拟器**：在模拟器上运行时，x86架构的应用程序可以获得更好的性能。
+
+### 4. x86_64：
+- **x86_64架构**：x86_64是一种基于Intel的64位CPU架构。
+- **64位**：x86_64是64位x86处理器的应用程序二进制接口（ABI）。
+- **性能**：适用于一些高性能的Intel处理器，提供更好的性能和内存寻址能力。
+
+### 总结：
+- **armeabi-v7a** 和 **arm64-v8a** 针对不同的ARM处理器架构，分别为32位和64位。
+- **x86** 和 **x86_64** 针对Intel处理器架构，分别为32位和64位。
+- 开发者通常会根据目标设备的CPU架构选择合适的应用程序二进制接口（ABI），以确保应用程序在各种设备上能够正确运行并获得最佳性能。
+
+
+## 32位和64位
+
+32位和64位是用来描述计算机处理器的数据处理能力和寻址能力的术语。下面是它们之间的主要区别：
+
+### 1. **数据处理能力**：
+- **32位**：指的是处理器一次可以处理32位的数据。这意味着在一个时钟周期内，处理器可以处理32位的数据。
+- **64位**：指的是处理器一次可以处理64位的数据。64位处理器相比32位处理器能够在同样的时钟周期内处理更多的数据。
+
+### 2. **内存寻址能力**：
+- **32位**：在32位系统中，处理器的地址总线是32位的，因此最大可寻址的内存空间是2^32（约4GB）。
+- **64位**：64位系统的地址总线是64位，因此可以寻址的内存空间更大，是2^64，这是一个极其庞大的数字。
+
+### 3. **性能**：
+- **64位**：64位系统通常能够处理更大的数据块，这在某些计算任务中可以提供更好的性能。
+- **32位**：对于一些较为简单的任务或者较小的数据处理，32位系统可能没有明显的性能劣势。
+
+### 4. **软件兼容性**：
+- **32位**：32位软件可以在64位系统上运行，但是64位软件无法在32位系统上运行。
+- **64位**：64位系统可以运行64位和32位软件，并且一些软件在64位系统上可能会获得更好的性能。
+
+### 5. **安全性**：
+- **64位**：64位系统通常具有更好的安全性，例如更好的地址空间隔离和更复杂的内存保护机制。
+
+### 总结：
+- **32位** 和 **64位** 主要区别在于数据处理能力、内存寻址能力、性能和软件兼容性等方面。
+- 选择32位或64位系统取决于应用需求、性能要求以及对内存寻址能力的需求。在选择处理器架构时，需要考虑到软件兼容性和性能方面的因素。

docs/前端/ReactNative/2.scrollView和flatlist.md

@@ -0,0 +1,11 @@
+# 2. scrollView和flatlist
+
+## ScrollView：
+1. ScrollView 是一个通用的滚动容器，可以包含各种类型的子组件，比如文本、图片、其他组件等。
+2. 当需要展示少量静态数据或者不需要进行复杂的列表操作时，可以使用 ScrollView。
+3. 适用于较小的数据集或者数据不会频繁变化的情况。
+
+## FlatList：
+1. FlatList 是专门用于渲染大型数据集的高性能组件，它只渲染当前屏幕上可见的元素，而不会一次性渲染所有数据。
+2. 支持基于数据源的滚动列表，提供了更好的性能和内存管理，特别是在处理大量数据时。
+3. 具有更好的性能优化，支持上拉加载更多、下拉刷新等常见列表操作。