React と React Native のスレ

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. 両方です。どっちの話題をしているかは文脈で判断してください 40 名前：デフォルトの名無しさん mailto:sage [2019/08/16(金) 09:00:38.45 ID:DTIEgPs0.net] 公式blogから React 16.9.0 およびロードマップの更新 https://reactjs.org/blog/2019/08/08/react-v16.9.0.html 新しいReact DevTools https://reactjs.org/blog/2019/08/15/new-react-devtools.html 41 名前：デフォルトの名無しさん mailto:sage [2019/08/16(金) 11:07:23.70 ID:SpwmZ6gR.net] 半年ぶりか 滞ってるな 42 名前：デフォルトの名無しさん mailto:sage [2019/08/16(金) 14:14:55.65 ID:fLRfCcm2.net] オワコンなのかな 43 名前：デフォルトの名無しさん mailto:sage [2019/08/16(金) 16:05:56.38 ID:DTIEgPs0.net] ・Hooksのフォローアップの作業量を過小評価していた ・Concurrent Mode と Suspense for Data Fetching の作業に注力 　Facebookのサイトで実際に試していてリリースに向けて修正中 この辺で時間掛かっているらしい 44 名前：デフォルトの名無しさん mailto:sage [2019/08/16(金) 23:37:57.69 ID:RmCywHfR.net] hooks はなあ モナド欲しい 45 名前：デフォルトの名無しさん mailto:sage [2019/08/26(月) 03:11:43.67 ID:xTwJabF+.net] create-react-app xxx とすると、 xxxというreactアプリ(フォルダ)が作られますが、 このxxxの部分を変更したい場合、そのままフォルダを編集してしまっても問題ありませんか？ 他にもpackage.jsonのnameもxxxになっておりますがこちらも変更したりして 46 名前：デフォルトの名無しさん mailto:sage [2019/09/26(木) 18:30:21.05 ID:OrvmZwJd.net] React Native 0.61 https://facebook.github.io/react-native/blog/2019/09/18/version-0.61 ・ライブリロードとホットリロードは新実装のファストリフレッシュに統合された ・0.60で支障があったCocoaPodsでのuse_frameworksの問題が解消 47 名前：デフォルトの名無しさん mailto:sage [2019/09/28(土) 09:05:26.72 ID:yWQY0maC.net] ReactNativeでaxios動かないんだが。。。 48 名前：デフォルトの名無しさん [2019/10/28(月) 18:32:37.59 ID:kOeifBSs.net] macOS上でのReact Native(Project Catalystを使用) https://twitter.com/brunolemos/status/1185636022346043392 https://github.com/react-native-community/discussions-and-proposals/issues/131#issuecomment-544189591 (deleted an unsolicited ad) 49 名前：デフォルトの名無しさん [2019/11/10(日) 09:20:57.59 ID:ZVDov6M9.net] vscode+react+material-ui使ってるんだけど下のコードでボタンが赤にならないのなんでだろう・・・ なんかPrimaryが紫になってるんだが・・・ import { createMuiTheme } from '@material-ui/core/styles'; import red from '@material-ui/core/colors/purple'; const mytheme = createMuiTheme({ palette: { primary: red, }, }); const useStyles = makeStyles({ button: { backgroundColor: mytheme.palette.primary.main, }, }); export default function CenteredGrid() { const classes = useStyles(); return ( <div className={classes.root}> <Grid container spacing={0} justify={'center'}> <Grid item xs={12}> <Button className={classes.button} variant='outlined'> botton </Button> </Grid> </Grid> </div> ); } 50 名前：デフォルトの名無しさん mailto:sage [2019/11/10(日) 09:43:45.39 ID:ZVDov6M9.net] ごめん自決して カラーのimportミスってた ×import red from '@material-ui/core/colors/purple'; ◯ import red from '@material-ui/core/colors/red'; スレ汚しすまん 51 名前：デフォルトの名無しさん mailto:sage [2019/11/28(木) 18:27:49.62 ID:GNo6CJtR.net] react-native doctor コマンド https://facebook.github.io/react-native/blog/2019/11/18/react-native-doctor プロジェクト設定や開発環境の診断と修正 52 名前：デフォルトの名無しさん [2020/01/20(月) 13:50:40 ID:NblZ7u1g.net] 初歩的な質問で申し訳ないのですが リセットCSSを適用させようとすると、スタイルがリセットCSSのみしか適応されません。 具体的には・・・ App.js import React from "react"; import { render } from "react-dom"; import "./reset.css"; import "./first.scss"; import { BrowserRouter, Switch, Route } from "react-router-dom"; こんな感じのをApp.jsに読み込ませているのですが、 reset.cssをインポートするとreset.cssのHTMLがリセットされたスタイルしか反映されず、first.scssは反映されません。 reset.cssを外しfirst.scssのみにすればちゃんとfirst.scssの内容がHTMLに反映されます。 HTMLのCSSをリセットしてから、オリジナル（first.scss)に変更といった事がしたいのですが、 どうすれば良いでしょうか？ reset.cssはこちらのHTML5 Doctor Reset CSSというのをreset.cssにコピペしてインポートしています。 html5doctor.com/html-5-reset-stylesheet/ 試しにfirst.scssの中身の最上部にHTML5 Doctor Reset CSSの中身を張り付けてみたのですが同じでした。 53 名前：デフォルトの名無しさん mailto:sage [2020/01/20(月) 14:09:55 ID:1C7qXqig.net] importされるのはcssじゃなくてjs(実質reset.css.js)だからね 問題はwebpackの設定じゃないの？ webpack entryでググってみたら？ 54 名前：デフォルトの名無しさん mailto:sage [2020/01/29(水) 20:07:56.78 ID:kAGOnFqI.net] 最近androidシミュでfetchが上手くいかなくなったけど何でだろ？ 55 名前：デフォルトの名無しさん mailto:sage [2020/05/23(土) 18:46:27 ID:wT2dUHsh.net] useStateとReduxって共存していいの？ 56 名前：デフォルトの名無しさん mailto:sage [2020/05/24(日) 13:54:49 ID:rk0sziuW.net] >>55 システム全体で必要なのはRedux Postする為にそのFormだけで必要なものはuseState って使い方してる 共存って点で言うならHooksか旧型式かを共存させなきゃ別にいいと思う 57 名前：デフォルトの名無しさん mailto:sage [2020/06/09(火) 16:01:35.59 ID:mEfhV+3L.net] React.ComponentとSuspenseを使ってリストを読み込んで表示するプログラムを書いているのだけど renderでメンバ関数を呼んで読込するとthisがつく変数(stateとか)が全てリセットされるよどうして？ リセットされる変数をstaticにすると動くようです 58 名前：デフォルトの名無しさん mailto:sage [2020/07/25(土) 07:59:44.00 ID:e6nmtc2O.net] 人工知能フレームワークのGpt-3がReact上で動くんだよなあ 59 名前：デフォルトの名無しさん mailto:sage [2020/07/25(土) 14:10:16.00 ID:ZlqyHRW3.net] >>57 まだそんな事やってるのか？ 早くHooksに移行した方がシンプルで使いやすいよ 60 名前：デフォルトの名無しさん [2020/08/05(水) 20:39:39.66 ID:HaLefuVq.net] reactでフォームの連動させたいんだけど 良いチュートリアルやサンプルをおしえてください 調べ方でも大丈夫です 61 名前：デフォルトの名無しさん mailto:sage [2020/10/06(火) 09:47:28.33 ID:FaC1oBor.net] >>60 連動？ って具体的に何やりたいの？ 62 名前：デフォルトの名無しさん mailto:sage [2020/10/06(火) 15:47:26.50 ID:3JbOTVG0.net] >>60 公式を嫁！ それか、オレの知り合いの本を嫁！ 以上。 63 名前：デフォルトの名無しさん mailto:sage [2020/10/07(水) 08:13:26.21 ID:9X+ETi/j.net] 他のフォーム要素を同時にどうかしたいって仮定するとonClickイベントやonChangeイベントのコールバックにメソッド噛ませればいいんじゃない？ 64 名前：デフォルトの名無しさん mailto:sage [2020/10/11(日) 20:19:56.38 ID:/PPF0LFF.net] Html,Javascriptのソースコードをreact nativeに書き直してるけどDom要素のID管理していたのを書き直すのが辛すぎる 何かよいライブラリないかなぁ 65 名前：デフォルトの名無しさん [2021/01/04(月) 01:07:02.79 ID:EMrQXkgT.net] iOSやAndroidアプリを作りたくてprogateのhtmlとJavaScriptと reactまでやったんですが、次に何をすれば良いか分かりません。僕は次に何を学べばいいですか？ 66 名前：(u＿・y) mailto:sage [2021/01/04(月) 11:37:19.32 ID:oZidFLop.net] (u＿・y)順序からしておかしくね (u＿・y)Androidアプリ作るならまずAndroid上でハローワールドだろ (u＿・y)Googleになんかアカウント作って登録あれこれやるんじゃねーの (u＿・y)Win以外のアプリを作るので難関になるのはそういった手順と環境構築絡みなので、 (u＿・y)周りに先生がいない状況で独学初心者がいきなりAndroidアプリってのはハローワールドまでに時間かかるぞ 67 名前：デフォルトの名無しさん mailto:sage [2021/01/12(火) 01:34:10.49 ID:dF2LSabj.net] 公式のドキュメントに全部書いてあるから全部読め 68 名前：デフォルトの名無しさん mailto:sage [2021/01/21(木) 19:04:19.07 ID:RZX+x1N+.net] Java から来て、最近 React はじめたんだけど、MVC 思想的なのは最近フロントエンドではなくなっていってる感じなん？ せめて View 部分は分けないと気持ち悪いんだけど、チュートリアルみても割とごちゃまぜなのよね… 69 名前：デフォルトの名無しさん [2021/02/14(日) 03:47:14.57 ID:wyKYn9A/.net] React の hookを初めてみてるんだけど、 これClassベースの機能で提供できないのかな？ functionなのに永続化を無理やりやってるようでコード読みづらい。 その永続化をuse接頭語のみで判断しなければならないという... functionじゃなきゃhookの機能が提供できない？？というモヤモヤ感が払拭できないです。 70 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 04:24:42.10 ID:qcnkr3Yb.net] 元々はクラスベースで提供されてた機能を関数コンポーネントでも使えるようにしたのがhookやで 71 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 04:26:06.17 ID:o9olz+i9.net] >>69 目に見える副作用をフレームワーク側に追い出して ユーザーからは副作用がないようにしてる設計は素晴らしいと思うけどね 72 名前：デフォルトの名無しさん [2021/02/14(日) 04:47:15.25 ID:wyKYn9A/.net] >>71 副作用がないようにしてる設計 それがclassベースでは出来ない？？って疑問。 >>70 ならhookがclassより上という事ではなくなる。 でも公式コメントでもclassよりhookのモデルが優秀みたいな書き方。 ただclassは無くさずこのまま残しますみたいな。 なんかfunctionを無理やり生存期間拡張してるところが 感覚的に違和感モヤモヤ。 hookの機能をclassで実装するとやりづらい箇所って、 同名メソッドを複数定義できる箇所ぐらい？ 73 名前：デフォルトの名無しさん mailto:sage [2021/02/14(日) 04:59:08.67 ID:o9olz+i9.net] >>72 もちろんできるしそれを手動でやってきたのがクラス でもsetState呼ばなかったり状態にオブジェクトが必須だったりで色んなミスが起きやすかった それをフレームワーク側で全部やって ユーザーが書きやすくするのがHooks 人間がやるよりフレームワークがやる方が信頼性が高いし賢いからそこは任せた方が良いよねってことで生まれたと勝手に思っている 74 名前：デフォルトの名無しさん [2021/02/14(日) 05:41:48.27 ID:wyKYn9A/.net] >>73 だから、それ（hook）をclassべースで提供できないの？って言ってんの。 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てしまって申し訳ない

---

---

[ 続きを読む ] / [ 携帯版 ]

read.cgi ver5.27 [feat.BBS2 +1.6] / e.0.2 (02/09/03) / eucaly.net products.
担当:undef