React と React Native のスレ (481ﾚｽ)
上下前次1-新
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.
240: 2021/12/08(水)14:16 ID:/W89KInL(1/2) AAS
function MyComp () {
const vm = useMyCompViewModel();
return <略 />;
}
MyCompのユニットテストする時ってどうしてる？
つまりuseMyCompViewModelをインジェクトしたい時
241(1): 2021/12/08(水)15:51 ID:5zVi58LJ(1) AAS
外部ﾘﾝｸ:github.com
242: 2021/12/08(水)19:22 ID:/W89KInL(2/2) AAS
>>241
?
でもこれフックのテスト用なのでは？
そうじゃなくフックをモック化してコンポーネントをテストしたい
243(1): 2021/12/08(水)21:33 ID:Rfcvtfm3(1) AAS
テストだけならこんなんで十分じゃね
function MyComp (props) {
const useViewModel = props.useMyCompViewModel || useMyCompViewModel
const vm = useViewModel();
return <略 />;
}
244: 2021/12/08(水)21:48 ID:lkzI+wPD(1) AAS
経年劣化に耐える ReactComponent の書き方
外部ﾘﾝｸ:zenn.dev
245: 2021/12/08(水)22:23 ID:SYjhTw/G(1) AAS
>>243
なるぼどなぁ
これで少しやってみよかな
246: 2021/12/11(土)11:45 ID:zttGewLv(1/2) AAS
サードパーティコンポーネントが状態や副作用を持っているがこれを除去してステートレスにしたい
どうすればいい？ソースコードを書き換えるのは無しで
247: 2021/12/11(土)11:52 ID:GrxR7SwR(1/2) AAS
プルリクエスト
248: 2021/12/11(土)12:05 ID:zttGewLv(2/2) AAS
function IWantEasyTestableComponent(props) {
return (<View>
<FackingStatefullComponent foo={props.foo} />
<MyAwesomeStatelessComponent {…props} />
</View>);
}
こういうの、どうすりゃいいんだ？
野良ライブラリはどれもこれもアマチュアが好き勝手作ってるから、利便性はともかく品質のムラが大きすぎる
できれば使いたく無いが、使う前提で予算と工程を組まれる
オープンソースのダークサイドやね
249(1): 2021/12/11(土)12:21 ID:GrxR7SwR(2/2) AAS
jest.mock('path/to/FackingStatefullComponent')
250: 2021/12/11(土)12:27 ID:RI4P88iz(1) AAS
>>249
ソースコードの書き換えとどう違うんだそれ？
251: 2021/12/11(土)12:44 ID:g9v4y15i(1) AAS
依存関係をインターフェース等で明示的に分離してインジェクションするポイントを作るという考え方ではなく
モジュール自体を上書きしてしまうことで無理やりインジェクションするということか
違和感が強いがこれがJavaScriptの文化と思って受け入れるしかないか
上下前次1-新書関写板覧索設栞歴
あと 230 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.007s