- 1 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 21:29:27.97 ID:AJ6jPa0v.net]
- Q. Reactってなんですか？
A. ブラウザで動くウェブアプリを作るJavaScriptフレームワークです
Q. React使えば、iOSやAndroidアプリも作れるのですか？
A. 作れません。（ブラウザでなら動きます）
Q. でも動くってきいたんだけど？
A. それはReactではなくReact Nativeです。
Q. React と React Native は同じようなものじゃないの？
A. 設計思想が同じなだけで、中身は全くの別物です。
Q. React Nativeで作ればブラウザで動くの？
A. 動きません。（動くようにするサードパーティ製のライブラリならあります）
Q. React と React Native でソースコード共通化できるの？
A. UIの部分は共通化出来ません。UI以外の部分なら頑張れば
Q. このスレはどっちの話題のスレなの？
A. 両方です。どっちの話題をしているかは文脈で判断してください
- 185 名前：デフォルトの名無しさん mailto:sage [2021/09/30(木) 14:23:21.02 ID:uxDakMZz.net]
- 質問主はどう見ても>>157なんだから自作前提でよくて余計なことは省いた方がいいと思うね
- 186 名前：デフォルトの名無しさん mailto:sage [2021/10/03(日) 21:36:14.94 ID:9xTT9AKy.net]
- material-uiのspeed dialをネストしたいんだけど無理かな？speed dial actionの代わりにspeed dialそのものを子に持ちたい
- 187 名前：デフォルトの名無しさん [2021/10/19(火) 10:58:01.20 ID:I/uBXkGk.net]
- VSCodeでsassファイル保存時に自動フォーマット掛けたいですけどそれ出来る拡張ありますか？
- 188 名前：デフォルトの名無しさん [2021/10/20(水) 21:47:12.22 ID:VGECjsMp.net]
- >>187
marketplace.visualstudio.com/items?itemName=BdSoftware.format-on-auto-save
標準搭載してほしいわ
- 189 名前：デフォルトの名無しさん mailto:sage [2021/11/09(火) 10:45:02.06 ID:tf9NUtHx.net]
- イベントと副作用フックどっちでもいい時に、どちらを優先して使うほうがより良いとかってある？
keyを入力するテキスト入力欄、valueを表示するテキスト表示欄がある
keyが変化するとデータを鯖から取ってきてvalueに設定したい
副作用フックでkeyを監視するか、key入力欄の変更通知イベントを使うか、どっちでもいいけど、どちらかというとどっちが良いか？
- 190 名前：デフォルトの名無しさん mailto:sage [2021/11/09(火) 11:13:14.15 ID:ppTxKkYh.net]
- 入力欄の変更イベントで十分だろ
そしてuseDefferedValue経由の値でサーバを叩く
- 191 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 09:45:52.91 ID:gjeYELEc.net]
- 素朴な疑問
状態を持ったり副作用を持ったりするコンポーネントってぶっちゃけclassのほうが可読性いいよね？
フックは書く時は楽だけど後で見るとナンジャコラ？ってなる
- 192 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 10:40:45.63 ID:yi3gjxGP.net]
- >>112を読んでないってわかんだよね
- 193 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 11:55:31.75 ID:gjeYELEc.net]
- 例えばの話、コンポーネントの初期化処理と終了処理はどこでやるの？って新人の疑問に対して
classコンポーネントなら
見たまんまcomponentDidMount、componentWillUnmountだよ
このメソッドを用意しとくとこのコンポーネントを持って管理してるフレームワークさんが、
いい感じのタイミングで呼び出してくれるよ
こう教えてやれば、直感ですぐさまなるほど、と理解して貰える
しかし関数コンポーネントでは純粋関数とは何か、副作用とは何か、フックとは何か、useEffectとは何か、useEffectの引数は何か、引数の戻りの関数は何か
ということをよく理解して頭の中で読み替えないといけない
なのでじっくり時間をかけて教えても、それでも理解するには時間を要する
関数コンポーネントはこんなのが無数にある
だから理解しにくい
タイピングの文字数は減るので書くのは楽だ、ということは確かだが
理解しやすさで言うと、ちょっとね、、、
- 194 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 16:48:12.54 ID:QzSwOiy0.net]
- 宣言的なReactを命令的に読み替えるんじゃ永遠に理解できないだろうな
そういう教え方をされる新人がかわいそうだし同情しかない
- 195 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 20:00:29.63 ID:h3betjKK.net]
- reactでいくつかのファイルがあって保存(ctrl+s)すると
コンパイルしてくれるファイルとしてくれないファイルがあるんだけど違いってなんですか。。。
- 196 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 20:55:02.32 ID:Wtj2hevs.net]
- 使ってるide (vscodeとか) のスレで聞け
- 197 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 21:47:40.34 ID:h3+MjybB.net]
- >>193
クラスって何？メソッドって何？継承って何？
- 198 名前：デフォルトの名無しさん mailto:sage [2021/11/17(水) 22:25:06.52 ID:N4+deCyE.net]
- >>193
クラスだとマウント／アンマウントじゃなくてpropsが変わるたびに開始処理終了処理するってなると全然違うこと教えなきゃダメだろ
- 199 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 00:22:44.81 ID:3dlOBCKi.net]
- レアクトは宣言的だけど実用的なアプリケーションは全て有状態の手続きの塊じゃん？
ということはレアクトと「この不都合な現実世界」を上手いこと切り離して管理する方法が必要なんだよ
それがオブジェクト指向ってわけでね
関数コンポーネントは分離すべき手続きと宣言が渾然一体となっていてわかりにくい
オブジェクト指向を使えば
オブジェクトとオブジェクトを描画する純粋関数に分離することは容易い
それがrenderメソッドな訳だな
- 200 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 00:44:06.97 ID:aYAbIgl/.net]
- レアクト
- 201 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 00:47:56.13 ID:F8B2t3Oi.net]
- また知恵遅れクラス信者か
この流れ何度目だよw
- 202 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 01:15:46.87 ID:3dlOBCKi.net]
- 関数が優位に立つのはDOMのレンダリングだけ
状態管理と手続きという不可避の現実はオブジェクト指向で処理したほうがいい
関数は状態が無いものだけを扱うべき
- 203 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 07:26:11.67 ID:sAyjJzQx.net]
- 状態や手続きを分離する方法はオブジェクトだけじゃない
モナドもそれだしReactの場合は代数的作用が背景にある
- 204 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 07:56:21.14 ID:JMkvun5L.net]
- >>71辺りからの話を繰り返してるな
高々200しかレスがない過疎スレなんだから一通り読んでから書けばいいのに
- 205 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 08:07:20.27 ID:3dlOBCKi.net]
- >>203
できる、と、簡単にできる、は全く違うからなぁ
モナドもあるしとか言っても、それはオブジェクト指向の簡単さ、理解しやすさ、使いやすさには到底及ばないわけだよ
- 206 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 08:56:13.25 ID:O/tzCGdy.net]
- それってオブジェクト指向を学んでから進歩してませんって自己紹介にすぎなくてオブジェクト指向がしっくりこなかったstaticおじさんと同じなんだよな
- 207 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 10:18:03.07 ID:5if92K6E.net]
- 理解しやすさ簡単さはオブジェクト指向から学んできたおじさんと関数型から学んできた若者で違うから議論してもしゃーない
それよりReact18がベータになったことだしConcurrent Renderingを知るべき
そしたら行儀の悪いクラスコンポーネントがReactにとって不都合だとわかるし関数コンポーネントで行儀の悪いコードを書きにくくしてることもわかるだろう
- 208 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 10:23:00.26 ID:5if92K6E.net]
- Concurrent Renderingでは1回のレンダリングでrenderメソッドや関数コンポーネントが複数回呼ばれることが起こるようになる
いわゆる再レンダリングで複数回じゃなくて例えばdidMountが呼ばれる前にrenderが何度も呼ばれることが起きるようになる
だからrenderメソッドの中でthis.xxxを更新するなどの副作用があると破綻する
それは元々やるべきことじゃなくて行儀か悪いだけなんだがクラスコンポーネントでは書こうと思えば簡単に書けてしまう
そういうバグを検出するために前から用意されてたのがStrictモードだがあまり使われてるのを見たことはないな
クラスコンポーネントだとthis.stateはthis.setStatateを通じてReactが管理してるがその他はクラスコンポーネント任せで野放しになってるのがReact側から見た問題
そこで導入されたのが関数コンポーネントで状態や副作用の扱いが制限されて簡単に見えないのは意図的なんだよね
- 209 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 10:29:08.68 ID:5if92K6E.net]
- 将来のReactではマウント・アンマウントも複数回行われるようになる
これもコンポーネントのインスタンスが変わる場合の話じゃなくて一つのコンポーネントインスタンスが何度もマウント・アンマウントを繰り返すようになる
クラスコンポーネントではdidMount/willUnmountか同じthisの上で何度も呼ばれることになるんだろう
だから従来のライフサイクルという考え方だと破綻する
useEffectは以前からライフサイクルと考えてはいけないと言われてるしそのためにuseEffectのコールバックは冪等にすべきという原則もある
React18ではそれによって起きる問題を検出するためにStrict Effectモードが増える
こうなるとuseEffectを従来の初期化処理・終了処理に読み替えて理解させるのは単純に間違いということになる
どちらが理解しやすいかという次元の話じゃないんだよね
- 210 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 13:11:55.12 ID:3dlOBCKi.net]
- それはuseStateを使うかlet変数宣言を使うかってのと同じこと
行儀の悪いコードはファンクショナルでも好きなだけ書ける
ようするにプログラマの腕とモラルの問題
ファンクショナルがクラスに対して優位と示す証拠ではないな
Reactが将来のバージョンアップでライフタイムサイクルの仕様変更となるなら
新しいライフタイムサイクルに適応したライフタイムサイクルメソッドを設ければいいだけ
そしてその方がuseEffectより遥かに直感的で理解しやすくなるだろう
実際どんな名称になるかはレアクトマニアでない俺は知らんがおそらくは
initializeComponent
componentDidMount
componentWillUnmount
disposeComponent
この辺りだろう
なんてわかりやすいんだ！
そもそも仕様変更されるからファンクショナルのほうがいいんだーって論理破綻しとるよな
仕様変更されたらそれに合わせてクラスコンポーネントも進化するのが当たり前
進化しないならそれはベンダーの怠慢
- 211 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 14:18:18.92 ID:I+5yMFIL.net]
- ライフサイクルが変わってもuseEffectは影響を受けない
なぜならライフサイクルを扱う機能ではないから
ライフサイクルという考え方そのものを改めたのが今の関数コンポーネントとhookなんだよ
だからライフサイクルメソッドを増やせばいいなんて話ではないんだが伝わらないんだろうなw
まぁ、取り残されたければそれでいいんじゃない？
ここで吠えてもReactチームがクラスコンポーネントを進化させることはないよ
本気で主張したけりゃここに行きな
https://github.com/reactwg/react-18/discussions
- 212 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 15:19:55.65 ID:3dlOBCKi.net]
- 本来ライフサイクルメソッドではないuseEffectを、ライフサイクル目的で使わざるを得ない、という状況が非常にバッドだよねぇ
APIの目的外利用ってバッドノウハウとか、黒魔術って呼ばれてるものだよ
最近はそういうの随分と減ったと思ったけど、ファンクショナルコンポーネントでは現役なんだなぁ
useEffectはライフサイクルじゃない！ってんなら
useInitializer
useFainalizer
この２つのフックはオフィシャルに提供した方がいいだろね
それをしないというのはベンダーの怠慢でしかないよ
そうすれば、useEffectの第二引数に謎の空配列を渡すと、お掃除する時にだけ呼ばれます！
なーんて回りくどい、明快さのかけらもない、暗黙の了解はもう、要らなくなるわけだ
冷静に考えてわかりにくいだろ？ 空配列ってさ
- 213 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 16:20:58.58 ID:yPpHDEE/.net]
- 本当に化石のような石頭だな
現場でもさぞかし迷惑な存在だろう
ライフサイクルって考え方をしないんだからuseInitializerもuseFainalizerも不要なんだよ
間違った理解
コンポーネントがマウントされたら一度だけxxを実行する
コンポーネントがアンマウントされたら一度だけyyを実行する
(やや)正しい理解
コンポーネントがマウントされてる間はzzの状態を維持する
zzの状態ってのはイベントをリッスンしてる状態とかwebsocketをサブスクイブしてる状態とか色々
useEffectのコールバックがそういう「状態を維持する」ものって考えると必然的に冪等にしなきゃいけなくなりConcurrent Renderingで繰り返し呼ばれても大丈夫になる
実際はマウントされてる間とかってのをもっと一般化して
正しい理解
依存配列が変わらない間は状態を維持する
と考える
空配列は変わりようがないから結果的にマウントしてる間はずっと状態を維持するってことになる
だからね、ライフサイクルって考え方がもはや不要で間違ってるんだよ
いつまでも古い考えに固執しないでちゃんと勉強して？
- 214 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 16:43:19.19 ID:3dlOBCKi.net]
- >>213
で、それは手続きだらけの現実世界には対処不能、と
ファンクショナル界隈の連中って、なんでか理想論ばっかなんだよなぁ
コンポーネント初期化時に一回、何か処理をしたい、って自然な要求に直接答える術がない
useEffectという本来違う目的のためにあるものを、使うしかない
これがファンクショナルの限界
例えばコンポーネント初期化時にログを追記したい、とかな
「状態維持する」って考えじゃ実現できねえ処理なんざ、世の中にはいくらでもあるんだ
- 215 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 17:09:36.68 ID:tb6GSOae.net]
- ファンクショナルの限界じゃなくてお前の限界な
- 216 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 18:20:41.19 ID:te8WLqUU.net]
- うわあ・・・
ID:3dlOBCKi
ttp://hissi.org/read.php/tech/20211118/M2RsT0JDS2k.html
- 217 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 18:34:14.46 ID:3dlOBCKi.net]
- >>215
いや、ファンクショナルの限界
ファンクショナルでは本来の目的から外れた使い方をしなければない
初回だけ処理したいだけなのに、状態を維持するファンクションを強要される
- 218 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 19:03:14.82 ID:wacBz6NM.net]
- 使う人が増えると残念な人も増えるいつもの光景
- 219 名前：デフォルトの名無しさん mailto:sage [2021/11/18(木) 22:26:22.51 ID:fTWvydC+.net]
- こういう残念な人が出てくるのは公式サイトのドキュメンが悪いせいもある
元がクラスコンポーネント時代に作られてhooksは後付だからuseEffectがライフサイクルで説明されてしまってる
作り直してる新しいドキュメントでは最初からhooksで説明されるから勘違いおじさんが撲滅されるといいな
- 220 名前：デフォルトの名無しさん mailto:sage [2021/11/19(金) 09:42:11.48 ID:J0mGbVeO.net]
- >>196
webpack-dev-server知らんのは流石に論外やろ
- 221 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 14:16:11.00 ID:knw1x1gk.net]
- 関数型のテクニックを使ってるってだけで、やってることはただのオブジェクト指向なんだよな
所詮は構文の違いでしかない
属性を使うかuseStateを使うか
Reactにコールバックをどうやって教えるか
それだけだ
オブジェクト指向ユーザーは、素直にクラスを使ってそれを実装する
関数型ユーザーはやってること同じなんだが、イキがってフックとか使いだして、読み手を混乱させる
JavaScriptの黎明期にプロトタイプベースのオブジェクト指向を使うか、クロージャベースのオブジェクト指向を使うかで揉めてたのと、同じ構図だ
クロージャは関数型で発展したツールだが、実現したい事は結局、どっちもオブジェクト指向だった
- 222 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 17:48:46.47 ID:UWSF5n1L.net]
- お前がそう思うんならそうなんだろう お前ん中ではな
- 223 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 17:55:48.39 ID:Wm1mwUDt.net]
- オブジェクト指向のテクニックを使ってるだけでやってることはただの構造化なんだよな
所詮は構文の違いでしかない
こうですか
最後は全部ただの機械語ですしね！
- 224 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 20:40:46.53 ID:1yBKup76.net]
- 例えばさ、
ちょっと複雑なコンポーネントを作ろうぜ、ってなったら、誰だってプログラムを分割するだろう？
function useMyForm () {
// 略::フックを使った汚いコード
return { /* 美しいオブジェクト */ }
}
function MyForm () {
const f = useMyForm()
return <…..略
}
useMyFormは何をやってるかというと、reactのフックを使った汚いコードを隠蔽して、
代わりにエレガントな形を持ったオブジェクトを生成して返してるんだね
詳細をカプセル化して、外から見て美しいオブジェクトを作る
これはオブジェクト指向の基本にして、真髄
ファンクショナルのツールを使ってるだけで、やってることはオブジェクト指向、とはこういうこと
それで、賢い人はこの匿名のオブジェクトに名前を付けて、さらに理解を助けるわけだ
例えばclass MyFormBehaivorとかね
で、MyFormはMyFormBehaviorを継承してrenderを付けるだけ、だな、とすぐに気付く筈だね
結局さ、同じなんだよ、やってることが
同じなら、見た目に読みやすい方がいいに決まってる
で、読みやすいのは断然、オブジェクト指向
QED
- 225 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 20:55:13.47 ID:SJq+O3t2.net]
- しつこい
- 226 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 21:04:01.25 ID:5qd0Nwtv.net]
- ふむ、反論ができなくなったのかな？
- 227 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 21:16:31.74 ID:zzbPLRQo.net]
- 石頭の老害相手に反論しても無駄
- 228 名前：デフォルトの名無しさん mailto:sage [2021/11/21(日) 22:35:19.11 ID:UWSF5n1L.net]
- 馬鹿は論破できない
- 229 名前：デフォルトの名無しさん mailto:sage [2021/11/22(月) 10:00:05.25 ID:HTg16b0P.net]
- 今どきfunctionって書くか？
- 230 名前：デフォルトの名無しさん mailto:sage [2021/11/22(月) 14:12:56.45 ID:yxcpONXb.net]
- 書かない
- 231 名前：デフォルトの名無しさん mailto:sage [2021/12/03(金) 10:05:55.29 ID:OvhoAu9V.net]
- ボタン連打するけしからん奴対策の定番ライブラリ教えてよ
送信フラグ管理はもう疲れた
あ、いちおクロスプラットフォームのライブラリでヨロ
- 232 名前：デフォルトの名無しさん mailto:sage [2021/12/03(金) 16:35:10.63 ID:ZR9gqQ7Z.net]
- ボタン押下で実行されるのをステートの値をtrueにするのみのsetAnyState(true)とかにして
実処理を
useEffect(()=>{if(anyState){
// 実際したい処理
setAnyState(false)
}},[anyState])
にしとけば連打されても大丈夫じゃね？
- 233 名前：デフォルトの名無しさん mailto:sage [2021/12/03(金) 18:25:47.16 ID:C14FVshC.net]
- ボタンが押されたらボタンをdisabledにすればいいじゃん
- 234 名前：デフォルトの名無しさん mailto:sage [2021/12/03(金) 19:41:18.43 ID:L4TUqIiQ.net]
- わろた
- 235 名前：デフォルトの名無しさん mailto:sage [2021/12/03(金) 19:41:36.25 ID:50htZSL3.net]
- それだとめっちゃ高速にダブルクリックした場合多分イベント2回来る場合ある
- 236 名前：デフォルトの名無しさん mailto:sage [2021/12/03(金) 20:19:23.32 ID:mMKMUGdN.net]
- JavaScriptはシングルスレッド
- 237 名前：デフォルトの名無しさん mailto:sage [2021/12/06(月) 19:49:21.16 ID:56/uA2M5.net]
- 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には直接アクセスできない
- 238 名前：デフォルトの名無しさん mailto:sage [2021/12/06(月) 20:06:59.76 ID:4QzxG6KH.net]
- useMyEffectもuseMyHookでやるべきじゃねーの
それができないならuseMyEffectを
foo: useCallback(() => a+b, [a, b]),
bar: useCallback(() => a-b, [a, b])
とすれば[???]は
[myhook.foo, myhook.bar]
- 239 名前：デフォルトの名無しさん mailto:sage [2021/12/06(月) 20:07:50.83 ID:4QzxG6KH.net]
- とりあえずこれ読んどけ
https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/
- 240 名前：デフォルトの名無しさん mailto:sage [2021/12/06(月) 20:11:27.69 ID:4QzxG6KH.net]
- >>238
1行目訂正
useEffectもuseMyHookでやるべきじゃねーの
- 241 名前：デフォルトの名無しさん mailto:sage [2021/12/06(月) 22:16:00.54 ID:zN0DCcOz.net]
- >>238
thank you.
- 242 名前：デフォルトの名無しさん mailto:sage [2021/12/08(水) 14:16:37.56 ID:/W89KInL.net]
- function MyComp () {
const vm = useMyCompViewModel();
return <略 />;
}
MyCompのユニットテストする時ってどうしてる？
つまりuseMyCompViewModelをインジェクトしたい時
- 243 名前：デフォルトの名無しさん mailto:sage [2021/12/08(水) 15:51:56.43 ID:5zVi58LJ.net]
- https://github.com/testing-library/react-hooks-testing-library
- 244 名前：デフォルトの名無しさん mailto:sage [2021/12/08(水) 19:22:47.15 ID:/W89KInL.net]
- >>243
㌧
でもこれフックのテスト用なのでは？
そうじゃなくフックをモック化してコンポーネントをテストしたい
- 245 名前：デフォルトの名無しさん mailto:sage [2021/12/08(水) 21:33:33.67 ID:Rfcvtfm3.net]
- テストだけならこんなんで十分じゃね
function MyComp (props) {
const useViewModel = props.useMyCompViewModel || useMyCompViewModel
const vm = useViewModel();
return <略 />;
}
- 246 名前：デフォルトの名無しさん mailto:sage [2021/12/08(水) 21:48:07.68 ID:lkzI+wPD.net]
- 経年劣化に耐える ReactComponent の書き方
https://zenn.dev/takepepe/articles/howto-withstand-aging-react-component
- 247 名前：デフォルトの名無しさん mailto:sage [2021/12/08(水) 22:23:21.01 ID:SYjhTw/G.net]
- >>245
なるぼどなぁ
これで少しやってみよかな
- 248 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 11:45:52.40 ID:zttGewLv.net]
- サードパーティコンポーネントが状態や副作用を持っているがこれを除去してステートレスにしたい
どうすればいい？ソースコードを書き換えるのは無しで
- 249 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 11:52:28.47 ID:GrxR7SwR.net]
- プルリクエスト
- 250 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 12:05:31.62 ID:zttGewLv.net]
- function IWantEasyTestableComponent(props) {
return (<View>
<FackingStatefullComponent foo={props.foo} />
<MyAwesomeStatelessComponent {…props} />
</View>);
}
こういうの、どうすりゃいいんだ？
野良ライブラリはどれもこれもアマチュアが好き勝手作ってるから、利便性はともかく品質のムラが大きすぎる
できれば使いたく無いが、使う前提で予算と工程を組まれる
オープンソースのダークサイドやね
- 251 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 12:21:22.59 ID:GrxR7SwR.net]
- jest.mock('path/to/FackingStatefullComponent')
- 252 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 12:27:06.61 ID:RI4P88iz.net]
- >>251
ソースコードの書き換えとどう違うんだそれ？
- 253 名前：デフォルトの名無しさん mailto:sage [2021/12/11(土) 12:44:03.50 ID:g9v4y15i.net]
- 依存関係をインターフェース等で明示的に分離してインジェクションするポイントを作るという考え方ではなく
モジュール自体を上書きしてしまうことで無理やりインジェクションするということか
違和感が強いがこれがJavaScriptの文化と思って受け入れるしかないか
- 254 名前：デフォルトの名無しさん mailto:sage [2021/12/12(日) 21:59:15.39 ID:wsjthnMX.net]
- LogBox邪魔すぎる
機能OFFにできんのかコレ
- 255 名前：デフォルトの名無しさん mailto:sage [2021/12/20(月) 09:27:19.20 ID:vskoYLeQ.net]
- 状態、副作用は親コンポーネントに持たせるべきか
子コンポーネントに持たせるべきか
- 256 名前：デフォルトの名無しさん mailto:sage [2021/12/20(月) 17:18:10.57 ID:hUMHHR9z.net]
- コンポーネントの用途に依る
基本的にはコンポーネントで独立してる方がいいと思う
ちゃんと精査すれば全体で管理しなきゃいけない状態ってそんなに多くないはず
- 257 名前：デフォルトの名無しさん mailto:sage [2021/12/20(月) 18:51:15.00 ID:DVSwWolF.net]
- 以前は
親(コンテナ)コンポーネントで状態管理
子(プレゼンテーショナル)コンポーネントは表示だけ
ってのが流行ってたが廃れたな
再レンダリングが発生しやすいせいかな
- 258 名前：デフォルトの名無しさん mailto:sage [2021/12/21(火) 15:04:20.98 ID:2tghIxun.net]
- まあケースバイケースになるか
そこそこ複雑な入力ページなんだけど
親に状態を持たせると不定個数の状態の扱いがやりにくい
子に状態を持たせると親への通知がやりにくい
どっちでやってもスッキリしない
- 259 名前：デフォルトの名無しさん mailto:sage [2021/12/21(火) 15:13:11.31 ID:YHqQ6+Ts.net]
- 入力フォームなら素直にreact-hook-form使え
- 260 名前：デフォルトの名無しさん mailto:sage [2021/12/21(火) 15:40:04.62 ID:ESVu6HO8.net]
- ほぉん
なかなか便利そう
どこまで複雑な入力ページに耐えられるか気になるところだけど
単純なフォームならこれで良さそうだ
- 261 名前：デフォルトの名無しさん mailto:sage [2021/12/29(水) 00:29:54.67 ID:ceh8LJAo.net]
- React完全に理解したがパフォーマンスの上げ方がわからねえ
- 262 名前：デフォルトの名無しさん mailto:sage [2021/12/29(水) 00:50:07.29 ID:b+BxW/Al.net]
- >>261
理解出来てねーーじゃん！
- 263 名前：デフォルトの名無しさん mailto:sage [2021/12/29(水) 01:49:18.73 ID:CcYJF9F8.net]
- 完全に理解した＝何もわからんだからな
チョットでかる＝世界一わかってるだし
- 264 名前：デフォルトの名無しさん mailto:sage [2022/01/04(火) 12:28:56.67 ID:LToZWYYj.net]
- ブラウザデバッガで見て出てるエラー消すところからかな
あとreact-router使わんとページ遷移の度にDOM読み直しとかも効率悪い事この上ない
- 265 名前：デフォルトの名無しさん mailto:sage [2022/01/05(水) 12:38:15.54 ID:1AqA60VG.net]
- Reactの優れたイディオム、デザインパターンまとめたサイト、書籍、教えてよ
- 266 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 14:30:52.75 ID:YbeZmiIg.net]
- react nativeのパーツかわからないんですけど
画面の下から出てくるダイアログってどのモジュールを使えばいいんでしょう？
ttps://i.imgur.com/FuvGKCx.jpg
- 267 名前：デフォルトの名無しさん [2022/01/20(木) 19:51:41.70 ID:fJA5C2IK.net]
- reduxでプレーンな只の関数でstate参照したい時ってどうすれば良いの？
reducersでもactionsでも無いから直接stateは見えない。コンポーネントじゃ無いから
store.subscribeもuseSelectorも出来ないgetState()もない。
やりたいことは、Webの初期表示でstate.env{}の中にブラウザの種類・バージョンとかOSの種類とか入れてるけどそれを単純に参照する関数が書けない
stateはreadOnlyで更新しないから見えればOK
export const seeStateAndDoSomething() {
const { env } = getState() ; // これは出来ないけどコレっぽい処理したい
if ( env.browser == 'firefox' ) {
...何かの処理
} else if ( env.browser == 'chrome' ) {
}
);
どうすりゃ良いの？おそえて。
- 268 名前：デフォルトの名無しさん mailto:sage [2022/01/20(木) 19:58:21.41 ID:dHw5M9GX.net]
- store.getState()
- 269 名前：デフォルトの名無しさん [2022/01/22(土) 01:00:33.62 ID:Q6mU4pBx.net]
- React Nativeはオワコンらしいですが
Reactは使う価値ありますか？
教えてエロい人
- 270 名前：デフォルトの名無しさん mailto:sage [2022/01/22(土) 01:02:15.28 ID:VcaTUFKD.net]
- >>269
自分で見極められないの？
- 271 名前：デフォルトの名無しさん mailto:sage [2022/01/22(土) 01:17:25.20 ID:Q6mU4pBx.net]
- >>270
すいません。
パソコン初心者です。
アドバイスお願いします。
- 272 名前：デフォルトの名無しさん mailto:sage [2022/01/22(土) 01:19:22.91 ID:NdDHIpih.net]
- 初心者はやめておいた方が良いです
- 273 名前：デフォルトの名無しさん mailto:sage [2022/01/22(土) 01:25:12.66 ID:Q6mU4pBx.net]
- これから勉強するならFlutterの方がいいですか？
- 274 名前：デフォルトの名無しさん mailto:sage [2022/01/22(土) 10:04:33.20 ID:Z1IOsfXg.net]
- シカトっすか？
- 275 名前：デフォルトの名無しさん mailto:sage [2022/01/22(土) 11:17:22.76 ID:N7C2miyW.net]
- まず上級者になることをおすすめします
- 276 名前：デフォルトの名無しさん [2022/01/23(日) 11:01:19.74 ID:5zqw2dvO.net]
- create-react-appで、npm run buildしたのですが
manifest.jsonのみがbuildフォルダーにコピーされないです・・・
回避方法ないでしょうか？
- 277 名前：デフォルトの名無しさん [2022/01/23(日) 11:08:40.96 ID:5zqw2dvO.net]
- >>276
解決しました！失礼しました・・・。
- 278 名前：デフォルトの名無しさん [2022/01/26(水) 10:48:59.57 ID:PJmPV3+3.net]
- Reduxのストアにクラスっぽいオブジェクト（プロパティ＋関数）入れようとしたら
non-serialize objectがどうのこうのとエラーになった。
そもそも何でシリアライズなんかやろうとするんだ？
- 279 名前：デフォルトの名無しさん mailto:sage [2022/01/26(水) 10:59:34.07 ID:0H2oAMTN.net]
- 不変性を担保するためじゃね
- 280 名前：デフォルトの名無しさん [2022/01/26(水) 11:35:00.62 ID:SY+BWxpR.net]
- なんかもっと決定的な感じのフレームワーク出ないのエロい人？
- 281 名前：デフォルトの名無しさん [2022/01/26(水) 17:40:44.17 ID:kU7cNmd7.net]
- >>279
別にそんなもん担保する必要ないだろ。
- 282 名前：デフォルトの名無しさん mailto:sage [2022/01/26(水) 18:01:16.43 ID:+qGThwTi.net]
- reduxの根本が不変性をベースにしてるんだが
でないとシャロー比較とか成り立たない
たいして有用じゃないがタイムトラベルも不変性前提の機能
そのへんちゃんと理解してから使った方がいいよ
- 283 名前：デフォルトの名無しさん [2022/01/27(木) 00:56:59.89 ID:58xO6kDn.net]
- そんなどうでも良い概念を使用者全員に押し付けて来んなよ。
単にreactでアプリをリプレイスで作ったら状態がコンポーネント単位で持たれて、
アプリ単位で持ちたいな、と考えたらReduxが一番人気だよって事で採用しただけだ。
不変性?(w) プログラムが変数に余計な変更加えなければ何もしなくても担保されてるだろｗ
- 284 名前：デフォルトの名無しさん mailto:sage [2022/01/27(木) 01:06:46.42 ID:oXQnXbb3.net]
- ダメだこいつ…
- 285 名前：デフォルトの名無しさん [2022/01/27(木) 01:39:30.37 ID:58xO6kDn.net]
- 何故それが必要と思うのか説明して見ろよｗ
|
 |
