《React高阶组件&&React Hooks》

kkkkyrie
142 阅读4分钟

高阶组件（HOC）

是一个函数，该函数接收一个组件，返回一个组件。

高阶组件的作用：1.属性代理 2. 反向继承

属性代理，传递参数
反向继承：继承状态

createContext

1. globalContext是createContext函数的返回值（对象）

const globalContext=React.createContext({})

2.createContext函数返回一个对象，这个对象有两个属性

  1. Provider：提供者（提供数据）

    放置在外围，以组件形式提供数据，value属性的值即是提供的数据，将数据提供给包裹的组件

    <Provider value={{}}>

    如果省略提供者，那么提供的数据即是createContext接收的参数

    provider当中的value不允许被省略

  2. Consumer：消费者（接收数据）

    1. 作为组件使用
    <Consumer>
{(value)=>{return(
    {value.xxx}
)}
</Consumer>
    1. 通过定义静态属性
    static context=globalContext,来使用提供者的数据（this.context.xxx）

React Hooks

函数组件想要实现类组件的功能需要面临两个问题

  1. 函数组件没有state
  2. 函数组件没有生命周期

如何解决 react v16.8.0 推出hooks API，

  1. 其中的useState用来解决函数组件没有state的问题
  2. 其中的useEffect用来解决函数组件没有生命周期的问题

1. useState

  • 是一个函数
  • 是React对象下的一个方法
  • 返回的是一个数组，接收的即是状态值
  • 返回的数组中第一个元素为状态值，第二个元素为修改状态值的方法
  • 执行修改状态值的方法之后会重新调用该函数组件
  • useState拥有记忆功能，记住你上一次修改的值
  • 实现一个最简单的+1功能
import React,{Conponent,useState} from 'react' //引入useState
function App (){
    const [num,setNum]=userState(0)   //定义初始状态
    const add=()=>{
    setNum(num+1)
    }
    return(
        <div>
            {num}
            <button onClick={add}>+1</button>
        </div>
    )
}

2. useRef

  • 相当于class组件中的React.createRef()

3. useCallback

  • 可以对函数进行一个缓存
  • 接受两个参数
    1. 缓存的函数
    2. 数组，数组可以省略但不建议
      • 省略数组，函数不会缓存
      • 是一个空数组，函数会缓存
      • 数组内指定的数据，发生改变，会重新生成缓存

4. useMemo

  • 接收两个参数，第一个参数是回调函数（会调用），返回的值就是该函数的返回值
  • 第二个参数是一个数组
    1. 省略数组，不会缓存结果
    2. 空数组，永久缓存结果
    3. 数组内可以指定多个参数，只要有一个数据发生改变，重新缓存结果

5. useEffect

  • 接收两个参数，第一个参数是回调函数
  • 第二个参数是一个数组
    1. 如果省略该数组，那么指定的回调函数相当于ComponentDidMount,ComponentDidUpdate
    2. 如果传入的是一个空数组，那么指定的回调函数相当于ComponentDidMount
    3. 数组内可以指定数据，挂载会执行，更新也会执行

6. useContext

在函数组件中，我们依然可以使用React.createContext来返回两个对象{Provide，Consumer} 那么在函数组件中我们如何来实现发布和订阅

  • 函数组件中使用Provider，我们依然通过组件的形式将数据发送给包含的组件中
    <Provider value={{userName:"xxx",age:12}}>
        <App/>
    </Provider>

  • 函数组件中使用Consumer来接收数据也有两种方式

    1. 依然通过Consumer组件的方式写一个回调函数

      <Consumer>
    {value => (
        <>
            <p>username:{value.username}</p>
            <p>age:{value.age}</p>
        </>
    )}
</Consumer>

    2. 使用函数组件useContext

      • useContext接收的参数即是React.createContext的返回值

      • useContext返回的值即是接收的数据

         const useAppContext = ()=>useContext(React.createContext());
 const context=useAppContext()
 //使用{context.xxx}来接收数据

      • 如果需要修改数据(如果只修改其中之一，那么需要先拷贝原数组，不然另一个会被覆盖为undefined)

        context.setState({
    ...context,
    username:'xxx',
    age:123456
})

7. useReducer()

    • 接收两个参数，第一个参数是回调函数

        回调函数接收两个参数，第一个参数是元素的初始状态值，第二个元素是

    • 第二个参数是初始状态值

  2. useReducer返回的是一个数组。第一个元素是状态值，第二个元素是一个方法（修改数据状态）

我们通过调用useReducer的返回值dispatch来执行回调函数

   //通过解构赋值拿到useReducer的返回值
   const [state,dispatch]=useReducer(()=>{},0)

注意:在回调函数中，通常会copy一个数组，对新复制出来的数组进行修改，然后return这个新copy的数组

avatar
文章
阅读
粉丝