高阶函数HOC(High Order Component)

作者:guo-zi-xin

更新于:9 个月前

字数统计:877 字

阅读时长:3 分钟

在React中，高阶组件(HOC) 是一个接收组件作为参数并返回一个新组件的函数。换句话说，它是一种组件的转换器。高阶组件通常用于组件之间的复用逻辑，例如状态管理、数据获取、访问控制等等。

HOC一个常见的示例就是React-Redux的connect函数，它将Redux Store 连接到 React 组件，使组件可以访问和更新 Store中的状态

高阶组件是React 中一种非常强大的模式，可以帮助我们在组件间复用逻辑、修改Props、实现条件渲染以及额外的功能。通过熟练掌握高阶组件的概念和使用方式，我们可以提高代码的可维护性和可读性，构建更加强壮、高效的应用程序。在实际项目中，我们可能会遇到各种高阶组件的应用场景，因此掌握高阶组件的使用方法对于 React开发来说至关重要。

React Hook中常见的高阶函数

useState 高阶函数

useState 是React中最基础的Hook，用于在函数组件中添加状态。它返回一个数组，包含当前状态和更新状态的函数。这个更新函数可以接收一个新的状态值，也可以接收一个函数来更新状态

jsx

import React, { useState } from 'react'

const  Counter = () => {
  const [count, setCount] = useState<number>(0)

  const increment = () => {
    setCount(count + 1)
  };

  return (
    <>
      <p>Count: { count }</p>
      <button onClick={increment}>increment</button>
    </>
  )
}

useEffect 高阶函数

useEffect用于在函数式组件中执行副作用的操作，比如订阅事件、数据获取、DOM操作等等。它接收一个函数作为参数，这个函数就是副作用代码。 useEffect还可以接收第二个参数，用于指定副作用操作的依赖项。

jsx

import React, { useState, useEffect } from 'react'

const Timer = () => {
  const [time, setTime] = useState<number>(0)

  useEffect(() => {
    const intervaild = setInterval(() => {
      setTime(time + 1)
    }, 1000);
     return () => {
      clearInterval(intervaild)
     }
  }, [time])
  
  return <p>Time: { time }</p>
}

useContext高阶函数
useContext用于在函数式组件中访问React的上下文(context)。它接收一个上下文对象作为参数，并返回上下文的当前值
组件嵌套不需要一层一层props传参，可以直接实现A组件传值到C组件，创建方法为createContext
jsx
```
import React, { useContext } from 'react'
import MyContext from './Context'

const MyComponent = () => {
  const value = useContext(MyContext)
  
  return <p>Context value: {value}</p>
}
```

useState 和 useRef的区别

两者最大的区别是 useState 用于管理状态，useRef用于操作DOM元素。另外， useState返回的是当前状态和一个更新状态的函数，而 useRef 返回的是一个全局可以访问和修改的 Ref 对象。

useState用于保存和更新组件的状态，而 useRef 用于引用 DOM 元素或者保存值。

useState的值会被重新渲染，而 useRef的值则不会。

useState的值在每一个render中都是独立存在的，而useRef.current则更像是相对于render函数的一个全局变量，每次它会保持render的最新状态（useState异步更新值， useRef则同步更新）
useState会触发重新渲染，useRef不触发。
useRef不仅用于DOM引用， 'ref'对象是通用容器，期当前属性是可变的，并且可以保存任何职，类似于类的实例属性
变量是决定视图图层渲染的变量，需要使用useState，其它用途则使用 useRef
useRef特性: 可变的 ref 对象，持久化

高阶函数HOC(High Order Component) ​

React Hook中常见的高阶函数 ​

useState 和 useRef的区别 ​

高阶函数HOC(High Order Component)

React Hook中常见的高阶函数

useState 和 useRef的区别