React函数组件useContext useReducer自定义hooks

更新时间：2022年08月04日 11:29:43 作者：你华还是你华

这篇文章主要为大家介绍了React函数组件useContext useReducer自定义hooks示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

一、hooks（useContext）

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

新建useContext.js函数组件，写入如下代码：

import React, {  useEffect, useState, useContext } from 'react'
import axios from 'axios'
import '../css/middlecp.css'
const GlobalContext = React.createContext(); // 创建context对象
export default function UseContext() {
    const [filmList, setFilmList] = useState([])
    const [info, setInfo] = useState('')
    useEffect(() => {
        axios.get('/data.json').then(res => {
            console.log(res.data.data.films)
            setFilmList(res.data.data.films)
        }, err => {
            console.log(err)
        })
    }, [])
    return (
        <GlobalContext.Provider value={{
            info: info,
            changeInfo: (value) => {
                setInfo(value)
            }
        }}>
            <div>
                {
                    filmList.map(item => {
                        return <FilmItem key={item.filmId} {...item}></FilmItem>
                    })
                }
                <FilmDetail></FilmDetail>
            </div>
        </GlobalContext.Provider>
    )
}
function FilmItem(props) {
    let { name, poster, grade, synopsis } = props
    const value = useContext(GlobalContext)
    console.log(value)
    return <div className="filmitem" onClick={() => {
            value.changeInfo(synopsis)
        }}>
            <img src={poster} alt={name}></img>
            <h4>{name}</h4>
            <div>观众评分：{grade}</div>
        </div>
}
function FilmDetail() {
    const value = useContext(GlobalContext)
    return (
        <div className="filmdetail">
            {value.info}
        </div>
    )
}

二、hooks（useReducer）

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。

新建useReducer.js组件，写入代码：

import React, { useReducer } from 'react'
export default function UseReducer() {
  // 处理函数
  const reducer = (prevState, action) => {
    console.log(prevState, action)
    let newState = {...prevState}
    switch(action.type) {
        case 'minus':
            newState.count--
            return newState;
        case 'add':
            newState.count++
            return newState;
        default:
            return newState;
    }
  } 
  // 外部对象
  const intialState = {
    count: 0
  }
  const [state, dispatch] = useReducer(reducer, intialState)  
  return (
    <div>
        <button onClick={() => {
            dispatch({
                type: "minus"
            })
        }}>-</button>
            {state.count}
        <button onClick={() => {
            dispatch({
                type: "add"
            })
        }}>+</button>
    </div>
  )
}

效果：

三、hooks（useContext搭配useReducer使用）

hooks中useContext搭配useReducer使用跨级通信。（hooks中自带的，后面redux不用这么麻烦）修改useReducer.js组件代码为如下：

import React, { useReducer, useContext } from 'react'
// 处理函数
const reducer = (prevState, action) => {
    console.log(prevState, action)
    let newState = {...prevState}
    switch(action.type) {
        case 'child2':
            newState.a = '改变后的a'
            return newState;
        case 'child3':
            newState.b = '改变后的b'
            return newState;
        default:
            return newState;
    }
  } 
// 外部对象
const intialState = {
    a: 'aaaaa',
    b: 'bbbbb'
}
const GlobalContext = React.createContext()
export default function UseReducer() {
  const [state, dispatch] = useReducer(reducer, intialState)  
  return (
    <GlobalContext.Provider value={
        {
            state,
            dispatch
        }
    }>  
        <div>
            <Child1></Child1>
            <Child2></Child2>
            <Child3></Child3>
        </div>
    </GlobalContext.Provider>
  )
}
function Child1() {
    const {dispatch} = useContext(GlobalContext)
    return (
        <div>
            <button onClick={() => {
                dispatch({
                    type: 'child2'
                })
            }}>改变child2</button>
            <button onClick={() => {
                dispatch({
                    type: 'child3'
                })
            }}>改变child3</button>
        </div>
    )
}
function Child2() {
    const {state} = useContext(GlobalContext)
    return (
        <div>
            {state.a}
        </div>
    )
}
function Child3() {
    const {state} = useContext(GlobalContext)
    return (
        <div>
            {state.b}
        </div>
    )
}

效果：

四、自定义hooks

当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。必须使用use开头。(实际上就是将独立的逻辑函数抽离出来封装) 新建useCustom.js，写入代码：

import React, { useEffect, useMemo, useState } from 'react'
import axios from 'axios'
function useCinemaList() {
    const [cinemaList, setCinemaList] = useState([])
    useEffect(() => {
        axios({
            url: 'https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=3085018',
            method: 'get',
            headers: {
                'X-Client-Info':' {"a":"3000","ch":"1002","v":"5.2.0","e":"1646314068530784943341569"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then((res) => {
            console.log(res.data)
            setCinemaList(res.data.data.cinemas)
        }).catch((err) => {
            console.log(err)
        })
      },[])
      return {
        cinemaList
      }
}
function useFliter(cinemaList, text) {
    const getCinemaList = useMemo(() => cinemaList.filter(item => item.name.toUpperCase().includes(text.toUpperCase()) || 
  item.address.toUpperCase().includes(text.toUpperCase())), [cinemaList, text]) // useMemo会执行函数并返回执行后的结果
    return {
        getCinemaList
    }
}
export default function UseCustom() {
  const [text, setText] = useState('')
  const {cinemaList} = useCinemaList()
  const {getCinemaList} = useFliter(cinemaList, text)
  return (
    <div>
        <input value={text} onChange={(event) => {
              setText(event.target.value)
            }}></input>
            {
                getCinemaList.map((item) => 
                <dl key={item.cinemaId}>
                    <dt>{item.name}</dt>
                    <dd>{item.address}</dd>
                </dl>
                )
            }
    </div>
  )
}

效果：

可以看到我们这个影院的筛选功能还是正常，但是看代码的话，逻辑更加的清晰了。

以上就是React函数组件useContext useReducer自定义hooks的详细内容，更多关于React hooks函数组件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React实现随机颜色选择器的示例代码
颜色选择器是一个用于选择和调整颜色的工具,它可以让用户选择他们喜欢的颜色,本文主要介绍了React实现随机颜色选择器的示例代码,具有一定的参考价值,感兴趣的可以了解一下
2023-12-12
详解React中函数式组件与类组件的不同
React 函数式组件与类组件的主要区别在于它们的定义和声明方式以及它们之间的一些特性,所以本文就详细的给大家讲讲React中函数式组件与类组件有何不同,需要的朋友可以参考下
2023-09-09
React路由封装的实现浅析
路由是React项目中相当重要的概念，对于功能较为复杂的网页来说，必然会涉及到不同功能间的页面跳转，本篇文章将对React官方维护的路由库React-Router-Dom的使用和常用组件进行讲解，同时对路由组件传递param参数的方式进行讲解，希望对各位读者有所参考
2022-08-08
React项目中报错:Parsing error: The keyword &a
ESLint 默认使用的是 ES5 语法,如果你想使用 ES6 或者更新的语法,你需要在 ESLint 的配置文件如：.eslintrc.js等中设置 parserOptions,这篇文章主要介绍了React项目中报错:Parsing error: The keyword 'import' is reservedeslint的问题及解决方法,需要的朋友可以参考下
2023-12-12
React如何解决样式污染问题
这篇文章主要介绍了React如何解决样式污染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
React Hooks项目实战
React Hooks是React 16.8版本引入的新特性,它使得在函数组件中也能够使用状态（state）和其他React特性,本文就来详细介绍一下React Hooks项目实战,感兴趣的可以了解一下
2023-11-11
React表单容器的通用解决方案
本文主要介绍了React表单容器的通用解决方案，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
关于React动态修改元素样式的三种方式
这篇文章主要介绍了关于React动态修改元素样式的三种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
react koa rematch 如何打造一套服务端渲染架子
这篇文章主要介绍了react koa rematch 如何打造一套服务端渲染架子，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
React Refs转发实现流程详解
Refs是一个获取 DOM节点或React元素实例的工具,在React中Refs 提供了一种方式,允许用户访问DOM 节点或者在render方法中创建的React元素,这篇文章主要给大家介绍了关于React中refs的一些常见用法,需要的朋友可以参考下
2022-12-12