- 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. 両方です。どっちの話題をしているかは文脈で判断してください
- 75 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 05:48:13.99 ID:eZAyHvHf.net]
- クラスはhookなしで同じことができるから提供する必要がない
- 76 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 07:45:04.97 ID:o9olz+i9.net]
- >>74
いやだからsetStateという汎用的な物しか提供できないっことね
stateを自分で好き勝手いじれるのに
それをライブラリが管理するって無理でしょ
hooksは内部で対応するコンポーネントとその状態を管理してるから
ライブラリとして提供できる
- 77 名前：デフォルトの名無しさん [2021/02/14(日) 13:32:40.22 ID:wyKYn9A/.net]
- >>76
分かんない人だな。
なんで今のclassベースの実装をこの話に持ち込むの。
hookの機能を”function”でなく、jsの”class”で実現できないの？っていう疑問なの。
- 78 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 14:00:51.86 ID:+4ZWExbH.net]
- お前もわからずやだな
useStateだろうがuseEffectだろうがuseCallbackだろうがuseRefだろうがclassコンポーネントはhookなしで同じことが実現できてるだろ
- 79 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 14:19:02.14 ID:wyKYn9A/.net]
- hookを知らないやつだったか。アホらし。
- 80 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 14:34:40.65 ID:kA8DCabn.net]
- 時系列的には
クラスコンポーネント: 状態を扱える
↓
"ステートレス"関数コンポーネント: 状態を扱えない
↓
関数コンポーネント+hooks: 状態を扱える
と発展してきた
つまりhooksはクラスコンポーネントができていたことを関数コンポーネントでもできるようにするために後から追加されたもの
ただし
クラスコンポーネント: 状態をコンポーネントが管理する
関数コンポーネント+hooks: 状態をフレームワークが管理する
という違いがある
これが今後のconcurrent modeやserver componentsで大きな違いになってくる
フレームワークができることを増やすにはコンポーネント側の自由度は低い方がよくてそれがpureな関数コンポーネント
- 81 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 14:46:29.94 ID:wyKYn9A/.net]
- >>80
この解説から見ると、自分の疑問は
"状態をフレームワークが管理する"
にはclass実装では不利なのか？向かないのか？
って事になる。ね。
- 82 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 15:15:15.08 ID:kA8DCabn.net]
- クラスコンポーネントのインスタンスはthis.～で自由に状態を扱えてしまうからフレームワークには都合が悪い
そこをthis禁止のように縛っていくとただの関数でいいやってなる
- 83 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 16:39:29.19 ID:DVWK/pJu.net]
- useCallbackみたいな単なるラッパー関数がclassにも欲しいってこと？
なんかそう言うパッケージ見たことあるぞ
- 84 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 16:59:03.97 ID:FekQTk3J.net]
- classコンポーネントにuseCallbackはいらんやろ
前はbindしたり面倒だったけどstage3のclass fields使えばこれだけ
class Foo extends React.Component {
handleClick = (ev) => {...}
- 85 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 21:01:15.04 ID:K2VDjDyL.net]
- 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>
- 86 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 21:03:03.46 ID:NOmukaW1.net]
- ス・レ・チ
- 87 名前：デフォルトの名無しさん mailto:sage [2021/02/15(月) 02:51:04.90 ID:E7fw/gtI.net]
- マジで障害者かな？
この板に巣食ってる人がいるのは認識してたけど
- 88 名前：デフォルトの名無しさん [2021/04/22(木) 04:19:05.03 ID:vjCFYs66g]
- 「社員全員が副業」を体現し普及するスタートアップ、売上前年比４倍が物語る今後
https://newswitch.jp/p/23029
「全員副業必須」型破りな経営がもたらした、社員の脱会社依存と幸せ
https://ix-careercompass.jp/article/4586/
社長も社員も全員副業 ひとつの会社に頼らない働き方
https://style.nikkei.com/article/DGXMZO66620470V21C20A1000000/
「副業」社員で成り立つ会社登場 働き方改革の最先端
https://www.sankei.com/premium/news/200831/prm2008310006-n1.html
仕事を「時間と場所」から解放せよ！ 週休3日、スーパーフレックス──新しい働き方は日本企業に通用するか
https://www.itmedia.co.jp/news/articles/1809/28/news017.html
週休3日なのに年収を3倍にした男性の「時短術」
https://news.yahoo.co.jp/articles/090b7e720c2e8c6fb0d524b67a40182f70d8fdf2
“週休3日制”導入で売上4割増の例も…日本企業で普及期に、週30時間が常識に
https://biz-journal.jp/2020/01/post_138414.html
「 リモートワークで手放すべき7つのこと」働き方改革の先の世界
https://tebanasu-lab.com/interview/9828/
週休3日制をさらに進めた週休4日制
https://www.k-society.com/recruit/why-four-days-off-a-week/
- 89 名前：デフォルトの名無しさん [2021/06/18(金) 09:52:07.92 ID:IQL7BQ/N.net]
- React Hooks + Reduxの利点を述べた記事をいくつか読んだのですが、
MVCでだめな理由がよくわかりませんでした。
複数のModelがReduxのStoreに一本化される: Modelをシングルトンにして、
Storeの内部で区分するところをModelのメンバとして区分する。
ViewからはActionを発行してReducerを通さないとStoreを更新できない:
ViewはControllerに登録されたメソッドを通してしかModelを更新できない。
Storeの更新はViewに自動的に反映される。
Model(とそのメンバ、孫メンバ)がObservableであれば、Modelの更新を
自動的にViewに反映させることができる。
ではだめなんでしょうか。
- 90 名前：デフォルトの名無しさん [2021/08/10(火) 10:10:26.07 ID:0SSgF6Zh.net]
- Reactで関数コンポーネントで本気実装始めたんだが、
関数コンポーネント面倒くさ過ぎじゃね？
関数コンポネント入門位の実装なら問題なかったんだが、
ちょっと込み入ったの実装しようと思ったら
クラスじゃないんで、コンポーネントの自前メソッドを（子から親、親から子）公開するのとか
そのTS型定義をどうするのとかうまく解決できんのか？これwww
- 91 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 10:18:58.12 ID:Yti8n+JL.net]
- 込み入った実装ってだいたい設計から間違ってるよね…
- 92 名前：デフォルトの名無しさん [2021/08/10(火) 10:22:58.46 ID:0SSgF6Zh.net]
- >>91
あんたが考えてんの具体的にどのレベルだ？
こっちはネイティブアプリ同等の、ガントチャート状のスケジューラーの実装なんだが
コンポーネント間のメソッド呼び出しは結構多いぞ
- 93 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 11:17:59.39 ID:x9cqqxVb.net]
- 奇遇だな、Webとネイティブ両用のスケジュール管理系やってるよ
推測だけどコンポーネントとデータ構造(いわゆるモデル)が分離できてないんだろうと思うわ
同じものをネイティブでも作ることを仮定して共有できるところ(モデル)とできないところ(レンダリング)にわけて考えてみるといんじゃね
- 94 名前：デフォルトの名無しさん [2021/08/10(火) 11:27:05.53 ID:0SSgF6Zh.net]
- >>93
！！
まだReact不慣れで困ってる
半年前にReact初めてそちはクラスベース（TS）だったので、
実装できない事は無かったのでこういった苦労はなかった
>>コンポーネントとデータ構造(いわゆるモデル)が分離できてないんだろうと思うわ
どうだろう？
あんまり業務的なことを書くわけにはいかんけど、
親パネル側から、配置されたコンポーネントの機能を呼び出したいんだが、
コンポーネントが今回クラスから関数に変わったんで、
コンポーネント側にコンポーネント固有の機能（クラスん時はメソッド）が実装しずらくなって困ってる
関数コンポーネントだとここにメソッドとか置かないもんなの？
- 95 名前：デフォルトの名無しさん [2021/08/10(火) 12:03:49.33 ID:0SSgF6Zh.net]
- 関数なんだから、オブジェクト指向的な実装はムリなんだろうな
とりあえず、
・クラス → モジュール
・プロパティ → モジュールの関数の引数
・メソッド → モジュールの関数
に置き換えて実装してみるわ
- 96 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 12:28:03.76 ID:dmkhwQTT.net]
- 関数であれクラスであれ(つかもっと前から)Reactのコンポーネントは渡されたデータ(Props)をただベタッとレンダリングするだけってのがコンセプト
その超基本的なところをわかってなさそう
他の言語やフレームーワークの考え方のままReact始めたのか知らんけどそれをReactに置き換えるよりReact流の考え方を身につけたほうがいいと思うわ
- 97 名前：デフォルトの名無しさん [2021/08/10(火) 12:36:48.42 ID:0SSgF6Zh.net]
- いや、アトミックデザイン的に機能分割して
その単位をオブジェクト指向的にデザインしてたわー－（前回プロジェクト）
でもRender()しかやらん関数と、
その外にはみ出た処理で細切れ関数だらけになって、
コード読みにくいは、実装も美しくならんわー－ ( ﾉД`)ﾄﾞｽﾙ
- 98 名前：デフォルトの名無しさん [2021/08/10(火) 14:00:37.21 ID:8kvO2lBn.net]
- Redux素晴らしいって言ってた人たちは今息してんのかな
- 99 名前：デフォルトの名無しさん [2021/08/10(火) 14:08:07.90 ID:UtkECLI3.net]
- >>97
この流れでアトミックデザインを出してくるのものすっごく薄っぺらい
- 100 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 14:15:30.49 ID:i+IrTlV6.net]
- >>99
アトミックデザイン使わず
あなたが表現してあげたら？
- 101 名前：デフォルトの名無しさん [2021/08/10(火) 14:57:48.57 ID:UtkECLI3.net]
- >>100
単純にいらんやろ
「コンポーネントをオブジェクト指向でデザインしてた」で十分だしそれがReactらしくないって話やん
- 102 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 15:49:45.99 ID:LAvum0nL.net]
- >>101
コンポーネントの分割単位が伝わらんよ
- 103 名前：デフォルトの名無しさん [2021/08/10(火) 16:58:18.35 ID:UtkECLI3.net]
- >>102
この流れで分割単位の話なんかいらないじゃん
88から読み直してみ
- 104 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 18:51:43.55 ID:M/It2Akn.net]
- > コンポーネント間のメソッド呼び出し
？？？？？？？？？？
- 105 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 19:15:22.44 ID:Yh+H2qBA.net]
- データフェッチに swr を使う前提であれば Recoil より swr で状態管理 hooks 作る方が良いんだろうか
両方使う例があるなら見てみたい
- 106 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 19:38:32.34 ID:Qo7qEUjv.net]
- >>105
swrはサーバーサイドの情報を取ってきてキャッシュするものだから扱う状態はサーバーステートとでも呼ぶべきものなんだよね
だからクライアントサイド固有の状態を
swrで扱おうとは俺は思わない
apolloなんかはクライアントのステートも一緒に扱えるのを売りにしてるけど余計な手間をかけてるだけにしか見えない
コンポーネントのローカルステート→useState, useReducer
クライアントのグローバルステート→redux, recoilなど(俺は好かんがcontextもここに入る)
サーバーステート→swr, react query, apolloなど
と使い分けてる
- 107 名前：デフォルトの名無しさん mailto:sage [2021/08/10(火) 20:04:49.62 ID:Yh+H2qBA.net]
- >>106
参考になるありがとう
依存ライブラリ増加を嫌うことへの妥協案で >>105 を考えてたけどその方が役割分担が明確だから状態と取得キャッシュが混合するより状態を把握しやすそう
- 108 名前：デフォルトの名無しさん mailto:sage [2021/08/11(水) 19:43:56.70 ID:u2eXJHJo.net]
- >>90
ちゃんとhooks使ってるか？
- 109 名前：デフォルトの名無しさん mailto:sage [2021/08/11(水) 20:53:01.89 ID:UmYmX+C7.net]
- >>108
ぶっちゃけクラスの方が書きやすく
コードも綺麗だ（実力高い人の場合）
関数コンポーネントは
実装の自由度がhocksｂﾆその拡張ぐらｂ｢しかなく
フレームワーク的なのが造りづらく感じてる
- 110 名前：デフォルトの名無しさん mailto:sage [2021/08/12(木) 03:09:43.60 ID:YWc6Jioi.net]
- 実力が高いw
本気でそう思ってるならqiitaでもzennでもどこでもいいから記事に書いてみろよ
間違いなく日本中からボロクソに叩かれるよ
- 111 名前：デフォルトの名無しさん mailto:sage [2021/08/12(木) 03:23:50.10 ID:c9YvWIsD.net]
- >>110
受け答えから見て実力が低そう
- 112 名前：デフォルトの名無しさん mailto:sage [2021/08/12(木) 17:08:42.90 ID:qp3m1ZO5.net]
- >>109
クラス記法はこういう欠点があるからなあ
ttps://speakerdeck.com/sonatard/coheision-coupling?slide=24
- 113 名前：デフォルトの名無しさん [2021/08/12(木) 17:57:27.67 ID:/tY+Xjfe.net]
- 大方の単細胞腦は、SQLDBとNoSQLDBの時がそうであったように
関数コンポーネントとクラスコンポーネントのどちらかに
絶対的な優劣をつけたがってんじゃね？
今回も関数コンポーネントがマッチする場合と、
そうでない場合がありそうに見える
とくに、関数コンポーネントは
コンポーネントのインスタンスが自由に扱えない（扱えなさそう）から
そういった処理の実装時に（React用で無いJSライブラリを無理やり動かしてたようなケースとか）
トラブりそうな気がする
- 114 名前：デフォルトの名無しさん [2021/08/12(木) 18:16:18.47 ID:mo2yl2b6.net]
- 典型的な「分かってないことが分かってない」ヤツ
- 115 名前：デフォルトの名無しさん mailto:sage [2021/08/12(木) 18:29:54.23 ID:1fVVrAZN.net]
- 優劣はどうでもよくてクラスコンポーネントは互換性のために残されてるだけってのがReactの立場
新しい機能の中には関数コンポーネントからしか使えないものが出てるしこれからも増える
そもそも対等な選択肢ではないから議論する価値がない
状況に合わせて適応するってのが一番大事
- 116 名前：デフォルトの名無しさん [2021/08/12(木) 18:43:59.17 ID:/tY+Xjfe.net]
- >>115
>> 互換性のために残されてるだけってのがReactの立場
なんと！(; ･`д･´)
- 117 名前：デフォルトの名無しさん mailto:sage [2021/08/12(木) 18:53:29.47 ID:1fVVrAZN.net]
- 今の公式ドキュメントやチュートリアルは古くてクラスコンポーネントが大きく扱われてるのが本当に良くない
それはReactチームも分かってるからドキュメントを全面的に書き換えてる最中
もちろん関数コンポーネントとHooksメインで
- 118 名前：デフォルトの名無しさん [2021/08/12(木) 19:01:46.19 ID:/tY+Xjfe.net]
- >>117
なんと！(; ･`д･´)
- 119 名前：デフォルトの名無しさん [2021/08/26(木) 15:41:55.94 ID:CFvcLd/B.net]
- フック初心者ですが
「フックは関数のトップレベルのみで呼び出してください。」
とあります。この関数は関数コンポーネントの意味で合ってますでしょうか？
- 120 名前：デフォルトの名無しさん [2021/08/26(木) 15:51:22.45 ID:CFvcLd/B.net]
- <Button1>と<Button2>で
それぞれ内部でuseStateを使ってたら
<Button1>
<Button2/>
</Button1>
はNGになるのでしょうか？
- 121 名前：デフォルトの名無しさん mailto:sage [2021/08/26(木) 16:38:00.65 ID:gityixOl.net]
- >>119
> この関数は関数コンポーネントの意味
違う
ifやforなどの制御構造の内側から呼び出すなということ
要するに関数コンポーネントの呼び出しごとにhookが実行されたりされなかったりしてはいけない
なので?:や&&などと組み合わせるのもダメ
- 122 名前：デフォルトの名無しさん mailto:sage [2021/08/26(木) 16:39:25.72 ID:gityixOl.net]
- >>120
それはOK
それぞれのコンポーネントは独立してるから問題ない
- 123 名前：デフォルトの名無しさん mailto:sage [2021/08/26(木) 16:45:57.37 ID:KmLAFOYJ.net]
- >>122
有り難い！
しかし判り辛いですね
お題目だけだと
公式に具体例を上げてくれないと
勘違いしそう...
- 124 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 13:34:41.69 ID:gabOubiT.net]
- hookの実行順でレンダリング毎の同一性を保証してるってわかってれば当たり前のことなんだけどね
- 125 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 13:54:27.15 ID:KVovKrAi.net]
- 順番で状態を管理してるって一昔前の考えだと
なんだそりゃって感じになるんだけど
そもそも自分で管理するのはクソだから
全部フレームワークに任せちゃえってなってる
React凄い
- 126 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 15:19:14.34 ID:B8clkCSU.net]
- 翻訳の問題かもしれんけど
「関数のトップレベル」という表現が判りずらい
「関数内部の最初の行あたり」で良くないか？
- 127 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 15:45:49.48 ID:nZgJAtld.net]
- function Foo(props) {
if (props.flag) useEffect(...)
...
最初の行だけどアウト
- 128 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 15:48:30.00 ID:KVovKrAi.net]
- 「同じフックが常に実行されるようにすること」
これでよくね？
- 129 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 15:49:19.59 ID:B8clkCSU.net]
- 関数のトップレベルの訳としての話しだよ(´Д`)
- 130 名前：デフォルトの名無しさん mailto:sage [2021/08/27(金) 15:57:29.79 ID:rY0RNuZ6.net]
- モジュールのトップレベルもわからない？
それじゃトップレベルawaitも分からないしJSやるの無理やろ
- 131 名前：デフォルトの名無しさん [2021/08/28(土) 04:17:28.74 ID:5cd2kTad.net]
- useCallback これっている？
fnのMemoならMemoってキーワードも名称から抜けてるし
useMemo(() => fn, deps) と同じならなおさら...
- 132 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 04:35:56.44 ID:52Q/kK4D.net]
- fnをファットアローでインラインに書いてみ
- 133 名前：デフォルトの名無しさん [2021/08/28(土) 04:42:56.91 ID:5cd2kTad.net]
- うー－ん！初学者だからなのか意味わからんです
- 134 名前：デフォルトの名無しさん [2021/08/28(土) 04:46:30.48 ID:5cd2kTad.net]
- useCallback(fn, deps) が useMemo(() => fn, deps) こう書けるって事なんじゃないですか？
- 135 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 04:54:08.75 ID:aWJHFkdS.net]
- useCallback((event) => {...}, deps) を useMemo(() => (event) => {...}, deps) って書きたいかって話
- 136 名前：デフォルトの名無しさん [2021/08/28(土) 05:10:24.97 ID:5cd2kTad.net]
- >>135
良い！
そっちのが良い！
fnのメモなのに、useMemoCallback()になってないので直観的に思えない
初学者だと、ぱっと見CallbackするにはuseCallback()が必須に見える
理由はMemoの文字が入ってないから
- 137 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 06:24:50.37 ID:P0+dXebs.net]
- それ言ったらuseMemoなんてuseState使えばいいし内部でstate使ってるのにuseNemoStateじゃないの直感的じゃないよね
- 138 名前：デフォルトの名無しさん [2021/08/28(土) 08:24:29.02 ID:5cd2kTad.net]
- useCallback だと名称から、
コールバック使いますよ！の宣言に見えると言っている
実際はコールバックをメモしますよ！だから
コード読むとき直感的でないと言っている
実際、初学者で関数コンポネント内でコールバックを定義するときは
useCallback()を使わなければならないと思いこんでいる人が少なからず居ると思う
- 139 名前：デフォルトの名無しさん [2021/08/28(土) 10:18:42.44 ID:rJz23Izt.net]
- Ionicと比べた場合のReact nativeのメリットはアプリの動作速度が速いところ？
- 140 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 10:19:30.77 ID:rJz23Izt.net]
- ageてしまって申し訳ない
- 141 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 10:59:30.05 ID:4fr1GGj/.net]
- >>138
初学者は
> useCallback()を使わなければならないと思いこんでいる
で丁度いい
- 142 名前：デフォルトの名無しさん [2021/08/28(土) 11:35:50.02 ID:5cd2kTad.net]
- >>141
その心は？
- 143 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 12:30:31.08 ID:fYYl/4Rj.net]
- >>142
不要なuseCallbackを書いても実害はない
超大規模ならチリツモでパフォーマンスに影響あるかもしれないが初学者には関係ない
対して必要なuseCallbackを忘れるとuseEffectやReact.memoに影響しうるが初学者には気付きにくい
最初は愚直にuseCallback書いて後から不要なケースを学べばいい
- 144 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 13:47:14.15 ID:17Xf1f5F.net]
- >>143
なるほど！
その意味であえて関数名もそうしたんだろうか...
- 145 名前：デフォルトの名無しさん [2021/08/28(土) 23:14:15.55 ID:5cd2kTad.net]
- https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
"カスタムフックは技術的にはReact機能ではない" って
ステートレス関数に状態を保持する機能が
jsに元よりあるという事でしょうか？
- 146 名前：デフォルトの名無しさん mailto:sage [2021/08/28(土) 23:39:41.08 ID:tYNkdatt.net]
- カスタムフック===ユーザー定義フック
利用者(アプリケーション)で定義するものであってReactが提供する機能ではない
- 147 名前：デフォルトの名無しさん [2021/08/29(日) 00:17:55.75 ID:V85oGWwE.net]
- >>146
それは了解してた！（質問を間違えた！）
フックを実現する技術（ステートレス関数に状態を保持する機能）は
ＪＳに元からあるという記述が公式にあったようにおもうのだけれど、
それは何？って事が言いたかった...
- 148 名前：デフォルトの名無しさん [2021/08/29(日) 01:51:35.47 ID:V85oGWwE.net]
- >>147
前のリンクの文意から推察するに、フックはreactの特別な機能じゃなく
JSのクロージャーと array.push と array.pop とかで実装できるって事かな？
誤りありましたらご指摘下さい
- 149 名前：デフォルトの名無しさん mailto:sage [2021/08/29(日) 03:34:12.05 ID:pzZWZODD.net]
- 引用しろボケカス
- 150 名前：デフォルトの名無しさん mailto:sage [2021/08/29(日) 12:10:00.26 ID:OiCqCGE7.net]
- >>148
前のリンクの文意というのが
> Since Hooks are regular JavaScript functions, you can combine built-in Hooks provided by React into your own “custom Hooks”.
ら辺のことなら全然違う
Reactが提供する「組み込みフック」はJSの普通の関数だからそれを組み合わせて「カスタムフック」を作れると言ってるだけ
Reactが「組み込みフック」をどう実装しているかは触れてない
公式にあったという記述がなんのことかわからないがユーザー向けのドキュメントにReactの内部実装について書いてあるとは考えにくいので何か勘違いしてるんだろう
- 151 名前：デフォルトの名無しさん mailto:sage [2021/08/29(日) 12:12:17.85 ID:OiCqCGE7.net]
- もっともReactの組み込みフックがJS(+Flowtype)で実装されてるのは考えるまでもなく事実
詳しく知りたければソースを読めばいい
https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.new.js
- 152 名前：デフォルトの名無しさん [2021/08/29(日) 13:18:38.44 ID:V85oGWwE.net]
- >>150
>>147 で言ったように、それは最初から解ってる
聞きたかったのは、フック自体の実装方法だよ！
>>151
そりゃそーーだ
- 153 名前：デフォルトの名無しさん mailto:sage [2021/08/29(日) 13:41:49.73 ID:1XJvcbdc.net]
- >>152
お前さぁ・・・
フック自体の実装方法が知りたいならそう書けよ
無関係なリンクや公式のことを書くから「そんなことは書いてない」「お前の勘違い」「ボケカス」って話になるんだよ
つーか5ch開く前にすることあるだろ
- 154 名前：デフォルトの名無しさん mailto:sage [2021/08/29(日) 14:30:21.63 ID:LbdE2Z/6.net]
- >>152
preactのソースを読め
わずか400行そこらでhooksを実装してる
俺がここ数年で見たコードで最も美しいコードだ
型もついてるからめちゃくちゃ読みやすい
https://github.com/preactjs/preact/blob/master/hooks
- 155 名前：デフォルトの名無しさん [2021/08/29(日) 21:46:55.62 ID:V85oGWwE.net]
- >>154
(; ･`д･´)
- 156 名前：デフォルトの名無しさん mailto:sage [2021/09/18(土) 13:05:29.83 ID:ZtgFEKoc.net]
- reduxでいままでやってたような処理ってhooksではuseContextとuseRuducerの組み合わせでやるってことであってます？
- 157 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 00:13:37.74 ID:fIDZ4k/Q.net]
- 最近react始めて、リスト構造を持つようなデータの画面表示は配列のmap関数使ってjsx書けってのは理解したんだが、配列の要素の持つデータを一か所でも変えると残りの要素は全く変わってないのに全てレンダリング処理し直すことになるよな？
reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど、変更された要素のコンポーネントだけにレンダリング処理させる方法ってないんか？
- 158 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 00:18:04.28 ID:pwmEuNTH.net]
- >>157
keyを使え
チュートリアルにも乗ってたはず
- 159 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 01:13:11.44 ID:GKDt5rSn.net]
- >>157
ならない
- 160 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 02:01:14.08 ID:Rr9hULkc.net]
- >>157
要素を別コンポーネントにしてReact.memoする
その場合も156が書いてるようにkeyは必須
でも各要素のレンダリングがよほど重くない限り気にすることないと思うぞ
- 161 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 08:25:15.93 ID:fIDZ4k/Q.net]
- >>158,159,160
㌧クス
もうちょい調べてみるわ
- 162 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 12:16:07.93 ID:GKDt5rSn.net]
- >>161
リストの出力の場合
アイテム毎にkey必ず振らなければない
key無いのはバグだからね
コンソールにエラー出てるはず
- 163 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 12:53:40.75 ID:2GdVuLmq.net]
- keyが必要なのは確かだがそれが影響するのはリアルDOMの更新
keyがないと
> reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど
が機能しなくなる
本来の質問であるコンポーネントのレンダリングを回避するのに必要なのはReact.memo
- 164 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 18:39:05.51 ID:0kyk7DvV.net]
- ID:GKDt5rSn の的外れ感
- 165 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 19:00:16.83 ID:wV0zqhwC.net]
- ストアに登録する前に1ヶ月テスト運用したいのですがそんなこと可能なんですか？
テストユーザーは50名程度の予定です
- 166 名前：デフォルトの名無しさん mailto:sage [2021/09/20(月) 21:16:44.39 ID:hoT+CjfW.net]
- それReact関係ないよね
- 167 名前：デフォルトの名無しさん mailto:sage [2021/09/22(水) 02:10:39.83 ID:LiQqK68K.net]
- うーん、先に代弁してくれてる人もいる通り、自分が聞きたかったことを解消できるものじゃなかったな、keyを付けないかんてのは改めてよく分かったけど。memoに関しては配列でmap関数でjsx組立ててる場合に言及した解説サイトは見当たらんかったし、うまくいくかは一度書いて調べてみるかー
- 168 名前：デフォルトの名無しさん mailto:sage [2021/09/22(水) 15:53:36.27 ID:LiQqK68K.net]
- >>167だけど、memo化して特定の子要素だけレンダリングが呼び出されるのを確認できたわ
ありがとう
- 169 名前：デフォルトの名無しさん [2021/09/25(土) 21:37:04.38 ID:h7oOvGYh.net]
- Vue.jsだと公式サイトからリンクにawesome-vueってのがあって
https://github.com/vuejs/awesome-vue
ここ（Components & Libraries）にVue向けのlibraryやcontrolのリストが列挙されてて大変便利なんですけど、
これのReact版とか無いですか？
- 170 名前：デフォルトの名無しさん [2021/09/25(土) 21:39:38.06 ID:h7oOvGYh.net]
- 言った直後にまんまのがあった...
awesome-react
awesome-react-components
笑
- 171 名前：デフォルトの名無しさん mailto:sage [2021/09/25(土) 23:03:28.71 ID:PknKU9DC.net]
- awesome-react-hooksとかawesome-reduxとか思いつくのはだいたいあるキガス
- 172 名前：デフォルトの名無しさん mailto:sage [2021/09/27(月) 11:55:16.25 ID:DYuWVLW4.net]
- JSだとホットリロードが機能するけどTSだと機能しないのだけど
これはTSの自動トランスパイルが機能してないってことですかね？
- 173 名前：デフォルトの名無しさん mailto:sage [2021/09/27(月) 11:57:06.64 ID:ZRFQgXut.net]
- >>172
？
- 174 名前：デフォルトの名無しさん mailto:sage [2021/09/27(月) 12:09:11.49 ID:DYuWVLW4.net]
- 再起動したら直ったわ
- 175 名前：デフォルトの名無しさん mailto:sage [2021/09/28(火) 17:29:52.40 ID:s3NqJ5bC.net]
- reactのコンポーネントにクリックとかのイベント処理を付ける時って、onClick＝｛clickHandler｝みたいに書くじゃない
このclickHandlerの処理の中でコンポーネントに渡してある属性を参照したいときってどう書くんだ？
clickHandlerを関数を返す関数にして、
clickHandler ＝（props）＝＞ () ＝＞｛‥｝
コンポーネントにはonClick＝｛clickHandler(props)｝ってやればできるんだけど、これだとuseCallbackが使えなくて毎回レンダリングし直されちゃうんだよな
event.targetはネイティブのDOMの情報しか載ってこないし、誰か教えてえろいひと
|
 |
