バケツリレーをやめる男のはなし
＜ ある昼下がり ＞
なになに..
Fugaボタンをクリックすると、Fugaが1増える。
Mogeは常にFugaよりも1大きくて、
Mugaは常にMogaの3倍である。
なるほどなぁ..
やとすれば、
Fugaボタンを一定回数クリックしたときの、MogeとMugaを一瞬にして求められたらうれしいなぁ...
Reactの勉強も兼ねてそうゆうのだれか作ってくれへんかなぁ...
こんなやつ...
...
...
...
...
...あぁ、自分でやったらええんか。
その方が勉強になるし...
＜ つぎの日 ＞
できた！
src
├── components
│ ├── App.js
│ ├── Fuga.js
│ ├── Hoge.js
│ ├── Moge.js
│ └── Muga.js
└── index.js
componentsディレクトリがこんな風になってて...
import React,{useState} from 'react'
import Fuga from './Fuga'
import Hoge from './Hoge'
const App = () => {
const [count, setCount] = useState(0)
const moge = count + 1
const muga = moge * 3
return (
<>
<Fuga count={count} handleClick={() => setCount(count + 1)}/>
<Hoge moge={moge} muga={muga} />
</>
)
}
export default App
最上位のコンポーネントApp.jsがでFugaコンポーネントとHogeコンポーネントを使ってて...
import React from 'react'
const Fuga = ({count,handleClick}) => {
return (
<section>
<h1>Fugaについて</h1>
<p>ボタンを押すと、Fugaが1大きくなる。</p>
<button onClick={handleClick}>Fuga</button> Fuga : {count}
</section>
)
}
export default Fuga
Appコンポーネントの子コンポーネントであるFugaコンポーネントに、FugaボタンとFugaの値を表示させて...
import React from 'react'
import Moge from './Moge'
import Muga from './Muga'
const Hoge = ({moge,muga}) => {
return (
<section>
<h1>MogeとMugaについて</h1>
<p>MogeはFugaより1大きく、MugaはMogaの3倍である。</p>
<Moge count={moge} />
<Muga count={muga} />
</section>
)
}
export default Hoge
HogeコンポーネントにMogeとMugaのコンポーネントを置く...
import React from 'react'
const Moge = ({count}) => {
return (
<p> Moge : {count} </p>
)
}
export default Moge
Mugaコンポーネントでmugaを受け取り、Mugaの値を表示する...
import React from 'react'
const Muga = ({count}) => {
return (
<p> Muga : {count} </p>
)
}
export default Muga
Mogeコンポーネントでmogeを受け取り、Mogeの値を表示させる...
...
...
...できた。
...
...
...
...でも
...なんか、このHogeコンポーネントのここ...
const Hoge = ({moge,muga}) => {
return (
<section>
<h1>MogeとMugaについて</h1>
<p>MogeはFugaより1大きく、MugaはMogaの3倍である。</p>
<Moge count={moge} />
<Muga count={muga} />
</section>
)
}
Hogeコンポーネントではmogeもmugaも使わへんのに、ただ受け取って、次のMogeとMugaのコンポーネントに渡してるだけやな...
今回は別にまあええけど、このFugaプロジェクトが波に乗ってもっと大きくなったら、このままやと大変になるな...
今のうちになんかええ方法考えとこ...
＜ その日の晩 ＞
「konbanwa...」
はっ！！！
だれや！？
「createContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContext...」
やめろっ！！！
「ProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumer...」
やめてっっっ！！
そこだけはっ！！！！
うわ〜〜〜〜〜〜〜〜っ！！！！！！！
＜ つぎの日の朝 ＞
ん...?
あぁ...なんや...夢か...
なんやったっけ...?
あぁ...せやせや、コンテキストがどうたらこうたらで...
...ってことは...
contextsディレクトリ作って、そこにAppContext.js作って...
src
├── components
│ ├── App.js
│ ├── Fuga.js
│ ├── Hoge.js
│ ├── Moge.js
│ └── Muga.js
├── contexts
│ └── AppContext.js
└── index.js
そしたらこんな感じか...
なんかProviderやらConsumerやらが云々カンヌン言っとったな...
import {createContext} from 'react'
const AppContext = createContext()
export default AppContext
contextsディレクトリに置いたAppContext.jsをこう書いといて...
import AppContext from '../contexts/AppContext'
AppコンポーネントでAppContext.js読み込んで...
return (
<>
<AppContext.Provider value={{count,moge,muga}}>
<Fuga count={count} handleClick={() => setCount(count + 1)}/>
<Hoge moge={moge} muga={muga} />
</AppContext.Provider>
</>
)
returnの直下のDOMをProviderでラップして...
そのProviderにvalueとしてcountとmogeとmugaを渡す...
それから...
import React from 'react'
import AppContext from '../contexts/AppContext'
const Moge = () => {
return (
<p>
Moge :
<AppContext.Consumer>
{value => <> {value.moge}</>}
</AppContext.Consumer>
</p>
)
}
export default Moge
MogeコンポーネントでもAppContextを読み込んで...
こっちはConsumerを使う...
そしたら、Consumer中ではvalueのmogeが受け取れる...
import React from 'react'
import AppContext from '../contexts/AppContext'
const Muga = () => {
return (
<p>
Muga :
<AppContext.Consumer>
{ value => <> {value.muga}</> }
</AppContext.Consumer>
</p>
)
}
export default Muga
Mugaコンポーネントもおんなじようにして...
import React from 'react'
import Moge from './Moge'
import Muga from './Muga'
const Hoge = () => {
return (
<section>
<h1>MogeとMugaについて</h1>
<p>MogeはFugaより1大きく、MugaはMogaの3倍である。</p>
<Moge />
<Muga />
</section>
)
}
export default Hoge
これでHogeコンポーネントは無駄にmogeやらmugaやら受け取らんでもええようになったな...
できたな...
...
...
...
...
... でもなー
なんかなー...
<AppContext.Consumer>
{value => <> {value.moge}</>}
</AppContext.Consumer>
この部分なんかスッキリせえへんねんな...
他になんかないんかな...
また時間あるとき考えとこ...
＜ その日の晩 ＞
「maido...」
ん...?
またか？
だからだれやねん...
「useContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContext」
うゎぁぁぁぁぁーーーーーーー!!!!!!!!
＜ 次の日の朝 ＞
また変な夢やったな...
今回もなんか言っとったな...
えーと... なんやっけ...
useContextがなんちゃらかんちゃらやったかな...
import React, {useContext} from 'react'
import AppContext from '../contexts/AppContext'
const Moge = () => {
const value = useContext(AppContext)
return <p>Moge : {value.moge}</p>
}
export default Moge
reactからuseContextを読み込んで...
useContextの引数にappContextを渡してvalueを受け取る...
これでよし...
import React, {useContext} from 'react'
import AppContext from '../contexts/AppContext'
const Muga = () => {
const value = useContext(AppContext)
return <p> Muga : {value.muga} </p>
}
export default Muga
ほんでから、Mugaコンポーネントもおんなじように書く...
うん、こっちのほうが簡単で見やすいわ...
アイツええヤツやったな...
＜ おわり ＞
...そもそもFugaボタンってなんやねん！！！