「REDO」Context APIを使用したグローバル値の管理

7577 ワード
React テキストリンク
Context APIを使用してグローバル値を管理する
これまで、子の子の要素で親の要素の値を使用する場合は、propsのpropsを受け入れて使用してきました.ただし、Context APIとdispatchを使用すると、必要なコンポーネントに直接送信できます.
👁 Contextを使用しない場合の例
function A({text}) {
	return <div>여기 {text}</div>
}
function B({text}) {
	return <A text={text}/>
}
function C({text}) {
	return <B text={text}/>
}
function Friend() {
	return <C text="지우개" />
}
上のコードの結果値はここの消しゴムです
この場合、B、Cは消しゴムを使用せず、Aに伝達されるコンポーネントである.
👉 1.Contextの作成
import { createContext } from 'react';

const ColorContext = createContext({ color:'black' })

export default ColorContext;
Contextは、反応器が提供するcreateContextという関数を使用して作成されます.
👉 2. Provider
<ColorContext.Provider value ={{ color:'red' }}>
<div>
  <ColorBox />
</div>
</ColorContext.Provider>
プロバイダは、Value Propsをサブアセンブリに渡します.
ProviderのためにColorContextを購読するすべての構成部品は、Provider Value Propを変更するたびに再レンダリングされます.(ホットスポットの最適化)
👉 3.useContextの使用
import React, { useContext } from 'react';
import { ColorContext } from "../ColorContext";

const ColorBox = () => {
    const color = useContext(ColorContext);
    return (
    <>
      <div>색상: {color}</div>  
    </>
  );
};
応答するHOoksでuseContext Hookを使用すると、関数コンポーネントでContextを簡単に使用できます.
👁 Contextの使用
import {createContext, useContext} from 'react';

const MyContext = createContext('물건');

function A() {
    const text = useContext(MyContext);
	return <div>여기 {text}</div>	// 여기 지우개
}
function B() {
	return <A/>
}
function C() {
	return <B/>
}
function Friend() {
	return (
      	  <MyContext.Provider value="지우개">
      			<C/>
            </MyContext.Provider>
    );
}
AはB、Cでレンダリングされますが、propsは使用されません.
  • 消しゴムを借りたくなければ
    import {useState, createContext, useContext} from 'react';

const MyContext = createContext('물건');

function A() {
    const text = useContext(MyContext);
	return <div> {text} </div>
}
function B() {
	return <A/>
}
function C() {
	return <B/>
}
function Friend() {
    const [borrow, setBorrow] = useState(true);
	return (
      <MyContext.Provider value={borrow ? '지우개' : '싫어'}>
      	<C/>
      	<button onClick={() => setBorrow(!borrow)}>BUTTON</button>
      </MyContext.Provider>
    );
}
    このようにusStateを使用すると、ボタンをクリックするたびに嫌なテキストが表示されます
    • Vue day1
    Hibernateにデータベースを自動的に認識させる