Reactでロジックをhooksにまとめないという選択肢 - Hello Tech
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 突然ですが、Reactを使用する際、コンポネントのロジックや状態が増えてきたとき、みなさんはどうされてるでしょうか。 関数コンポネントでは、一般にcustom hooksとしてまとめて切り出すことが多く行われていると思います。 今回の記事では、useState/useRef + custom hooksという単位で切り出すのではなく、 クロージャを使いロジックや状態をコンポネントの外に持たせるようにリファクタリングすることで、コードの見通しが良くなる、という事例を紹介します。 JavaScriptにおけるクロージャとは、関数が外側のスコープの変数などへの参照を保持できる機能のことです。ここではクロージャとして実装しましたが、同等のことはclassを使っても実装できます。 A
HookとRedux ToolkitでReact Reduxに入門する | Hypertext Candy
この記事では、React アプリケーションに Redux を組み合わせる方法を紹介します。 タイトルの通り、React の機能である Hook と Redux の組み込みを簡単にしてくれるライブラリ Redux Toolkit を活用した比較的新しめの方法なので、他の解説記事とは少し異なる記述になるかもしれません。 これから React や Redux を勉強する方は戸惑うかもしれませんが、導入方法がいくつかあるというだけで、どちらも間違いではないので、参考の一つとして読んでください。 Redux とは 状態管理 Redux とは、JavaScript製の状態管理ライブラリです。 「状態」とは、アプリケーションで扱う動的なデータという理解でよいでしょう。たとえばユーザー名とか、いいねの数が「状態」です。状態は時系列とともに変化します。 状態管理ライブラリが解決する問題は、コンポーネントをま
React Hooks 親コンポーネントから子コンポーネントをのDOMを ref を使って触りたい。 - かもメモ
React Hooks を使ったアプリでボタンの状態やフィールドへのフォーカスなど ref を使った操作を、そのボタンやフィールドの親コンポーネントから呼び出したい時のメモ。 日本語が不自由なのでサンプルを 例えばボタンを押した時に非同期処理をするから、処理が完了するまでボタンを disabled にしておきたいみたいな時 単純に useRef したもの props で渡しても上手くいかない 親コンポーネント import React, { useRef } from 'react'; import SubmitButton from './SubmitButton'; function PostList(props) { const submitBtn = useRef(null); const onSubmitHandler = async (e) => { submitBtn.cur
React window リサイズ時にリスト要素の高さを揃えたい - かもメモ
カルーセルとか横並びの要素の高さをReactで揃えたいような場合 (display: flex が使えないようなケース) 要素のそれぞれのDOMにアクセスして高さを取得して最も高いものを取得しなければならないので、リストのような Ref が必要になります。 また、ウィンドウサイズが変わった時に再計算する必要があるので、 resize イベントで最大値の再計算をする必要もあります。 useRef で複数の要素に ref を渡す DOMへのアクセスは RefObject を通じてアクセスできますが、リスト要素それぞれのDOMにアクセスしたいとなると、それぞれに ref を渡す必要があります。 import React, { useState, useRef, createRef } from 'react'; function Carousel({ initItems }) { const [
【React hooks】意外と知らないrefの使い方 - Qiita
Reactでコンポーネントから子コンポーネントや要素などを操作するときに便利なrefだが、 意外に調べても使い方が出てこなかったので、様々な利用シーンに合わせて使い道をまとめてみた。 DOMにアクセス import React, { useRef, useEffect } from 'react'; const Component = () => { const el = useRef(null); useEffect(() => { console.log(el.current); }, []); return ( <div ref={el}>DOM</div> ); }; export default Component; import React, { useRef, useEffect } from 'react'; class Child extends React.Compon
フックに関するよくある質問 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新しいドキュメントではフックを使って React が学べます。 フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 このページではフックに関するよくある質問にいくつかお答えします。 導入の指針 フックが使える React のバージョンはどれですか？ クラスコンポーネントを全部書き換える必要があるのですか？ クラスではできず、フックでできるようになることは何ですか？ これまでの React の知識はどの程度使えますか？ フック、クラスのいずれを使うべきですか、あるいはその両方でしょうか？ フックはクラスのユースケースのすべてをカバーしていますか？ フックは
最近Reactを始めた人向けのReact Hooks入門
ReactにHooksの仕組みが導入されてからずいぶん経ちました。Hooks導入当時のコミュニティの熱狂は、それはもう凄いものでした。「Reactにとんでもない機能が実装されたぞ！」と大騒ぎで、Hooksについての新しい記事を見ない日はありませんでした。 そんな盛り上がりも冷めつつあり、Hooksも実務に密着した「当たり前」の機能になったのかな、と思いました。しかしその一方でまだHooksについてはよくわからないという人も多く、知識の二極化を生んでいるように感じます。 世の中にはReactにすでに全く馴染んでいる人向けのHooksの解説記事は多く見当たりますが、最近のReact初心者に向けてのHooks解説記事はあまり多くありません。この記事では、Hooksについて実例を示しつつReactの基礎的な面からの解説を行います。 React初心者向けのHooks 世の中にはもう多くの高品質なHo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
