React中useContext、useMemo、useCallback的使用

---

1. useContext

概述：

Context 对象是解决跨层级组件通信的方案。

使用：

appContext.js：

import {createContext} from 'react'
// 定义 context 对象
const context = createContext()

export const {Provider,Consumer} = context

export default context

App.jsx：

import React, { useState, useContext } from 'react'
// useContext 它是提供给函数组件用来方便的去调用context对象而使用，你不一定非要用，但是用它可以方便调用
import ctx, { Provider, Consumer } from './context/appContext'

// 通信方案1（不方便）
const Child1 = () => {
  return (
    <div>
      <h3>Child1</h3>
      {/* 使用组件来调用context中的数据，不太建议，因为这样不直观，也乱 */}
      <Consumer>{contextState => <div>{contextState.name}</div>}</Consumer>
      <hr />
    </div>
  )
}

// 通信方案2
const Child2 = () => {
  const contextState = useContext(ctx)

  return (
    <div>
      <h3>Child2 --- {contextState.name}</h3>
      <button
        onClick={() => {
          contextState.changeName(Date.now() + '')
        }}
      >
        修改姓名
      </button>
    </div>
  )
}

const App = () => {
  const [name, setName] = useState('张三')
  const changeName = name => setName(name)
  return (
    <div>
      {/* Provider 生产公共数据 */}
      <Provider value={{ name, changeName }}>
        <Child1 />
        <Child2 />
      </Provider>
    </div>
  )
}

export default App

2. useMemo

概述：

记忆组件，可以理解为计算属性（它是类组件中的 memoizeOne 组件是一样的，只不过，useMemo 是内置功能，无需安装），用作性能优化。

useMemo它可以对于计算结果（数值）进行缓存，如果你的依赖项没有发生改变，则下一次调用时，读取上一次的缓存，从而提升性能。

使用：

import React, { useMemo, useState } from 'react'
// useMemo它可以对于【数值】进行缓存，如果你的依赖项没有发生改变，则下一次调用时，读取上一次的缓存，从而提升性能。

const App = () => {
  const [num1, setNum1] = useState(1)
  const [num2, setNum2] = useState(2)

  // 不使用 useMemo 相加的方案，函数会多次执行，即使两个加数没有发生改变
  // const sum = () => {
  //   console.log('fn')
  //   return num1 + num2
  // }

  // 如果依赖项没有发生改变，则计算会使用上一次的缓存【数值】，提升性能
  // 如果useMemo参数2为一个空数据，则它只会执行一次，后续它所计算的变量的值发生的改变，它也不会重新计算，因为它没有依赖
  // 如果参数2中的数组为多个元素，则其中任意一个元素发生了改变，则它都会重新计算一次
  const sum = useMemo(() => {
    console.log('useMemo')
    return num1 + num2
  }, [num1, num2])

  return (
    <div>
      <h3>useMemo计算出来的数值</h3>
      <div>{sum}</div>
      <div>{sum}</div>
      <div>{sum}</div>
      <hr />
      <button onClick={() => setNum1(v => v + 1)}>修改num1值</button>
      <button onClick={() => setNum2(v => v + 1)}>修改num2值</button>
    </div>
  )
}

export default App

3. useCallback

概述：

记忆函数，它计算返回一个缓存函数。

使用：

import React, { useCallback, useState, useEffect } from 'react'
// useCallback 它是用来缓存函数的

const Child = ({ addCount }) => {
  useEffect(() => {
    // addCount 依赖项发生改变时会执行
    console.log('更新了 addCount')
  }, [addCount])

  return (
    <div>
      <h3>Child组件</h3>
      <button
        onClick={() => {
          addCount(1)
        }}
      >
        修改count值 -- Child组件
      </button>
    </div>
  )
}

const App = () => {
  const [count, setCount] = useState(100)

  // 在没有缓存此函数时，App组件重新执行后，它会再次将 setCount 函数赋值一次，消耗性能
  // const addCount = n => {
  //   console.log('addcount')
  //   setCount(v => v + n)
  // }

  // useCallback如果参数2为一个空数组，则表示没有依赖项，则可以完全的缓存一个函数，如果有依赖项，则依赖项中的数值发生改变，则它会重新赋值一次函数
  const addCount = useCallback(n => {
    // console.log('addcount')
    setCount(v => v + n)
  }, [])

  return (
    <div>
      <h3>App -- {count}</h3>
      <Child addCount={addCount} />
    </div>
  )
}

export default App