ReactHooks-useContetx和useReducer的使用实例详解

 

useContetx的使用

在之前的开发中,我们要在组件中使用共享的Context有两种方式:

类组件可以通过 类名.contextType = MyContext 的方式,在类中获取context;

多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context;

但是多个Context共享时的方式会存在大量的嵌套(会导致代码阅读性非常差):

Context Hook允许我们通过Hook来直接获取某个Context的值, 相对于class组件中的使用方式会简单非常多;

例如定义两个Context

import { createContext } from "react";

const InfoContext = createContext()
const ThemeContext = createContext()

export {
InfoContext,
ThemeContext
}

依然需要使用InfoContext和ThemeContext将组件包裹起来

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(
<InfoContext.Provider value={{name: "chenyq", age: 18}}>
  <ThemeContext.Provider value={{color: "red"}}>
    <App/>
  </ThemeContext.Provider>
</InfoContext.Provider>
)

在要使用的地方, 通过useContetx这个hook函数可以直接获取到值

import React, { memo } from 'react'
import { useContext } from 'react'
import { InfoContext, ThemeContext } from './index'

const App = memo(() => {
// 通过hook拿到共享的数据
const info = useContext(InfoContext)
const theme = useContext(ThemeContext)
return (
  <div>
    {/* 展示共享的数据 */}
    <h2>{info.name}-{info.age}</h2>
    <h2>{theme.color}</h2>
  </div>
)
})

export default App

注意事项:

当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重新渲染,并使用最新的值传递给 MyContext provider 的 context value 值。

 

useReducer的使用

很多人看到useReducer的第一反应应该是redux的某个替代品,其实并不是。

useReducer仅仅是useState的一种替代方案:

在某些场景下,如果state的处理逻辑比较复杂,我们可以通过useReducer来对其进行拆分;

或者这次修改的state需要依赖之前的state时,也可以使用;

useReducer函数使用过程如下:

例如我们先定义一个reducer函数

// 定义一个reducer函数
function reducer(state, action) {
switch(action.type) {
  case "incremment":
    return {...state, counter: state.counter + action.num}
  case "decremment":
    return {...state, counter: state.counter - action.num}
  default: 
    return state
}
}

再在函数组件中通过useReducer函数将我们定义的reducer函数使用起来

import React, { memo } from 'react'
import { useReducer } from 'react'

// 定义一个reducer函数
function reducer(state, action) {
switch(action.type) {
  case "incremment":
    return {...state, counter: state.counter + action.num}
  case "decremment":
    return {...state, counter: state.counter - action.num}
  default: 
    return state
}
}

// 函数组件
const App = memo(() => {
// 第一个参数传reducer, 第二个参数初始化值
const [state, dispatch] = useReducer(reducer, { counter: 0 })

return (
  <div>
    {/* 使用reducer函数中的state */}
    <h2>当前计数: {state.counter}</h2>
    {/* 派发action通过reducer函数修改counter */}
    <button onClick={() => dispatch({type: "incremment", num: 5})}>+5</button>
    <button onClick={() => dispatch({type: "decremment", num: 5})}>-5</button>
  </div>
)
})

export default App

数据是不会共享的,它们只是使用了相同的counterReducer的函数而已。

所以,useReducer只是useState的一种替代品,并不能替代Redux。

关于React Hooks - useContetx和useReducer的基本使用的文章就介绍至此,更多相关React Hooks基本使用内容请搜索编程宝库以前的文章,希望以后支持编程宝库

 Hooks的介绍和初体验Hooks出现的原因Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下, 使用state以及其他的React特性(比如 ...