React と React Native のスレ (481ﾚｽ)
上下前次1-新
76: 2021/02/14(日)13:32 ID:wyKYn9A/(4/6) AAS
>>75
分かんない人だな。
なんで今のclassベースの実装をこの話に持ち込むの。
hookの機能を”function”でなく、jsの”class”で実現できないの？っていう疑問なの。
77: 2021/02/14(日)14:00 ID:+4ZWExbH(1) AAS
お前もわからずやだな
useStateだろうがuseEffectだろうがuseCallbackだろうがuseRefだろうがclassコンポーネントはhookなしで同じことが実現できてるだろ
78: 2021/02/14(日)14:19 ID:wyKYn9A/(5/6) AAS
hookを知らないやつだったか。アホらし。
79(1): 2021/02/14(日)14:34 ID:kA8DCabn(1/2) AAS
時系列的には
クラスコンポーネント: 状態を扱える
↓
"ステートレス"関数コンポーネント: 状態を扱えない
↓
関数コンポーネント+hooks: 状態を扱える
と発展してきた
つまりhooksはクラスコンポーネントができていたことを関数コンポーネントでもできるようにするために後から追加されたもの
ただし
クラスコンポーネント: 状態をコンポーネントが管理する
関数コンポーネント+hooks: 状態をフレームワークが管理する
という違いがある
これが今後のconcurrent modeやserver componentsで大きな違いになってくる
フレームワークができることを増やすにはコンポーネント側の自由度は低い方がよくてそれがpureな関数コンポーネント
80: 2021/02/14(日)14:46 ID:wyKYn9A/(6/6) AAS
>>79
この解説から見ると、自分の疑問は
"状態をフレームワークが管理する"
にはclass実装では不利なのか？向かないのか？
って事になる。ね。
81: 2021/02/14(日)15:15 ID:kA8DCabn(2/2) AAS
クラスコンポーネントのインスタンスはthis.〜で自由に状態を扱えてしまうからフレームワークには都合が悪い
そこをthis禁止のように縛っていくとただの関数でいいやってなる
82: 2021/02/14(日)16:39 ID:DVWK/pJu(1) AAS
useCallbackみたいな単なるラッパー関数がclassにも欲しいってこと？
なんかそう言うパッケージ見たことあるぞ
83: 2021/02/14(日)16:59 ID:FekQTk3J(1) AAS
classコンポーネントにuseCallbackはいらんやろ
前はbindしたり面倒だったけどstage3のclass fields使えばこれだけ
class Foo extends React.Component {
handleClick = (ev) => {...}
84: 2021/02/14(日)21:01 ID:K2VDjDyL(1) AAS
Ruby on Rails では、控えめなJS フレームワークのStimulu もある
規約で、HTML のdata-controller 属性で、JSファイル名・コントローラーが決まるので、
そこにイベント処理を書くだけ
DOM・コントローラーは、多対多
1つのDOMは、複数のコントローラーで処理できる。
HTML内で、同じコントローラーを複数定義できる
Stimuluは、this を使う。
同じコントローラーを複数定義したら、別のインスタンスを作る
<li data-controller="a">1</li>
<li data-controller="a">2</li>
85: 2021/02/14(日)21:03 ID:NOmukaW1(1) AAS
ス・レ・チ
86: 2021/02/15(月)02:51 ID:E7fw/gtI(1) AAS
マジで障害者かな？
この板に巣食ってる人がいるのは認識してたけど
87: 2021/06/18(金)09:52 ID:IQL7BQ/N(1) AAS
React Hooks + Reduxの利点を述べた記事をいくつか読んだのですが、
MVCでだめな理由がよくわかりませんでした。
複数のModelがReduxのStoreに一本化される: Modelをシングルトンにして、
Storeの内部で区分するところをModelのメンバとして区分する。
ViewからはActionを発行してReducerを通さないとStoreを更新できない:
ViewはControllerに登録されたメソッドを通してしかModelを更新できない。
Storeの更新はViewに自動的に反映される。
Model(とそのメンバ、孫メンバ)がObservableであれば、Modelの更新を
自動的にViewに反映させることができる。
ではだめなんでしょうか。
88(1): 2021/08/10(火)10:10 ID:0SSgF6Zh(1/5) AAS
Reactで関数コンポーネントで本気実装始めたんだが、
関数コンポーネント面倒くさ過ぎじゃね？
関数コンポネント入門位の実装なら問題なかったんだが、
ちょっと込み入ったの実装しようと思ったら
クラスじゃないんで、コンポーネントの自前メソッドを（子から親、親から子）公開するのとか
そのTS型定義をどうするのとかうまく解決できんのか？これwww
89(1): 2021/08/10(火)10:18 ID:Yti8n+JL(1) AAS
込み入った実装ってだいたい設計から間違ってるよね…
90: 2021/08/10(火)10:22 ID:0SSgF6Zh(2/5) AAS
>>89
あんたが考えてんの具体的にどのレベルだ？
こっちはネイティブアプリ同等の、ガントチャート状のスケジューラーの実装なんだが
コンポーネント間のメソッド呼び出しは結構多いぞ
91(1): 2021/08/10(火)11:17 ID:x9cqqxVb(1) AAS
奇遇だな、Webとネイティブ両用のスケジュール管理系やってるよ
推測だけどコンポーネントとデータ構造(いわゆるモデル)が分離できてないんだろうと思うわ
同じものをネイティブでも作ることを仮定して共有できるところ(モデル)とできないところ(レンダリング)にわけて考えてみるといんじゃね
92: 2021/08/10(火)11:27 ID:0SSgF6Zh(3/5) AAS
>>91
！！
まだReact不慣れで困ってる
半年前にReact初めてそちはクラスベース（TS）だったので、
実装できない事は無かったのでこういった苦労はなかった
>>コンポーネントとデータ構造(いわゆるモデル)が分離できてないんだろうと思うわ
どうだろう？
あんまり業務的なことを書くわけにはいかんけど、
親パネル側から、配置されたコンポーネントの機能を呼び出したいんだが、
コンポーネントが今回クラスから関数に変わったんで、
コンポーネント側にコンポーネント固有の機能（クラスん時はメソッド）が実装しずらくなって困ってる
関数コンポーネントだとここにメソッドとか置かないもんなの？
93: 2021/08/10(火)12:03 ID:0SSgF6Zh(4/5) AAS
関数なんだから、オブジェクト指向的な実装はムリなんだろうな
とりあえず、
・クラス → モジュール
・プロパティ → モジュールの関数の引数
・メソッド → モジュールの関数
に置き換えて実装してみるわ
94: 2021/08/10(火)12:28 ID:dmkhwQTT(1) AAS
関数であれクラスであれ(つかもっと前から)Reactのコンポーネントは渡されたデータ(Props)をただベタッとレンダリングするだけってのがコンセプト
その超基本的なところをわかってなさそう
他の言語やフレームーワークの考え方のままReact始めたのか知らんけどそれをReactに置き換えるよりReact流の考え方を身につけたほうがいいと思うわ
95(1): 2021/08/10(火)12:36 ID:0SSgF6Zh(5/5) AAS
いや、アトミックデザイン的に機能分割して
その単位をオブジェクト指向的にデザインしてたわー−（前回プロジェクト）
でもRender()しかやらん関数と、
その外にはみ出た処理で細切れ関数だらけになって、
コード読みにくいは、実装も美しくならんわー− ( ﾉД`)ﾄﾞｽﾙ
96: 2021/08/10(火)14:00 ID:8kvO2lBn(1) AAS
Redux素晴らしいって言ってた人たちは今息してんのかな
97(1): 2021/08/10(火)14:08 ID:UtkECLI3(1/3) AAS
>>95
この流れでアトミックデザインを出してくるのものすっごく薄っぺらい
98(1): 2021/08/10(火)14:15 ID:i+IrTlV6(1) AAS
>>97
アトミックデザイン使わず
あなたが表現してあげたら？
99(1): 2021/08/10(火)14:57 ID:UtkECLI3(2/3) AAS
>>98
単純にいらんやろ
「コンポーネントをオブジェクト指向でデザインしてた」で十分だしそれがReactらしくないって話やん
100(1): 2021/08/10(火)15:49 ID:LAvum0nL(1) AAS
>>99
コンポーネントの分割単位が伝わらんよ
101: 2021/08/10(火)16:58 ID:UtkECLI3(3/3) AAS
>>100
この流れで分割単位の話なんかいらないじゃん
88から読み直してみ
102: 2021/08/10(火)18:51 ID:M/It2Akn(1) AAS
> コンポーネント間のメソッド呼び出し
？？？？？？？？？？
103(2): 2021/08/10(火)19:15 ID:Yh+H2qBA(1/2) AAS
データフェッチに swr を使う前提であれば Recoil より swr で状態管理 hooks 作る方が良いんだろうか
両方使う例があるなら見てみたい
104(1): 2021/08/10(火)19:38 ID:Qo7qEUjv(1) AAS
>>103
swrはサーバーサイドの情報を取ってきてキャッシュするものだから扱う状態はサーバーステートとでも呼ぶべきものなんだよね
だからクライアントサイド固有の状態を
swrで扱おうとは俺は思わない
apolloなんかはクライアントのステートも一緒に扱えるのを売りにしてるけど余計な手間をかけてるだけにしか見えない
コンポーネントのローカルステート→useState, useReducer
クライアントのグローバルステート→redux, recoilなど(俺は好かんがcontextもここに入る)
サーバーステート→swr, react query, apolloなど
と使い分けてる
105: 2021/08/10(火)20:04 ID:Yh+H2qBA(2/2) AAS
>>104
参考になるありがとう
依存ライブラリ増加を嫌うことへの妥協案で >>103 を考えてたけどその方が役割分担が明確だから状態と取得キャッシュが混合するより状態を把握しやすそう
上下前次1-新書関写板覧索設栞歴
あと 376 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.009s