タグ

hooksに関するtri-starのブックマーク (3)

  • React hooksを基礎から理解する (useContext編) - Qiita

    React hooksとは React 16.8 で追加された新機能です。 クラスを書かなくても、stateなどのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。 React hooksを基礎から理解する (useState編) React hooksを基礎から理解する (useEffect編) React hooksを基礎から理解する (useContext編) 今ここ React hooksを基礎から理解する (useReducer編) React hooksを基礎から理解する (useCallback編) React hooksを基礎から理解する (useMemo編) React hooksを基礎から理解する (useRef編) useContextとは Contextとは? Reactコンポーネントのツリーに対して「グローバル」とみなすデータについて利用す

    React hooksを基礎から理解する (useContext編) - Qiita
  • React.Context で作る GlobalUI Custom Hooks

    GlobalUI を、React.Context を利用して作る TIPS です。どの Component からも利用しやすい様に Custom Hooks を経由します。何かを更新した際、画面上部に通知を表示する(Notification)よくあるサンプルを元に解説します。(↓ の画像の様なもの) Custom Hooks 利用例 Notification を呼び出す Component は次の様なコードになります。showNotification関数に任意の文字列を与え表示する、というシンプルな作りです。 export const Example = () => { const { showNotification } = useNotificationDispatch(); const handleClick = () => { showNotification("更新しました");

    React.Context で作る GlobalUI Custom Hooks
    tri-star
    tri-star 2021/03/21
    Contextを参照系/更新系で分けることで無駄な更新の伝搬を抑止する考え方
  • useReducerの本質:良いパフォーマンスのためのロジックとコンポーネント設計 - Qiita

    React Hooksの正式リリース(2019年2月)からそろそろ一年が経とうとしています。Hooksの登場によってReactのコンポーネントは関数コンポーネントが一気に主流になり、クラスコンポーネントが新規に作られる機会は激減しました。 また、React 17.x系ではConcurrent Modeの導入とともにさらに2種類の新フックが追加される見込みであり、いよいよ関数コンポーネントの能力がクラスコンポーネントを真に上回る時代が来ることになります。 この記事では、フックの一種であるuseReducerに焦点を当てて、どのようなときにuseReducerが適しているのかを説明します。究極的には、useReducerによって達成できるパフォーマンス改善があり、ときにはそれがコンポーネント設計にまで影響を与えることを指摘します。 useStateの影に隠れたり、なぜかReduxと比較されたり

    useReducerの本質:良いパフォーマンスのためのロジックとコンポーネント設計 - Qiita
    tri-star
    tri-star 2020/01/21
    reactでは数値のstateをフォームで扱う場合文字列で持った方が扱いやすく、あるあるらしい。
  • 1