【react hooks】useContextを使ってみた
6167 ワード
hooksのuseContextを使ってみる
めちゃ簡単なカウンター作ってみた。
https://codesandbox.io/s/condescending-turing-6gtgf
ソース
import React, { useState, useContext, createContext, useCallback } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const Counter = createContext();
function App() {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount(count + 1), [count]);
const decrement = useCallback(() => {
if (count > 0) setCount(count - 1);
}, [count]);
return (
<div className="App">
<Counter.Provider
value={{
count,
increment,
decrement
}}
>
<Child />
</Counter.Provider>
</div>
);
}
const Child = () => {
const { count, increment, decrement } = useContext(Counter);
return (
<>
{count}
<button onClick={increment}>increment</button>
<button onClick={decrement}>decrement</button>
</>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
これで簡単にバケツリレー回避できるんだね。
createContextについて全然知らなくてhooks触ってて気がついた。
これから使っていってみよう。
Author And Source
この問題について(【react hooks】useContextを使ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/takujiro_0529/items/d1b72ee3c44dc4f8ac66著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .