高阶组件（HOC）

    Highter Order Component
 用于复用组件逻辑的一种高级技巧，是一种基于React的组合特性而形成的设计模式（装饰器模式：在不改变原有组件渲染的情况下，进行功能增强）

高阶组件是参数组件，返回值为新组件的函数。 即高阶组件本质上是一个函数，这个函数传递组件作为参数会返回一个新的组件。

function withHF(InComponent){
       class OutComponent extends InComponent{
           render(){
           //返回渲染内容
           }
       }
       
       return OutComponent
}

Hook

    是React 16.8的新增特性，它可以让你在不编写class的情况下使用state以及其他的React特性.

在函数组件中，是没有this得到使用的(函数组件中的this为undefined)。 hook是在函数组件中使用到的，不能在class组件中使用。(注意，hook函数是直接在函数组件内部使用，不能在普通函数方法内部被调用到，hook函数还可以在自定义的hook函数体内部被调用到)

hook是一个个的函数，通常这些函数以use作为前缀开头

state hook

    React.useState()

使我们在函数组件中能够使用到类似class组件中的state结构

语法：


const [_state,_setState] =React.useState(value)

参数：value 为状态的初始值。
返回值: 数组
- _state 表示状态数据
- _setStaet表示修改状态数据的函数

Effect Hook

 副作用hook，比如组件渲染时要发送网络请求就可以执行副作用hook
 方法：React.useEffect()

可以把useEffectHook看作class组件中的componentDidMount,componentDidUpdata和componentWillUnmount这三个函数的组合。

  // 每次渲染时都会执行回调函数
 useEffect(() => {
   console.log('传递回调函数，不传递第二个数组')

   // componentWillUnmount()
   return () => {
     console.log('这是在回调函数中返回的函数结构...')
   }
 })

 // 仅在初始渲染时执行回调函数
 // componentDidMount()
 useEffect(() => {
   console.log('传递回调函数，传递第二个空数组')
 }, [])

 // 在初始渲染和依赖项发生变化时执行回调函数
 // componentDidMount() + componentDidUpdate()
 useEffect(() => {
   console.log('传递回调函数，传递第二个非空数组，依赖 count 的变化')
 }, [count])

useCallback()

   方法：React.useCallback(回调函数，依赖项数组)

可利用useCallback()对回调函数进行缓存，仅当依赖项数组中某项数据发生变化时，再重新计算缓存函数。

useMemo()

 方法：React.useMemo(回调函数，依赖项数组)

利用useMemo()对函数的返回值进行缓存，当依赖项数组中某项发生变化时重新计算缓存。

回调函数的返回值可以是函数，可以是对象，可以是数组，也可以是JSX表示的React元素等等

useContext()

 方法：React.useContext()

调用useContext()并传递一个Context对象作为参数，就能获取到最近Provider组件上保存的value值，在函数组件中比使用Consumer消费组件去订阅context变化更方便。

其他Hook

useReducer()
useId()
....

userRef()

使用Ref对象，通常使用ref绑定DOM节点以在编码过程中能够获取对象DOM进行操作，也可以使用ref保存在组件生命周期内访问到的数据。

Ref有个current属性，保存的是Ref对象管理的值。

自定义hook

自定义hook是一个函数，以use作为函数名前缀，在自定义的hook函数体内部，也可以使用到其它的hook(也可以不使用)

day3 高阶组件 和 Hook