[useContext]放送と回答で簡単に伝わります!

8848 ワード
React Hooks テキストリンク
  • ラテ...
    • //App.js

<Header user={user} />

//Header.js

<SearchBar user={user} />
    親エレメント→子エレメントにpropsを挿入して1つずつ渡す必要があります
    しかし、この規模は非常に大きく、多くのコンポーネントが共通に必要とする情報があれば?
    もし子供の子供だけがその情報を必要としたら?Prop Drilling余計すぎる...もしミスがあったら?
    Context
    複数のコンポーネント間でアプリケーション内のグローバルデータを簡単に共有できるようにする方法

    例
  • トピックContextからユーザContext
    • を作成する
    //  ./context/ThemeContext.js

import { createContext } from 'react';

export const ThemeContext = createContext('초기값');
    ご覧のようにContextを生成します.ここでの初期値は
    //App.js

//<ThemeContext.Provider value={{ isDark, setIsDark }}>
	<Page />
//</ThemeContext.Provider>
    このプロバイダで庇護していない時だけ入ることができます!!(かばっていないか、価値がないか)
  • App Component Context→すべてのサブコンポーネントを囲む「誰が必要ですか?アナウンス
    import React, { useContext } from 'react';
import { ThemeContext } from './context/ThemeContext';
import Page from './component/Page';

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <ThemeContext.Provider value={{isDark, setIsDark}}> 
      <Page />
    </ThemeContext.Provider>
  ); // ThemeContext로 감싸는 모든 하위 컴포넌트들은 value 값들에 접근할 수 있다.
}
export default App;
  • Page Componentはこの情報を受け入れず、サブコンポーネントHeader、Content、Footerのみを知っています.
    // ./Component/Header.jsx
const Header = () => {
	const {isDark} = useContext(ThemeContext);

return (
	<header
		className="header"
		style={{
			backgroundColor: isDark ? 'black' : 'lightgray',
			color: isDark ? 'white' : 'black',
	}}
	>
		<h1>방가워용</h1>
	</header>
	);
}
    Header、Content、Footerもこのようにして情報のニーズに対応しています.
    注意点
  • Contextを使用すると、構成部品の再利用が困難になる場合があります.
  • Prop Drillingを回避するには、Component Component(構成部品合成)を考慮してください.
    • スターコードのReact Hooksシリーズを見て整理するために作られました!

    【JavaScript】一旦初心に戻ってDOM操作を学び直す part02
    JavaScript js関数の整理