ikapblog技術関連のメモや調べたことをメモしていきますホーム文字in画像QRIPアドレス確認Reactでstateが絡まってきたのでuseReducerを使う2022.03.22useReducerを使うコメント消すツールに置換機能を追加しようと思ったときに、絡み合ったuseStateよりも1つのuseReducerを使った方がいいということに思い至ったので、使い所の参考として使用例を記録しておきます。...}設定を保持する意図で使っていて、setSrcはonChangeで、setRegexesは設定画面の保存ボタンを押したときに動作するようにしていて、setResultはsetSrcの直後に使っていました。);}この段階ではマッチ部分は空文字に置換するようにしていました。置換後にsetResultを使用していました。このように使っていると、入力用のテキストエリアに文字列を打ち込むことでしかsetResultを走らせることができません。この仕様は置換機能を追加するときに動作の不自然さを感じるような気がするので修正する必要があります。(正直にいうと、現状でも正規表現を編集してもすぐに反映されないという問題はあります。)ということで設定変更の反映に一旦入力が必要になる問題を修正します。単純にstateでは不自然まずはうまくいっていない例から。(お急ぎの場合はスキップしてください。目次からの移動が便利です。)最初は、置換に使う文字列用のstateを保持して、replaceAllでその文字列を使用するようにしていました。);}当然このままでは置換文字列を入力しただけでは出力の文字列は更新されないので、setSubstitutionString()のあとにreplaceAllしてsetResult()を実行したくなります。このままでは置換文字列が即時には反映されません。これは、stateへのsetは非同期的に実行されるため、setSubstitutionString()してもreplaceAllするときの値は、直前のsetSubstitutionString()がまだ反映されておらず、前回の値のままであることが原因です。そのため1つ前の状態の置換文字列が出力に反映されてしまいます。一応stateでも何とかなるuseStateのままでもなんとかなる方法も書いておきたいです。お急ぎなら読み飛ばして下さい。...}しかし、更新時の処理がコンポーネントのレンダーの中で何度も現れてしまうのは好ましくありません。updateResultは別で必要になる。);}このsrcの部分や、updateResult()に渡す引数が微妙に入れ替わるだけなのに、レンダー部分に頻出してくるのは非常に見辛いと思うので今回は使用しませんでした。今回の場合ではuseStateでオブジェクトを持つのは相応しくないですが、そういうこともできるというのは知っておくと便利そうです。initialState)は呼び出すと、stateとdispatchが返ってきて、stateの更新をdispatch()で行える関数です。dispatchにはオブジェクトを渡すことができ、dispatch(obj)すると渡したオブジェクトはreducerに渡ります。obj)は自分で定義する関数で、先ほどの渡されたオブジェクトをもとに新しいstateを生成して返すことでstateの更新を行えます。reducer関数に更新処理をまとめられるので、関連性の高いstateの更新処理の見通しが良くなると思います。コンポーネントのonChangeなどもdispatchを呼び出すだけなので、レンダー部分が簡潔になります。);}reducerの定義は必要ですが、コンポーネントのレンダーにてonChangeがとてもすっきりするのがわかります。先ほどのと同じくらいの記述量で出力結果の更新を行えます。dispatchに種類と必要な値を渡すだけなのでここまで簡潔にできます。reducerでのstateの更新では、更新しない値もreturnに含めるのを忘れないようにしましょう。...stateを最初に含めて、後続に更新するものを追記して上書きするのが良い方法だそうです。おわりstateが絡み合ってきたらオブジェクトを利用するか、useReducerを使うか、というようなことも考えておきたいと思います。レンダー部分に書く処理が長くなるようならuseReducer()を使うように心掛けるようにしたいです。一方で2つセットで扱うくらいのもの(座標など)ならオブジェクトを利用していきたいと思います。公式(下記参照)のと被ってしまうことを書いてしまったけど、使い分けについては考えることができたのでよしとしたいです。...stateとかを入れているせいかな。gulpの環境にした。今までのものからwebpackを追加した。その理由は、jsxファイルを分割して、他ファイルからrequireするときに、正しくできないため。gulpの環境をつくる。create-react-appとかelectron-react-boilerplateとかは、使わない。普通に調べると、前者のコマンドが付いて回る。恐ろし...Webサービスコード中のコメントなどを削除するツールを作ったコメントなどを正規表現で削除するツール(Webアプリ)を作った。左側もしくは上側のテキストエリアに文字列を入力すると、もう片方のテキストエリアに結果が表示されます。正規表現にマッチした部分を...Reactimgタグの画像を切り替えるとき、アスペクト比を維持しつつリサイズする1つのimgタグを使って代わる代わる画像を表示するとき、アスペクト比を維持しつつ枠いっぱいに表示する。リサイズのことを忘れていた。CSSの色指定の文字列がuseSpringの戻り値のSpringValueのtoでの戻り値に含まれていて、かつ、アニメーションが終わった状態で、コンポーネントの再レ...ReactReactでsetInterval使用で定期描画するreactでsetIntervalを使って定期的な描画を行う。調べたところ、コンポーネントをクラスで定義するか関数で定義するかで方法が異なるようだ。Caskで古いcaskのエラーを対処するコメントコメントを書き込むコメントをどうぞメールアドレスが公開されることはありません。名前メールサイトホームReactikapper主にITなどのアウトプットをしています。ご連絡等はTwitterの@ikapperへ。ikapblog.メニューホーム文字in画像QRIPアドレス確認ホーム検索トップサイドバータイトルとURLをコピーしました。