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. 両方です。どっちの話題をしているかは文脈で判断してください
React と React Native のスレ
2019/03/09(土) 21:29:27.97ID:AJ6jPa0v
199デフォルトの名無しさん
2021/11/18(木) 00:47:56.13ID:F8B2t3Oi また知恵遅れクラス信者か
この流れ何度目だよw
この流れ何度目だよw
200デフォルトの名無しさん
2021/11/18(木) 01:15:46.87ID:3dlOBCKi 関数が優位に立つのはDOMのレンダリングだけ
状態管理と手続きという不可避の現実はオブジェクト指向で処理したほうがいい
関数は状態が無いものだけを扱うべき
状態管理と手続きという不可避の現実はオブジェクト指向で処理したほうがいい
関数は状態が無いものだけを扱うべき
201デフォルトの名無しさん
2021/11/18(木) 07:26:11.67ID:sAyjJzQx 状態や手続きを分離する方法はオブジェクトだけじゃない
モナドもそれだしReactの場合は代数的作用が背景にある
モナドもそれだしReactの場合は代数的作用が背景にある
202デフォルトの名無しさん
2021/11/18(木) 07:56:21.14ID:JMkvun5L >>70辺りからの話を繰り返してるな
高々200しかレスがない過疎スレなんだから一通り読んでから書けばいいのに
高々200しかレスがない過疎スレなんだから一通り読んでから書けばいいのに
203デフォルトの名無しさん
2021/11/18(木) 08:07:20.27ID:3dlOBCKi204デフォルトの名無しさん
2021/11/18(木) 08:56:13.25ID:O/tzCGdy それってオブジェクト指向を学んでから進歩してませんって自己紹介にすぎなくてオブジェクト指向がしっくりこなかったstaticおじさんと同じなんだよな
205デフォルトの名無しさん
2021/11/18(木) 10:18:03.07ID:5if92K6E 理解しやすさ簡単さはオブジェクト指向から学んできたおじさんと関数型から学んできた若者で違うから議論してもしゃーない
それよりReact18がベータになったことだしConcurrent Renderingを知るべき
そしたら行儀の悪いクラスコンポーネントがReactにとって不都合だとわかるし関数コンポーネントで行儀の悪いコードを書きにくくしてることもわかるだろう
それよりReact18がベータになったことだしConcurrent Renderingを知るべき
そしたら行儀の悪いクラスコンポーネントがReactにとって不都合だとわかるし関数コンポーネントで行儀の悪いコードを書きにくくしてることもわかるだろう
206デフォルトの名無しさん
2021/11/18(木) 10:23:00.26ID:5if92K6E Concurrent Renderingでは1回のレンダリングでrenderメソッドや関数コンポーネントが複数回呼ばれることが起こるようになる
いわゆる再レンダリングで複数回じゃなくて例えばdidMountが呼ばれる前にrenderが何度も呼ばれることが起きるようになる
だからrenderメソッドの中でthis.xxxを更新するなどの副作用があると破綻する
それは元々やるべきことじゃなくて行儀か悪いだけなんだがクラスコンポーネントでは書こうと思えば簡単に書けてしまう
そういうバグを検出するために前から用意されてたのがStrictモードだがあまり使われてるのを見たことはないな
クラスコンポーネントだとthis.stateはthis.setStatateを通じてReactが管理してるがその他はクラスコンポーネント任せで野放しになってるのがReact側から見た問題
そこで導入されたのが関数コンポーネントで状態や副作用の扱いが制限されて簡単に見えないのは意図的なんだよね
いわゆる再レンダリングで複数回じゃなくて例えばdidMountが呼ばれる前にrenderが何度も呼ばれることが起きるようになる
だからrenderメソッドの中でthis.xxxを更新するなどの副作用があると破綻する
それは元々やるべきことじゃなくて行儀か悪いだけなんだがクラスコンポーネントでは書こうと思えば簡単に書けてしまう
そういうバグを検出するために前から用意されてたのがStrictモードだがあまり使われてるのを見たことはないな
クラスコンポーネントだとthis.stateはthis.setStatateを通じてReactが管理してるがその他はクラスコンポーネント任せで野放しになってるのがReact側から見た問題
そこで導入されたのが関数コンポーネントで状態や副作用の扱いが制限されて簡単に見えないのは意図的なんだよね
207デフォルトの名無しさん
2021/11/18(木) 10:29:08.68ID:5if92K6E 将来のReactではマウント・アンマウントも複数回行われるようになる
これもコンポーネントのインスタンスが変わる場合の話じゃなくて一つのコンポーネントインスタンスが何度もマウント・アンマウントを繰り返すようになる
クラスコンポーネントではdidMount/willUnmountか同じthisの上で何度も呼ばれることになるんだろう
だから従来のライフサイクルという考え方だと破綻する
useEffectは以前からライフサイクルと考えてはいけないと言われてるしそのためにuseEffectのコールバックは冪等にすべきという原則もある
React18ではそれによって起きる問題を検出するためにStrict Effectモードが増える
こうなるとuseEffectを従来の初期化処理・終了処理に読み替えて理解させるのは単純に間違いということになる
どちらが理解しやすいかという次元の話じゃないんだよね
これもコンポーネントのインスタンスが変わる場合の話じゃなくて一つのコンポーネントインスタンスが何度もマウント・アンマウントを繰り返すようになる
クラスコンポーネントではdidMount/willUnmountか同じthisの上で何度も呼ばれることになるんだろう
だから従来のライフサイクルという考え方だと破綻する
useEffectは以前からライフサイクルと考えてはいけないと言われてるしそのためにuseEffectのコールバックは冪等にすべきという原則もある
React18ではそれによって起きる問題を検出するためにStrict Effectモードが増える
こうなるとuseEffectを従来の初期化処理・終了処理に読み替えて理解させるのは単純に間違いということになる
どちらが理解しやすいかという次元の話じゃないんだよね
208デフォルトの名無しさん
2021/11/18(木) 13:11:55.12ID:3dlOBCKi それはuseStateを使うかlet変数宣言を使うかってのと同じこと
行儀の悪いコードはファンクショナルでも好きなだけ書ける
ようするにプログラマの腕とモラルの問題
ファンクショナルがクラスに対して優位と示す証拠ではないな
Reactが将来のバージョンアップでライフタイムサイクルの仕様変更となるなら
新しいライフタイムサイクルに適応したライフタイムサイクルメソッドを設ければいいだけ
そしてその方がuseEffectより遥かに直感的で理解しやすくなるだろう
実際どんな名称になるかはレアクトマニアでない俺は知らんがおそらくは
initializeComponent
componentDidMount
componentWillUnmount
disposeComponent
この辺りだろう
なんてわかりやすいんだ!
そもそも仕様変更されるからファンクショナルのほうがいいんだーって論理破綻しとるよな
仕様変更されたらそれに合わせてクラスコンポーネントも進化するのが当たり前
進化しないならそれはベンダーの怠慢
行儀の悪いコードはファンクショナルでも好きなだけ書ける
ようするにプログラマの腕とモラルの問題
ファンクショナルがクラスに対して優位と示す証拠ではないな
Reactが将来のバージョンアップでライフタイムサイクルの仕様変更となるなら
新しいライフタイムサイクルに適応したライフタイムサイクルメソッドを設ければいいだけ
そしてその方がuseEffectより遥かに直感的で理解しやすくなるだろう
実際どんな名称になるかはレアクトマニアでない俺は知らんがおそらくは
initializeComponent
componentDidMount
componentWillUnmount
disposeComponent
この辺りだろう
なんてわかりやすいんだ!
そもそも仕様変更されるからファンクショナルのほうがいいんだーって論理破綻しとるよな
仕様変更されたらそれに合わせてクラスコンポーネントも進化するのが当たり前
進化しないならそれはベンダーの怠慢
209デフォルトの名無しさん
2021/11/18(木) 14:18:18.92ID:I+5yMFIL ライフサイクルが変わってもuseEffectは影響を受けない
なぜならライフサイクルを扱う機能ではないから
ライフサイクルという考え方そのものを改めたのが今の関数コンポーネントとhookなんだよ
だからライフサイクルメソッドを増やせばいいなんて話ではないんだが伝わらないんだろうなw
まぁ、取り残されたければそれでいいんじゃない?
ここで吠えてもReactチームがクラスコンポーネントを進化させることはないよ
本気で主張したけりゃここに行きな
https://github.com/reactwg/react-18/discussions
なぜならライフサイクルを扱う機能ではないから
ライフサイクルという考え方そのものを改めたのが今の関数コンポーネントとhookなんだよ
だからライフサイクルメソッドを増やせばいいなんて話ではないんだが伝わらないんだろうなw
まぁ、取り残されたければそれでいいんじゃない?
ここで吠えてもReactチームがクラスコンポーネントを進化させることはないよ
本気で主張したけりゃここに行きな
https://github.com/reactwg/react-18/discussions
210デフォルトの名無しさん
2021/11/18(木) 15:19:55.65ID:3dlOBCKi 本来ライフサイクルメソッドではないuseEffectを、ライフサイクル目的で使わざるを得ない、という状況が非常にバッドだよねぇ
APIの目的外利用ってバッドノウハウとか、黒魔術って呼ばれてるものだよ
最近はそういうの随分と減ったと思ったけど、ファンクショナルコンポーネントでは現役なんだなぁ
useEffectはライフサイクルじゃない!ってんなら
useInitializer
useFainalizer
この2つのフックはオフィシャルに提供した方がいいだろね
それをしないというのはベンダーの怠慢でしかないよ
そうすれば、useEffectの第二引数に謎の空配列を渡すと、お掃除する時にだけ呼ばれます!
なーんて回りくどい、明快さのかけらもない、暗黙の了解はもう、要らなくなるわけだ
冷静に考えてわかりにくいだろ? 空配列ってさ
APIの目的外利用ってバッドノウハウとか、黒魔術って呼ばれてるものだよ
最近はそういうの随分と減ったと思ったけど、ファンクショナルコンポーネントでは現役なんだなぁ
useEffectはライフサイクルじゃない!ってんなら
useInitializer
useFainalizer
この2つのフックはオフィシャルに提供した方がいいだろね
それをしないというのはベンダーの怠慢でしかないよ
そうすれば、useEffectの第二引数に謎の空配列を渡すと、お掃除する時にだけ呼ばれます!
なーんて回りくどい、明快さのかけらもない、暗黙の了解はもう、要らなくなるわけだ
冷静に考えてわかりにくいだろ? 空配列ってさ
211デフォルトの名無しさん
2021/11/18(木) 16:20:58.58ID:yPpHDEE/ 本当に化石のような石頭だな
現場でもさぞかし迷惑な存在だろう
ライフサイクルって考え方をしないんだからuseInitializerもuseFainalizerも不要なんだよ
間違った理解
コンポーネントがマウントされたら一度だけxxを実行する
コンポーネントがアンマウントされたら一度だけyyを実行する
(やや)正しい理解
コンポーネントがマウントされてる間はzzの状態を維持する
zzの状態ってのはイベントをリッスンしてる状態とかwebsocketをサブスクイブしてる状態とか色々
useEffectのコールバックがそういう「状態を維持する」ものって考えると必然的に冪等にしなきゃいけなくなりConcurrent Renderingで繰り返し呼ばれても大丈夫になる
実際はマウントされてる間とかってのをもっと一般化して
正しい理解
依存配列が変わらない間は状態を維持する
と考える
空配列は変わりようがないから結果的にマウントしてる間はずっと状態を維持するってことになる
だからね、ライフサイクルって考え方がもはや不要で間違ってるんだよ
いつまでも古い考えに固執しないでちゃんと勉強して?
現場でもさぞかし迷惑な存在だろう
ライフサイクルって考え方をしないんだからuseInitializerもuseFainalizerも不要なんだよ
間違った理解
コンポーネントがマウントされたら一度だけxxを実行する
コンポーネントがアンマウントされたら一度だけyyを実行する
(やや)正しい理解
コンポーネントがマウントされてる間はzzの状態を維持する
zzの状態ってのはイベントをリッスンしてる状態とかwebsocketをサブスクイブしてる状態とか色々
useEffectのコールバックがそういう「状態を維持する」ものって考えると必然的に冪等にしなきゃいけなくなりConcurrent Renderingで繰り返し呼ばれても大丈夫になる
実際はマウントされてる間とかってのをもっと一般化して
正しい理解
依存配列が変わらない間は状態を維持する
と考える
空配列は変わりようがないから結果的にマウントしてる間はずっと状態を維持するってことになる
だからね、ライフサイクルって考え方がもはや不要で間違ってるんだよ
いつまでも古い考えに固執しないでちゃんと勉強して?
212デフォルトの名無しさん
2021/11/18(木) 16:43:19.19ID:3dlOBCKi >>211
で、それは手続きだらけの現実世界には対処不能、と
ファンクショナル界隈の連中って、なんでか理想論ばっかなんだよなぁ
コンポーネント初期化時に一回、何か処理をしたい、って自然な要求に直接答える術がない
useEffectという本来違う目的のためにあるものを、使うしかない
これがファンクショナルの限界
例えばコンポーネント初期化時にログを追記したい、とかな
「状態維持する」って考えじゃ実現できねえ処理なんざ、世の中にはいくらでもあるんだ
で、それは手続きだらけの現実世界には対処不能、と
ファンクショナル界隈の連中って、なんでか理想論ばっかなんだよなぁ
コンポーネント初期化時に一回、何か処理をしたい、って自然な要求に直接答える術がない
useEffectという本来違う目的のためにあるものを、使うしかない
これがファンクショナルの限界
例えばコンポーネント初期化時にログを追記したい、とかな
「状態維持する」って考えじゃ実現できねえ処理なんざ、世の中にはいくらでもあるんだ
213デフォルトの名無しさん
2021/11/18(木) 17:09:36.68ID:tb6GSOae ファンクショナルの限界じゃなくてお前の限界な
214デフォルトの名無しさん
2021/11/18(木) 18:20:41.19ID:te8WLqUU うわあ・・・
ID:3dlOBCKi
ttp://hissi.org/read.php/tech/20211118/M2RsT0JDS2k.html
ID:3dlOBCKi
ttp://hissi.org/read.php/tech/20211118/M2RsT0JDS2k.html
215デフォルトの名無しさん
2021/11/18(木) 18:34:14.46ID:3dlOBCKi216デフォルトの名無しさん
2021/11/18(木) 19:03:14.82ID:wacBz6NM 使う人が増えると残念な人も増えるいつもの光景
217デフォルトの名無しさん
2021/11/18(木) 22:26:22.51ID:fTWvydC+ こういう残念な人が出てくるのは公式サイトのドキュメンが悪いせいもある
元がクラスコンポーネント時代に作られてhooksは後付だからuseEffectがライフサイクルで説明されてしまってる
作り直してる新しいドキュメントでは最初からhooksで説明されるから勘違いおじさんが撲滅されるといいな
元がクラスコンポーネント時代に作られてhooksは後付だからuseEffectがライフサイクルで説明されてしまってる
作り直してる新しいドキュメントでは最初からhooksで説明されるから勘違いおじさんが撲滅されるといいな
218デフォルトの名無しさん
2021/11/19(金) 09:42:11.48ID:J0mGbVeO >>194
webpack-dev-server知らんのは流石に論外やろ
webpack-dev-server知らんのは流石に論外やろ
219デフォルトの名無しさん
2021/11/21(日) 14:16:11.00ID:knw1x1gk 関数型のテクニックを使ってるってだけで、やってることはただのオブジェクト指向なんだよな
所詮は構文の違いでしかない
属性を使うかuseStateを使うか
Reactにコールバックをどうやって教えるか
それだけだ
オブジェクト指向ユーザーは、素直にクラスを使ってそれを実装する
関数型ユーザーはやってること同じなんだが、イキがってフックとか使いだして、読み手を混乱させる
JavaScriptの黎明期にプロトタイプベースのオブジェクト指向を使うか、クロージャベースのオブジェクト指向を使うかで揉めてたのと、同じ構図だ
クロージャは関数型で発展したツールだが、実現したい事は結局、どっちもオブジェクト指向だった
所詮は構文の違いでしかない
属性を使うかuseStateを使うか
Reactにコールバックをどうやって教えるか
それだけだ
オブジェクト指向ユーザーは、素直にクラスを使ってそれを実装する
関数型ユーザーはやってること同じなんだが、イキがってフックとか使いだして、読み手を混乱させる
JavaScriptの黎明期にプロトタイプベースのオブジェクト指向を使うか、クロージャベースのオブジェクト指向を使うかで揉めてたのと、同じ構図だ
クロージャは関数型で発展したツールだが、実現したい事は結局、どっちもオブジェクト指向だった
220デフォルトの名無しさん
2021/11/21(日) 17:48:46.47ID:UWSF5n1L お前がそう思うんならそうなんだろう お前ん中ではな
221デフォルトの名無しさん
2021/11/21(日) 17:55:48.39ID:Wm1mwUDt オブジェクト指向のテクニックを使ってるだけでやってることはただの構造化なんだよな
所詮は構文の違いでしかない
こうですか
最後は全部ただの機械語ですしね!
所詮は構文の違いでしかない
こうですか
最後は全部ただの機械語ですしね!
222デフォルトの名無しさん
2021/11/21(日) 20:40:46.53ID:1yBKup76 例えばさ、
ちょっと複雑なコンポーネントを作ろうぜ、ってなったら、誰だってプログラムを分割するだろう?
function useMyForm () {
// 略::フックを使った汚いコード
return { /* 美しいオブジェクト */ }
}
function MyForm () {
const f = useMyForm()
return <…..略
}
useMyFormは何をやってるかというと、reactのフックを使った汚いコードを隠蔽して、
代わりにエレガントな形を持ったオブジェクトを生成して返してるんだね
詳細をカプセル化して、外から見て美しいオブジェクトを作る
これはオブジェクト指向の基本にして、真髄
ファンクショナルのツールを使ってるだけで、やってることはオブジェクト指向、とはこういうこと
それで、賢い人はこの匿名のオブジェクトに名前を付けて、さらに理解を助けるわけだ
例えばclass MyFormBehaivorとかね
で、MyFormはMyFormBehaviorを継承してrenderを付けるだけ、だな、とすぐに気付く筈だね
結局さ、同じなんだよ、やってることが
同じなら、見た目に読みやすい方がいいに決まってる
で、読みやすいのは断然、オブジェクト指向
QED
ちょっと複雑なコンポーネントを作ろうぜ、ってなったら、誰だってプログラムを分割するだろう?
function useMyForm () {
// 略::フックを使った汚いコード
return { /* 美しいオブジェクト */ }
}
function MyForm () {
const f = useMyForm()
return <…..略
}
useMyFormは何をやってるかというと、reactのフックを使った汚いコードを隠蔽して、
代わりにエレガントな形を持ったオブジェクトを生成して返してるんだね
詳細をカプセル化して、外から見て美しいオブジェクトを作る
これはオブジェクト指向の基本にして、真髄
ファンクショナルのツールを使ってるだけで、やってることはオブジェクト指向、とはこういうこと
それで、賢い人はこの匿名のオブジェクトに名前を付けて、さらに理解を助けるわけだ
例えばclass MyFormBehaivorとかね
で、MyFormはMyFormBehaviorを継承してrenderを付けるだけ、だな、とすぐに気付く筈だね
結局さ、同じなんだよ、やってることが
同じなら、見た目に読みやすい方がいいに決まってる
で、読みやすいのは断然、オブジェクト指向
QED
223デフォルトの名無しさん
2021/11/21(日) 20:55:13.47ID:SJq+O3t2 しつこい
224デフォルトの名無しさん
2021/11/21(日) 21:04:01.25ID:5qd0Nwtv ふむ、反論ができなくなったのかな?
225デフォルトの名無しさん
2021/11/21(日) 21:16:31.74ID:zzbPLRQo 石頭の老害相手に反論しても無駄
226デフォルトの名無しさん
2021/11/21(日) 22:35:19.11ID:UWSF5n1L 馬鹿は論破できない
227デフォルトの名無しさん
2021/11/22(月) 10:00:05.25ID:HTg16b0P 今どきfunctionって書くか?
228デフォルトの名無しさん
2021/11/22(月) 14:12:56.45ID:yxcpONXb 書かない
229デフォルトの名無しさん
2021/12/03(金) 10:05:55.29ID:OvhoAu9V ボタン連打するけしからん奴対策の定番ライブラリ教えてよ
送信フラグ管理はもう疲れた
あ、いちおクロスプラットフォームのライブラリでヨロ
送信フラグ管理はもう疲れた
あ、いちおクロスプラットフォームのライブラリでヨロ
230デフォルトの名無しさん
2021/12/03(金) 16:35:10.63ID:ZR9gqQ7Z ボタン押下で実行されるのをステートの値をtrueにするのみのsetAnyState(true)とかにして
実処理を
useEffect(()=>{if(anyState){
// 実際したい処理
setAnyState(false)
}},[anyState])
にしとけば連打されても大丈夫じゃね?
実処理を
useEffect(()=>{if(anyState){
// 実際したい処理
setAnyState(false)
}},[anyState])
にしとけば連打されても大丈夫じゃね?
231デフォルトの名無しさん
2021/12/03(金) 18:25:47.16ID:C14FVshC ボタンが押されたらボタンをdisabledにすればいいじゃん
232デフォルトの名無しさん
2021/12/03(金) 19:41:18.43ID:L4TUqIiQ わろた
233デフォルトの名無しさん
2021/12/03(金) 19:41:36.25ID:50htZSL3 それだとめっちゃ高速にダブルクリックした場合多分イベント2回来る場合ある
234デフォルトの名無しさん
2021/12/03(金) 20:19:23.32ID:mMKMUGdN JavaScriptはシングルスレッド
235デフォルトの名無しさん
2021/12/06(月) 19:49:21.16ID:56/uA2M5 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には直接アクセスできない
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デフォルトの名無しさん
2021/12/06(月) 20:06:59.76ID:4QzxG6KH useMyEffectもuseMyHookでやるべきじゃねーの
それができないならuseMyEffectを
foo: useCallback(() => a+b, [a, b]),
bar: useCallback(() => a-b, [a, b])
とすれば[???]は
[myhook.foo, myhook.bar]
それができないならuseMyEffectを
foo: useCallback(() => a+b, [a, b]),
bar: useCallback(() => a-b, [a, b])
とすれば[???]は
[myhook.foo, myhook.bar]
237デフォルトの名無しさん
2021/12/06(月) 20:07:50.83ID:4QzxG6KH238デフォルトの名無しさん
2021/12/06(月) 20:11:27.69ID:4QzxG6KH239デフォルトの名無しさん
2021/12/06(月) 22:16:00.54ID:zN0DCcOz >>236
thank you.
thank you.
240デフォルトの名無しさん
2021/12/08(水) 14:16:37.56ID:/W89KInL function MyComp () {
const vm = useMyCompViewModel();
return <略 />;
}
MyCompのユニットテストする時ってどうしてる?
つまりuseMyCompViewModelをインジェクトしたい時
const vm = useMyCompViewModel();
return <略 />;
}
MyCompのユニットテストする時ってどうしてる?
つまりuseMyCompViewModelをインジェクトしたい時
241デフォルトの名無しさん
2021/12/08(水) 15:51:56.43ID:5zVi58LJ242デフォルトの名無しさん
2021/12/08(水) 19:22:47.15ID:/W89KInL243デフォルトの名無しさん
2021/12/08(水) 21:33:33.67ID:Rfcvtfm3 テストだけならこんなんで十分じゃね
function MyComp (props) {
const useViewModel = props.useMyCompViewModel || useMyCompViewModel
const vm = useViewModel();
return <略 />;
}
function MyComp (props) {
const useViewModel = props.useMyCompViewModel || useMyCompViewModel
const vm = useViewModel();
return <略 />;
}
244デフォルトの名無しさん
2021/12/08(水) 21:48:07.68ID:lkzI+wPD 経年劣化に耐える ReactComponent の書き方
https://zenn.dev/takepepe/articles/howto-withstand-aging-react-component
https://zenn.dev/takepepe/articles/howto-withstand-aging-react-component
245デフォルトの名無しさん
2021/12/08(水) 22:23:21.01ID:SYjhTw/G246デフォルトの名無しさん
2021/12/11(土) 11:45:52.40ID:zttGewLv サードパーティコンポーネントが状態や副作用を持っているがこれを除去してステートレスにしたい
どうすればいい?ソースコードを書き換えるのは無しで
どうすればいい?ソースコードを書き換えるのは無しで
247デフォルトの名無しさん
2021/12/11(土) 11:52:28.47ID:GrxR7SwR プルリクエスト
248デフォルトの名無しさん
2021/12/11(土) 12:05:31.62ID:zttGewLv function IWantEasyTestableComponent(props) {
return (<View>
<FackingStatefullComponent foo={props.foo} />
<MyAwesomeStatelessComponent {…props} />
</View>);
}
こういうの、どうすりゃいいんだ?
野良ライブラリはどれもこれもアマチュアが好き勝手作ってるから、利便性はともかく品質のムラが大きすぎる
できれば使いたく無いが、使う前提で予算と工程を組まれる
オープンソースのダークサイドやね
return (<View>
<FackingStatefullComponent foo={props.foo} />
<MyAwesomeStatelessComponent {…props} />
</View>);
}
こういうの、どうすりゃいいんだ?
野良ライブラリはどれもこれもアマチュアが好き勝手作ってるから、利便性はともかく品質のムラが大きすぎる
できれば使いたく無いが、使う前提で予算と工程を組まれる
オープンソースのダークサイドやね
249デフォルトの名無しさん
2021/12/11(土) 12:21:22.59ID:GrxR7SwR jest.mock('path/to/FackingStatefullComponent')
250デフォルトの名無しさん
2021/12/11(土) 12:27:06.61ID:RI4P88iz >>249
ソースコードの書き換えとどう違うんだそれ?
ソースコードの書き換えとどう違うんだそれ?
251デフォルトの名無しさん
2021/12/11(土) 12:44:03.50ID:g9v4y15i 依存関係をインターフェース等で明示的に分離してインジェクションするポイントを作るという考え方ではなく
モジュール自体を上書きしてしまうことで無理やりインジェクションするということか
違和感が強いがこれがJavaScriptの文化と思って受け入れるしかないか
モジュール自体を上書きしてしまうことで無理やりインジェクションするということか
違和感が強いがこれがJavaScriptの文化と思って受け入れるしかないか
252デフォルトの名無しさん
2021/12/12(日) 21:59:15.39ID:wsjthnMX LogBox邪魔すぎる
機能OFFにできんのかコレ
機能OFFにできんのかコレ
253デフォルトの名無しさん
2021/12/20(月) 09:27:19.20ID:vskoYLeQ 状態、副作用は親コンポーネントに持たせるべきか
子コンポーネントに持たせるべきか
子コンポーネントに持たせるべきか
254デフォルトの名無しさん
2021/12/20(月) 17:18:10.57ID:hUMHHR9z コンポーネントの用途に依る
基本的にはコンポーネントで独立してる方がいいと思う
ちゃんと精査すれば全体で管理しなきゃいけない状態ってそんなに多くないはず
基本的にはコンポーネントで独立してる方がいいと思う
ちゃんと精査すれば全体で管理しなきゃいけない状態ってそんなに多くないはず
255デフォルトの名無しさん
2021/12/20(月) 18:51:15.00ID:DVSwWolF 以前は
親(コンテナ)コンポーネントで状態管理
子(プレゼンテーショナル)コンポーネントは表示だけ
ってのが流行ってたが廃れたな
再レンダリングが発生しやすいせいかな
親(コンテナ)コンポーネントで状態管理
子(プレゼンテーショナル)コンポーネントは表示だけ
ってのが流行ってたが廃れたな
再レンダリングが発生しやすいせいかな
256デフォルトの名無しさん
2021/12/21(火) 15:04:20.98ID:2tghIxun まあケースバイケースになるか
そこそこ複雑な入力ページなんだけど
親に状態を持たせると不定個数の状態の扱いがやりにくい
子に状態を持たせると親への通知がやりにくい
どっちでやってもスッキリしない
そこそこ複雑な入力ページなんだけど
親に状態を持たせると不定個数の状態の扱いがやりにくい
子に状態を持たせると親への通知がやりにくい
どっちでやってもスッキリしない
257デフォルトの名無しさん
2021/12/21(火) 15:13:11.31ID:YHqQ6+Ts 入力フォームなら素直にreact-hook-form使え
258デフォルトの名無しさん
2021/12/21(火) 15:40:04.62ID:ESVu6HO8 ほぉん
なかなか便利そう
どこまで複雑な入力ページに耐えられるか気になるところだけど
単純なフォームならこれで良さそうだ
なかなか便利そう
どこまで複雑な入力ページに耐えられるか気になるところだけど
単純なフォームならこれで良さそうだ
259デフォルトの名無しさん
2021/12/29(水) 00:29:54.67ID:ceh8LJAo React完全に理解したがパフォーマンスの上げ方がわからねえ
260デフォルトの名無しさん
2021/12/29(水) 00:50:07.29ID:b+BxW/Al >>259
理解出来てねーーじゃん!
理解出来てねーーじゃん!
261デフォルトの名無しさん
2021/12/29(水) 01:49:18.73ID:CcYJF9F8 完全に理解した=何もわからんだからな
チョットでかる=世界一わかってるだし
チョットでかる=世界一わかってるだし
262デフォルトの名無しさん
2022/01/04(火) 12:28:56.67ID:LToZWYYj ブラウザデバッガで見て出てるエラー消すところからかな
あとreact-router使わんとページ遷移の度にDOM読み直しとかも効率悪い事この上ない
あとreact-router使わんとページ遷移の度にDOM読み直しとかも効率悪い事この上ない
263デフォルトの名無しさん
2022/01/05(水) 12:38:15.54ID:1AqA60VG Reactの優れたイディオム、デザインパターンまとめたサイト、書籍、教えてよ
264デフォルトの名無しさん
2022/01/09(日) 14:30:52.75ID:YbeZmiIg react nativeのパーツかわからないんですけど
画面の下から出てくるダイアログってどのモジュールを使えばいいんでしょう?
ttps://i.imgur.com/FuvGKCx.jpg
画面の下から出てくるダイアログってどのモジュールを使えばいいんでしょう?
ttps://i.imgur.com/FuvGKCx.jpg
265デフォルトの名無しさん
2022/01/20(木) 19:51:41.70ID:fJA5C2IK 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' ) {
}
);
どうすりゃ良いの?おそえて。
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' ) {
}
);
どうすりゃ良いの?おそえて。
266デフォルトの名無しさん
2022/01/20(木) 19:58:21.41ID:dHw5M9GX store.getState()
267デフォルトの名無しさん
2022/01/22(土) 01:00:33.62ID:Q6mU4pBx React Nativeはオワコンらしいですが
Reactは使う価値ありますか?
教えてエロい人
Reactは使う価値ありますか?
教えてエロい人
268デフォルトの名無しさん
2022/01/22(土) 01:02:15.28ID:VcaTUFKD >>267
自分で見極められないの?
自分で見極められないの?
269デフォルトの名無しさん
2022/01/22(土) 01:17:25.20ID:Q6mU4pBx270デフォルトの名無しさん
2022/01/22(土) 01:19:22.91ID:NdDHIpih 初心者はやめておいた方が良いです
271デフォルトの名無しさん
2022/01/22(土) 01:25:12.66ID:Q6mU4pBx これから勉強するならFlutterの方がいいですか?
272デフォルトの名無しさん
2022/01/22(土) 10:04:33.20ID:Z1IOsfXg シカトっすか?
273デフォルトの名無しさん
2022/01/22(土) 11:17:22.76ID:N7C2miyW まず上級者になることをおすすめします
274デフォルトの名無しさん
2022/01/23(日) 11:01:19.74ID:5zqw2dvO create-react-appで、npm run buildしたのですが
manifest.jsonのみがbuildフォルダーにコピーされないです・・・
回避方法ないでしょうか?
manifest.jsonのみがbuildフォルダーにコピーされないです・・・
回避方法ないでしょうか?
275デフォルトの名無しさん
2022/01/23(日) 11:08:40.96ID:5zqw2dvO >>274
解決しました!失礼しました・・・。
解決しました!失礼しました・・・。
276デフォルトの名無しさん
2022/01/26(水) 10:48:59.57ID:PJmPV3+3 Reduxのストアにクラスっぽいオブジェクト(プロパティ+関数)入れようとしたら
non-serialize objectがどうのこうのとエラーになった。
そもそも何でシリアライズなんかやろうとするんだ?
non-serialize objectがどうのこうのとエラーになった。
そもそも何でシリアライズなんかやろうとするんだ?
277デフォルトの名無しさん
2022/01/26(水) 10:59:34.07ID:0H2oAMTN 不変性を担保するためじゃね
278デフォルトの名無しさん
2022/01/26(水) 11:35:00.62ID:SY+BWxpR なんかもっと決定的な感じのフレームワーク出ないのエロい人?
279デフォルトの名無しさん
2022/01/26(水) 17:40:44.17ID:kU7cNmd7 >>277
別にそんなもん担保する必要ないだろ。
別にそんなもん担保する必要ないだろ。
280デフォルトの名無しさん
2022/01/26(水) 18:01:16.43ID:+qGThwTi reduxの根本が不変性をベースにしてるんだが
でないとシャロー比較とか成り立たない
たいして有用じゃないがタイムトラベルも不変性前提の機能
そのへんちゃんと理解してから使った方がいいよ
でないとシャロー比較とか成り立たない
たいして有用じゃないがタイムトラベルも不変性前提の機能
そのへんちゃんと理解してから使った方がいいよ
281デフォルトの名無しさん
2022/01/27(木) 00:56:59.89ID:58xO6kDn そんなどうでも良い概念を使用者全員に押し付けて来んなよ。
単にreactでアプリをリプレイスで作ったら状態がコンポーネント単位で持たれて、
アプリ単位で持ちたいな、と考えたらReduxが一番人気だよって事で採用しただけだ。
不変性?(w) プログラムが変数に余計な変更加えなければ何もしなくても担保されてるだろw
単にreactでアプリをリプレイスで作ったら状態がコンポーネント単位で持たれて、
アプリ単位で持ちたいな、と考えたらReduxが一番人気だよって事で採用しただけだ。
不変性?(w) プログラムが変数に余計な変更加えなければ何もしなくても担保されてるだろw
282デフォルトの名無しさん
2022/01/27(木) 01:06:46.42ID:oXQnXbb3 ダメだこいつ…
283デフォルトの名無しさん
2022/01/27(木) 01:39:30.37ID:58xO6kDn 何故それが必要と思うのか説明して見ろよw
284デフォルトの名無しさん
2022/01/27(木) 05:05:01.32ID:kowYjA+c Ruby on Rails の作者・DHH の動画では、
React, Vue.js とか、規約だけのフレームワーク・Stimulus も使う
React, Vue.js とか、規約だけのフレームワーク・Stimulus も使う
285デフォルトの名無しさん
2022/01/27(木) 10:03:38.14ID:QU6mkTFl >>283
すでに280に書いただろが
もっともシャロー比較のために不変性が必要というのは話が逆で不変性が前提としてあるからシャロー比較が機能するんだが
もっと言えばreduxは関数型のスタイルを「選択」して全体が作られてる
だからステートやアクションは不変に、reducerやselecterは純粋にすべしってこと
それがreduxの設計意図
一番人気と聞いただけで飛びついちゃった上っ面君には関係ない話だけどな
すでに280に書いただろが
もっともシャロー比較のために不変性が必要というのは話が逆で不変性が前提としてあるからシャロー比較が機能するんだが
もっと言えばreduxは関数型のスタイルを「選択」して全体が作られてる
だからステートやアクションは不変に、reducerやselecterは純粋にすべしってこと
それがreduxの設計意図
一番人気と聞いただけで飛びついちゃった上っ面君には関係ない話だけどな
286デフォルトの名無しさん
2022/01/27(木) 10:51:15.03ID:zgsWbtRT >>284
DHHってフロントエンドでは間違いしかしない人だからスルー推奨
DHHってフロントエンドでは間違いしかしない人だからスルー推奨
287デフォルトの名無しさん
2022/01/27(木) 11:28:21.68ID:58xO6kDn >>285
だから全てのアプリがシャロー比較とかタイムトラベルしたい訳じゃないだろって話してんだがw?
まあ、余計な機能をテンコ盛りに詰めて利用者に強制したから、別の実装が出たりreactが自前実装して
見捨てられるんだろうけど。Reduxに期待する事はFluxのあの図を忠実に実装する事だけで余計な機能は付けるなよ
>一番人気と聞いただけで飛びついちゃった上っ面君には関係ない話だけどな
飛びついたのは俺じゃなくて俺が使ってるミドル作った人だけど、まあ、あのアプリの規模(デモレベル)
でそんな面倒臭いシステム使ったのなら、理由はそんなところだろうなと。
Reduxはマジあかんな。費用対効果が悪すぎる。
コスト意識の無い潔癖な学者か研究者が作ったシステムって感じがするね。
だから全てのアプリがシャロー比較とかタイムトラベルしたい訳じゃないだろって話してんだがw?
まあ、余計な機能をテンコ盛りに詰めて利用者に強制したから、別の実装が出たりreactが自前実装して
見捨てられるんだろうけど。Reduxに期待する事はFluxのあの図を忠実に実装する事だけで余計な機能は付けるなよ
>一番人気と聞いただけで飛びついちゃった上っ面君には関係ない話だけどな
飛びついたのは俺じゃなくて俺が使ってるミドル作った人だけど、まあ、あのアプリの規模(デモレベル)
でそんな面倒臭いシステム使ったのなら、理由はそんなところだろうなと。
Reduxはマジあかんな。費用対効果が悪すぎる。
コスト意識の無い潔癖な学者か研究者が作ったシステムって感じがするね。
288デフォルトの名無しさん
2022/01/27(木) 12:05:30.94ID:zgsWbtRT >>287
全てのアプリがしたいかどうかじゃなくてredux使うアプリはその流儀に従うしかないって話なんだがわからず屋だな
それが嫌ならredux選ぶなっつーだけの話だ
ちなみにシャロー比較はreact.memoなどreactエコシステムの共通項だから全てのreactアプリ開発者が身につけておくべきことだけどな
だいたいreduxの元の作者が今はreactコアチームの主要メンバーでredux不要化を進めてる張本人だし
全てのアプリがしたいかどうかじゃなくてredux使うアプリはその流儀に従うしかないって話なんだがわからず屋だな
それが嫌ならredux選ぶなっつーだけの話だ
ちなみにシャロー比較はreact.memoなどreactエコシステムの共通項だから全てのreactアプリ開発者が身につけておくべきことだけどな
だいたいreduxの元の作者が今はreactコアチームの主要メンバーでredux不要化を進めてる張本人だし
289デフォルトの名無しさん
2022/01/28(金) 04:01:26.15ID:dtKXZRXN Deanin, 1/10、15分の動画
Setup A Ruby on Rails 7 API With React JS
https://www.youtube.com/watch?v=sh4WrNGDvQM
WSL, Ubuntu 20.04, VSCode(Remote WSL)
Ruby 3, Rails 7 のAPI モード、React, Axios
Railsのscaffold で、簡単なデモ。
この兄ちゃんは、きれいな英語を喋るので、翻訳も分かりやすい
Setup A Ruby on Rails 7 API With React JS
https://www.youtube.com/watch?v=sh4WrNGDvQM
WSL, Ubuntu 20.04, VSCode(Remote WSL)
Ruby 3, Rails 7 のAPI モード、React, Axios
Railsのscaffold で、簡単なデモ。
この兄ちゃんは、きれいな英語を喋るので、翻訳も分かりやすい
290デフォルトの名無しさん
2022/01/28(金) 07:19:26.02ID:FbvuqA1u Ruby はお呼びじゃないです
291デフォルトの名無しさん
2022/01/29(土) 01:06:49.85ID:b1Z4prOk >だいたいreduxの元の作者が今はreactコアチームの主要メンバーでredux不要化を進めてる張本人だし
害悪をまき散らした張本人だな。
マジであの生鮮性を何故実装して広めようとした事は理解に苦しむ。
J2EEとかhadoopとか(多分将来的にk8sも)生産性が超絶に低い潔癖システムが消えてなくなった事例から全く学ぼうとしないんだな。
害悪をまき散らした張本人だな。
マジであの生鮮性を何故実装して広めようとした事は理解に苦しむ。
J2EEとかhadoopとか(多分将来的にk8sも)生産性が超絶に低い潔癖システムが消えてなくなった事例から全く学ぼうとしないんだな。
292デフォルトの名無しさん
2022/02/06(日) 05:24:52.64ID:ETpepHrW ReactでPOSTメソッドだけを受けるアプリ作るのはどうすれば良いんでしょう?
"react POST method "でぐぐってもfetchを使えとか、何故か投げる側の処理ばかりが出ます。
webサーバーには何も入れてないので、npm start で動くサーバーと思しき物はreact-scriptsの筈です。
POSTメソッドだけに紐付いたコンポーネント書きたいのですが…
"react POST method "でぐぐってもfetchを使えとか、何故か投げる側の処理ばかりが出ます。
webサーバーには何も入れてないので、npm start で動くサーバーと思しき物はreact-scriptsの筈です。
POSTメソッドだけに紐付いたコンポーネント書きたいのですが…
293デフォルトの名無しさん
2022/02/06(日) 07:33:46.13ID:d9+JDYY/ >>292
(´Д`)
(´Д`)
294デフォルトの名無しさん
2022/02/06(日) 13:52:11.36ID:xkt5lO0Z >>292
これネタじゃなくマジで言ってんの
これネタじゃなくマジで言ってんの
295デフォルトの名無しさん
2022/02/06(日) 15:17:45.09ID:d9+JDYY/ (´Д`)
296デフォルトの名無しさん
2022/02/06(日) 15:52:20.16ID:YYEn69uQ GETとPOSTの違いを質問するだけで、
アレな人を面接から排除できるし、簡単だな
これで95%ぐらい排除できるし
アレな人を面接から排除できるし、簡単だな
これで95%ぐらい排除できるし
297デフォルトの名無しさん
2022/02/06(日) 16:34:57.86ID:FsJSE82A いやいや、この場合はクライアントとサーバの違いを質問するところからだろ……
298デフォルトの名無しさん
2022/02/06(日) 16:41:29.09ID:d9+JDYY/ まずネタかどうか...
レスを投稿する
