緒論

乱翻propsで符号化する.私は自分が縁起が悪いと思います.そうすれば、どのコンポーネントでpropsを使うか分からないかもしれません.
反応素子は、親素子から子素子にデータを伝達する一方向構造である.100 depthの応答コンポーネントを有するWebサービスにおいて、一番下のコンポーネントが一番上であり、부모 컴포넌트のデータが必要である場合、99のステップを経てデータを伝達する必要がある.
データの転送中に、一部のコンポーネントは、転送支柱としてのみ機能する場合があります.
わあ、反応できないと思うかもしれませんが、賢い人は전역상태변수をより良い方法で管理し始めました.

Context

きっと賢い人がそう思っているに違いない.
「グローバルに変数を設定することはできません.必要な部分だけ使用しますか?「どうせ親から子供になって、自分の行きたいところで勝手に使いなさい」
だからそう思うんだ.contextは、제공자および받는이からなる.「必要な人~?呼び出すと、電話に出た人が「私か~?」呼ぶと、「よし、全部持って行こう」と言います.
受信者はhookを使用して、グローバルステータス変数を構成部品に簡単にインポートできます.
しかしcontextはすべての場合porpsより良いかどうかを考慮すべきである.
ステータス変数がcontextの構成部品は完全に再使用できません.これは、Providerの外部で素子を使用しても所望の値が得られないためである.
したがって、ライブラリを作成するとpropsはサブエレメントにデータを渡します.
複数のcontextを使用して値を変更すると、プロバイダによって囲まれたすべての構成部品が再レンダリングされるため、contextは꼭 필요한 경우にのみ使用できます.
コードでcontextを使用する方法と、contextモジュールを作成する方法を見てみましょう.

コード(暗いモードを使用)

//StateContext.js
import {createContext} from "react"
const ThemeContext = createContext(null)

const ThemeProvider = ({children}) => {
	const store = {
    	state,
        setState
    }
    return 
      <ThemeContext.Provider value={store}>
          {children}
      </ThemeContext.Provider>
}
export {ThemeContext, ThemeProvider}

非常にシンプルなProvider構成部品を実現

//index.js
import {ThemeProvider} from "./context/ThemeContext"
<ThemeProvider>
  	<App/>
</ThemeProvider>

App componentでstateとsetStateを使用できるようになりました.App Componentのサブアセンブリでは、Hooksが必要な部分にダークモードを設定する仕組みになっています.

Context pattern

プログラミング言語設計モードと同様に,応答にも設計モードがあり,contextとproviderにもモードがある.

Provider module

これは最も基本的な方法です.これはウィダックモードを体現するために使用される構造モードである.
HOCモードではprovider内部の構成部品がstateを自由に使用できます.

//Provider.js
import {ThemeProvider} from "./context/ThemeContext"
<ThemeProvider>
  <List/>
  <Post/>  
  <Button/>
</ThemeProvider>

Costom Hooks

costom Hook?

繰り返し使用するhookメソッドを1つに減らし,再利用性を向上させた.
Custom Hookを使用する理由は、デフォルトのアレイを繰り返し使用できないためです.
これはどういう意味ですか.暗いモードではなく、ある文章を発表するときに、掲示板にアップロードされ、私のリポジトリに個別にアップロードされると仮定します.
第1のパターンで編むと、

//postboard
const postBoard = () => {
  return (
  	<PostProvider>
      <Category />
      <List />
      <Indicator />
    </PostProvider>
  )
}

//sotreBoard
const storeBoard = () => {
  return (
  	<PostProvider>
      <Category />
      <List />
      <Indicator />
    </PostProvider>
  )
}

同じフォーマットのコードでも、書き直す手間がかかります.costom hooksを使用してこの問題を解決します.
再使用するには、メソッドをHooksと宣言し、このHookをcontextに割り当てます.
postを構成するコードはusepostです.jsと仮定すると、

//postContext.js

import usePost from "./usePost.js"
import {createContext} from "reat"
const initialValue= {}

export const PostContext = createContext(initialValue)

export const PostProvider = ({chidren}) => {
  const postPage = usePost()
  return  (
  	<PostContext.Provider value={postPage}>
      {children}
    </PostContext.Porvider>
  )
}

costom hookで定義したpostPageをvalueとして使用し、再利用可能なcontextを使用できるようになりました!

減速機の使用

2つ目のモードはcontextとreduceを使用することです.
この2つの概念に触れ始めたばかりの頃、似たような概念だったと思いますが、勉強が進むにつれて、自分で書いたわけではないことに気づきました.
contextが静的である場合、reduceは動作です.
reduceモードは、초기값과の動作モードに従ったdispatchである.

const ACTION_TYPES = {
  add-value: "ADD-VALUE",
  delete-value: "DELETE-VALUE",
  put-value: "PUT-VALUE"
}

const reducer = (state, action) => {
  switch(action.type){
    case ACTION_TYPES.add-value: {
      return [...state, action.payload]
    case ACTION_TYPES.delete-value: {
      return state.filter(item => item.id !== action.payload.id)
      }
    case ACTION_TYPES.put-value: {
      const index = state.findIndex(x => x.id === action.payload.id)
      state[index] = action.payload
      return [...state]
      }
      default: 
      	return
    }
  }
}

const StateProvider = ({children}) => {
  const initState = []
  const [state, dispatch] = useReducer(reducer, initState)
  
  const store = {
    state,
    dispatch
  }
  
  return (
  	<StateContext value={store}>
    {children}
    </StateContext> 
  )
}

2つの概念を同時に使って、コードが少しかっこいいと思います.stateのみを使用する場合に比べて、コードの品質が高いと感じます.
私はすでに一定の概念を掌握して、だから急いでコードに行きます…!
リファレンス
React Context Pattern
Hooks + Context
React Architecture: The React Provider Pattern
Provider Pattern with React Context API
custom hooks