欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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(); // 創(chuàng)建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會執(zhí)行函數并返回執(zhí)行后的結果
    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實現(xiàn)隨機顏色選擇器的示例代碼

    React實現(xiàn)隨機顏色選擇器的示例代碼

    顏色選擇器是一個用于選擇和調整顏色的工具,它可以讓用戶選擇他們喜歡的顏色,本文主要介紹了React實現(xiàn)隨機顏色選擇器的示例代碼,具有一定的參考價值,感興趣的可以了解一下
    2023-12-12
  • 詳解React中函數式組件與類組件的不同

    詳解React中函數式組件與類組件的不同

    React?函數式組件與類組件的主要區(qū)別在于它們的定義和聲明方式以及它們之間的一些特性,所以本文就詳細的給大家講講React中函數式組件與類組件有何不同,需要的朋友可以參考下
    2023-09-09
  • React路由封裝的實現(xiàn)淺析

    React路由封裝的實現(xiàn)淺析

    路由是React項目中相當重要的概念,對于功能較為復雜的網頁來說,必然會涉及到不同功能間的頁面跳轉,本篇文章將對React官方維護的路由庫React-Router-Dom的使用和常用組件進行講解,同時對路由組件傳遞param參數的方式進行講解,希望對各位讀者有所參考
    2022-08-08
  • React項目中報錯:Parsing error: The keyword 'import' is reservedeslint的問題及解決方法

    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如何解決樣式污染問題

    這篇文章主要介紹了React如何解決樣式污染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • React?Hooks項目實戰(zhàn)

    React?Hooks項目實戰(zhàn)

    React?Hooks是React?16.8版本引入的新特性,它使得在函數組件中也能夠使用狀態(tài)(state)和其他React特性,本文就來詳細介紹一下React?Hooks項目實戰(zhàn),感興趣的可以了解一下
    2023-11-11
  • React表單容器的通用解決方案

    React表單容器的通用解決方案

    本文主要介紹了React表單容器的通用解決方案,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • 關于React動態(tài)修改元素樣式的三種方式

    關于React動態(tài)修改元素樣式的三種方式

    這篇文章主要介紹了關于React動態(tài)修改元素樣式的三種方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • react koa rematch 如何打造一套服務端渲染架子

    react koa rematch 如何打造一套服務端渲染架子

    這篇文章主要介紹了react koa rematch 如何打造一套服務端渲染架子,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-06-06
  • React Refs轉發(fā)實現(xiàn)流程詳解

    React Refs轉發(fā)實現(xiàn)流程詳解

    Refs是一個 獲取 DOM節(jié)點或React元素實例的工具,在React中Refs 提供了一種方式,允許用戶訪問DOM 節(jié)點或者在render方法中創(chuàng)建的React元素,這篇文章主要給大家介紹了關于React中refs的一些常見用法,需要的朋友可以參考下
    2022-12-12

最新評論