React と React Native のスレ (481ﾚｽ)
上下前次1-新
210: 2021/11/18(木)15:19 ID:3dlOBCKi(5/7) AAS
本来ライフサイクルメソッドではないuseEffectを、ライフサイクル目的で使わざるを得ない、という状況が非常にバッドだよねぇ
APIの目的外利用ってバッドノウハウとか、黒魔術って呼ばれてるものだよ
最近はそういうの随分と減ったと思ったけど、ファンクショナルコンポーネントでは現役なんだなぁ
useEffectはライフサイクルじゃない！ってんなら
useInitializer
useFainalizer
この２つのフックはオフィシャルに提供した方がいいだろね
それをしないというのはベンダーの怠慢でしかないよ
そうすれば、useEffectの第二引数に謎の空配列を渡すと、お掃除する時にだけ呼ばれます！
なーんて回りくどい、明快さのかけらもない、暗黙の了解はもう、要らなくなるわけだ
冷静に考えてわかりにくいだろ？ 空配列ってさ
211(1): 2021/11/18(木)16:20 ID:yPpHDEE/(1) AAS
本当に化石のような石頭だな
現場でもさぞかし迷惑な存在だろう
ライフサイクルって考え方をしないんだからuseInitializerもuseFainalizerも不要なんだよ
間違った理解
コンポーネントがマウントされたら一度だけxxを実行する
コンポーネントがアンマウントされたら一度だけyyを実行する
(やや)正しい理解
コンポーネントがマウントされてる間はzzの状態を維持する
zzの状態ってのはイベントをリッスンしてる状態とかwebsocketをサブスクイブしてる状態とか色々
useEffectのコールバックがそういう「状態を維持する」ものって考えると必然的に冪等にしなきゃいけなくなりConcurrent Renderingで繰り返し呼ばれても大丈夫になる
実際はマウントされてる間とかってのをもっと一般化して
正しい理解
依存配列が変わらない間は状態を維持する
と考える
空配列は変わりようがないから結果的にマウントしてる間はずっと状態を維持するってことになる
だからね、ライフサイクルって考え方がもはや不要で間違ってるんだよ
いつまでも古い考えに固執しないでちゃんと勉強して？
212: 2021/11/18(木)16:43 ID:3dlOBCKi(6/7) AAS
>>211
で、それは手続きだらけの現実世界には対処不能、と
ファンクショナル界隈の連中って、なんでか理想論ばっかなんだよなぁ
コンポーネント初期化時に一回、何か処理をしたい、って自然な要求に直接答える術がない
useEffectという本来違う目的のためにあるものを、使うしかない
これがファンクショナルの限界
例えばコンポーネント初期化時にログを追記したい、とかな
「状態維持する」って考えじゃ実現できねえ処理なんざ、世の中にはいくらでもあるんだ
213(1): 2021/11/18(木)17:09 ID:tb6GSOae(1) AAS
ファンクショナルの限界じゃなくてお前の限界な
214: 2021/11/18(木)18:20 ID:te8WLqUU(1) AAS
うわあ・・・
ID:3dlOBCKi
外部ﾘﾝｸ[html]:hissi.org
215: 2021/11/18(木)18:34 ID:3dlOBCKi(7/7) AAS
>>213
いや、ファンクショナルの限界
ファンクショナルでは本来の目的から外れた使い方をしなければない
初回だけ処理したいだけなのに、状態を維持するファンクションを強要される
216: 2021/11/18(木)19:03 ID:wacBz6NM(1) AAS
使う人が増えると残念な人も増えるいつもの光景
217: 2021/11/18(木)22:26 ID:fTWvydC+(1) AAS
こういう残念な人が出てくるのは公式サイトのドキュメンが悪いせいもある
元がクラスコンポーネント時代に作られてhooksは後付だからuseEffectがライフサイクルで説明されてしまってる
作り直してる新しいドキュメントでは最初からhooksで説明されるから勘違いおじさんが撲滅されるといいな
218: 2021/11/19(金)09:42 ID:J0mGbVeO(1) AAS
>>194
webpack-dev-server知らんのは流石に論外やろ
219: 2021/11/21(日)14:16 ID:knw1x1gk(1) AAS
関数型のテクニックを使ってるってだけで、やってることはただのオブジェクト指向なんだよな
所詮は構文の違いでしかない
属性を使うかuseStateを使うか
Reactにコールバックをどうやって教えるか
それだけだ
オブジェクト指向ユーザーは、素直にクラスを使ってそれを実装する
関数型ユーザーはやってること同じなんだが、イキがってフックとか使いだして、読み手を混乱させる
JavaScriptの黎明期にプロトタイプベースのオブジェクト指向を使うか、クロージャベースのオブジェクト指向を使うかで揉めてたのと、同じ構図だ
クロージャは関数型で発展したツールだが、実現したい事は結局、どっちもオブジェクト指向だった
220: 2021/11/21(日)17:48 ID:UWSF5n1L(1/2) AAS
お前がそう思うんならそうなんだろう お前ん中ではな
221: 2021/11/21(日)17:55 ID:Wm1mwUDt(1) AAS
オブジェクト指向のテクニックを使ってるだけでやってることはただの構造化なんだよな
所詮は構文の違いでしかない
こうですか
最後は全部ただの機械語ですしね！
222: 2021/11/21(日)20:40 ID:1yBKup76(1) AAS
例えばさ、
ちょっと複雑なコンポーネントを作ろうぜ、ってなったら、誰だってプログラムを分割するだろう？
function useMyForm () {
// 略::フックを使った汚いコード
return { /* 美しいオブジェクト */ }
}
function MyForm () {
const f = useMyForm()
return <…..略
}
useMyFormは何をやってるかというと、reactのフックを使った汚いコードを隠蔽して、
代わりにエレガントな形を持ったオブジェクトを生成して返してるんだね
詳細をカプセル化して、外から見て美しいオブジェクトを作る
これはオブジェクト指向の基本にして、真髄
ファンクショナルのツールを使ってるだけで、やってることはオブジェクト指向、とはこういうこと
それで、賢い人はこの匿名のオブジェクトに名前を付けて、さらに理解を助けるわけだ
例えばclass MyFormBehaivorとかね
で、MyFormはMyFormBehaviorを継承してrenderを付けるだけ、だな、とすぐに気付く筈だね
結局さ、同じなんだよ、やってることが
同じなら、見た目に読みやすい方がいいに決まってる
で、読みやすいのは断然、オブジェクト指向
QED
223: 2021/11/21(日)20:55 ID:SJq+O3t2(1) AAS
しつこい
224: 2021/11/21(日)21:04 ID:5qd0Nwtv(1) AAS
ふむ、反論ができなくなったのかな？
225: 2021/11/21(日)21:16 ID:zzbPLRQo(1) AAS
石頭の老害相手に反論しても無駄
226: 2021/11/21(日)22:35 ID:UWSF5n1L(2/2) AAS
馬鹿は論破できない
227: 2021/11/22(月)10:00 ID:HTg16b0P(1) AAS
今どきfunctionって書くか？
228: 2021/11/22(月)14:12 ID:yxcpONXb(1) AAS
書かない
229: 2021/12/03(金)10:05 ID:OvhoAu9V(1) AAS
ボタン連打するけしからん奴対策の定番ライブラリ教えてよ
送信フラグ管理はもう疲れた
あ、いちおクロスプラットフォームのライブラリでヨロ
230: 2021/12/03(金)16:35 ID:ZR9gqQ7Z(1) AAS
ボタン押下で実行されるのをステートの値をtrueにするのみのsetAnyState(true)とかにして
実処理を
useEffect(()=>{if(anyState){
// 実際したい処理
setAnyState(false)
}},[anyState])
にしとけば連打されても大丈夫じゃね？
231: 2021/12/03(金)18:25 ID:C14FVshC(1) AAS
ボタンが押されたらボタンをdisabledにすればいいじゃん
232: 2021/12/03(金)19:41 ID:L4TUqIiQ(1) AAS
わろた
233: 2021/12/03(金)19:41 ID:50htZSL3(1) AAS
それだとめっちゃ高速にダブルクリックした場合多分イベント2回来る場合ある
234: 2021/12/03(金)20:19 ID:mMKMUGdN(1) AAS
JavaScriptはシングルスレッド
235: 2021/12/06(月)19:49 ID:56/uA2M5(1) AAS
function useMyHook() {
const [a, setA] = useState(0);
const [b, setB] = useState(0);
return {
foo: () => a+b,
bar: () => a-b,
};
}
function MyComp () {
const myhook = useMyHook();
useEffect(() => {
if (myhook.foo() > 100 && myhook.bar() < 20)
hoge();
}
}, [???]);
return <Aaaaa />;
???はどう書くのが正解？
推移的に依存してるのはa, bだがa、bには直接アクセスできない
236(2): 2021/12/06(月)20:06 ID:4QzxG6KH(1/3) AAS
useMyEffectもuseMyHookでやるべきじゃねーの
それができないならuseMyEffectを
foo: useCallback(() => a+b, [a, b]),
bar: useCallback(() => a-b, [a, b])
とすれば[???]は
[myhook.foo, myhook.bar]
237: 2021/12/06(月)20:07 ID:4QzxG6KH(2/3) AAS
とりあえずこれ読んどけ
外部ﾘﾝｸ:blog.uhy.ooo
238: 2021/12/06(月)20:11 ID:4QzxG6KH(3/3) AAS
>>236
1行目訂正
useEffectもuseMyHookでやるべきじゃねーの
239: 2021/12/06(月)22:16 ID:zN0DCcOz(1) AAS
>>236
thank you.
上下前次1-新書関写板覧索設栞歴
あと 242 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.010s