質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

意見交換

クローズ

5回答

1536閲覧

React の state の仕様ってどう思いますか??

Hayato1201

総合スコア228

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1グッド

0クリップ

投稿2024/04/30 05:36

1

0

テーマ、知りたいこと

React の useState って常に Setter が必要になるのは仕方ないのでしょうか?だとしたら Vue 系と比較した際に少々面倒では無いでしょうか?

普段自分は vue/nuxt を使うことが多く react/next などに関しては知識が乏しいので間違っていたらご教示いただけますと幸いです。

例えば Vue3系なら以下のように記述できるかと思いますが

ts

1const count = ref<Number>(0) 2 3count.value = count.value + 1

React なら以下とかですかね?

ts

1 const [count, setCount] = useState<Number>(0) 2 3 setCount(count + 1)

一つならまだしも複数だったりオブジェクトだったりするとまた記述量が一気に増えませんか?

例えば Java などでも setter getter の省略をしてくれる lombok は必須だったりしますが、やはり setter などを常に記述しなければならないというのはそうでない言語や FW を使っていると面倒に感じてしまうのですがまず常に上記のように setter を一緒に宣言しないといけないというのは合っていますか?
もしそうであればこのように setter を常に一緒に用意する必要がありかつそれを java の lombok のように省略する術も無いことは不便では無いでしょうか??

YouheiSakurai👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

回答5

#1

maisumakun

総合スコア145368

投稿2024/04/30 13:57

一つならまだしも複数だったりオブジェクトだったりするとまた記述量が一気に増えませんか?

複雑な更新が必要な場合は、更新のロジック自体をreducerへ追い出してしまう手段があります。

reducerは以前のstateと変更内容を受け取り、新しいstateを返すだけの単なる関数であるため、テストもやりやすいです。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

#2

honey32

総合スコア199

投稿2024/05/01 10:36

Vue には習熟していないので詳しくはないですが、

  • Vue は、ref, reactive で用意した 一つ一つの小さなミュータブルなオブジェクトをミューテートする ことで画面が更新される
  • React は 裏側にある React のシステムに、再レンダリングを要求する ことで画面が更新される

という違いがあり、これが count.value = newValuesetCount(newValue) という表面的な API の違いに表れているのだと思います。

一つならまだしも複数だったりオブジェクトだったりするとまた記述量が一気に増えませんか?

たしかに、複雑なオブジェクト (配列が絡んで、階層が2段にも3段にもなっている) とかだと Immer に頼る必要があるくらい大変です。

ただ、記述量が増える原因のほとんどは、ステートの置き方や親子の連携が適切でない ことです。そのようなコードになってしまうことと比べれば、setCount(newValue) と書かねばならないことによる煩雑さは微々たるものだと思います。

(注) ステートの置き方や親子の連携が適切でない……たとえば、const derivedValue = fn(baseValue) で済むところに useState と useEffect を使ってしまうとか、「イベントハンドラは子から親に伝播する」原則に従わないとか…


ちなみに、 React では、 v19 で Server Actions / Client Actions という機能が追加される予定です。「バックエンドにリクエストを投げて、レスポンスが返ってくるまで待つ」という処理を抽象化してくれる機能です。 React はこのように決まり切った処理をうまく共通化・抽象化してくれるので、うまく乗っかれば必要なステートは少なくなります。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

#3

GPTeacher

総合スコア1

投稿2024/05/08 01:33

React の useState 使うたびに、ステートの値(count)とそれを変える関数(setCount)が必要やねんな。これ、Vue と比べたら、ちょっと書くの面倒やろうとは思うわ。React と Vue で内部でステート更新の処理が違うからやで。

React の useState フック

React で useState 使うときは、ステートの値とその更新関数の両方を取り扱うで。このやり方のええところは、React がステート更新をちゃんと制御できるってことや。ステートの更新は非同期でまとめて処理されるから、パフォーマンスも上がるんや。

javascript

1const [count, setCount] = useState(0); 2 3setCount(count + 1);

Vue のリアクティブシステム

Vue では、ref とか使って、直接ステートを更新できるんや。Vue 3 で Composition API 使うと、もっと直接的にリアクティブなデータいじれるようになってるんやで。

javascript

1const count = ref(0); 2 3count.value++;

比較と違い

  • シンプルさ: Vue は値を直接更新できるから、コードがシンプルになる。React は更新関数使ってステートを変えなあかん。
  • パフォーマンスと最適化: React の useState は更新関数を使ってステートを変えることで、ステート変更が予測可能になって管理しやすい。Vue はリアクティブなプロキシを通して直接ステート変えるから、自動的に内部トラッキングが行われるんや。

総括

React で useState 使うたびに setter 関数が要るのは、Vue みたいに直接値を変えられるフレームワークと比べたら面倒かもしれへんけど、これにはステート更新の意図をはっきりさせる、というメリットもあるんや。React は useState の他にも useReducer みたいなもっと複雑なステートロジックに対応するフックもあるで。Vue のように直接ステートを更新する方法は提供してへんけど、それぞれのやり方にはメリットとデメリットがあるから、使うフレームワークやアプリの要件によってえらぶのが大事やで。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

#4

natural2

総合スコア12

投稿2024/05/08 02:26

honey32 さん
ちなみに、 React では、 v19 で Server Actions / Client Actions という機能が追加される予定です。

これは React ではなく Next.js の機能ではないでしょうか?

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

#5

honey32

総合スコア199

投稿2024/05/08 13:05

#4

Server Actions をサポートしているサーバー対応のフレームワークが必要になると思いますが、Server Actions は React の機能です。

https://ja.react.dev/blog/2024/04/25/react-19#server-actions

Client Actions については、おそらく純粋な SPA (create-react-appcreate-vite-app を使った、createRoot() を単純に呼び出すだけのもの) や、サーバーを伴わない静的生成されるタイプのサイトでも動作すると思います。

https://ja.react.dev/blog/2024/04/25/react-19#actions

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

最新の回答から1ヶ月経過したため この意見交換はクローズされました

意見をやりとりしたい話題がある場合は質問してみましょう!

質問する

関連した質問