React函数组件useContext useReducer自定义hooks

一、hooks(useContext)

接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 的 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 (
         {
                setInfo(value)
            }
        }}>
            
{ filmList.map(item => { return }) }
) } function FilmItem(props) { let { name, poster, grade, synopsis } = props const value = useContext(GlobalContext) console.log(value) return
{ value.changeInfo(synopsis) }}> {name}

{name}

观众评分:{grade}
} function FilmDetail() { const value = useContext(GlobalContext) return (
{value.info}
) }

二、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 (
    
{state.count}
) }

效果:

React函数组件useContext useReducer自定义hooks_第1张图片

三、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 (
      
        
) } function Child1() { const {dispatch} = useContext(GlobalContext) return (
) } function Child2() { const {state} = useContext(GlobalContext) return (
{state.a}
) } function Child3() { const {state} = useContext(GlobalContext) return (
{state.b}
) }

效果:

React函数组件useContext useReducer自定义hooks_第2张图片

四、自定义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 (
    
{ setText(event.target.value) }}> { getCinemaList.map((item) =>
{item.name}
{item.address}
) }
) }

效果:

React函数组件useContext useReducer自定义hooks_第3张图片

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

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

你可能感兴趣的:(React函数组件useContext useReducer自定义hooks)