Zenn
Open7

reactキャッチアップ時のメモ

React
yamishyamish

数カ月後に業務でReact.jsを使う機会がありそうなので、とりあえずチュートリアルを改めてやった。
https://ja.reactjs.org/tutorial/tutorial.html

昔は英語しかなかった気がするけど今はちゃんと日本語化されてる。
頭の中でVue.jsでの動きと対比しながらやった。

リアクティブにstateを反応させるためにthis.setStateと使わないと行けない辺りは注意が必要かも？
Vue.jsでリアクティブに動作させるための感覚は掴んでたけど注意が必要だ

yamishyamish

Main Concepts

1.Hello World

2.JSXの導入

  • 埋め込みは{}
  • HTMLの属性はcamelCaseで書く
  • ""で囲んだら文字列扱い

3.要素のレンダー

  • React.render()

4.コンポーネントとprops

  • 基本理念はvueと同じ

5.stateとライフサイクル

  • setStateで変更しないとリアクティブにならない
    • stateとpropsを使いたい場合ははsetState((state, props) => {})で
  • componentDidMount, componentWillUnmount
  • reactもデータは下方向に伝わる。どうせイベントは下から上なんだろう

6.イベント処理

  • thisの扱いは注意が必要
  • vueの@click.preventに相当するのは普通にイベントハンドラ内でe.preventDefault()してあげる

7.条件付きレンダー

  • renderがnullを返す場合はコンポーネントは描画されない

8.リストとkey

  • keyの考え方はvueと同じ

9.フォーム

  • v-modelみたいな便利なものはなくて、きちっとvalueとonChangeでハンドリングする

10.stateのリフトアップ

  • vueでいうとこの$emitでイベントアップみたいな感じではなく、イベントハンドラを親から渡す形式っぽい
  • ステートをどこで保持するかとかの考え方はvueと同じ

11.コンポジション vs 継承

  • vueでいうとこのslot
  • 親から差し込まれた子要素はprops.childrenで取り出す

12.React の流儀

  • 自分で色々実装してみた。vueでいうとこのcomputedは普通にクラスにgetterを定義すれば良さそう
yamishyamish

Advances Guides

アクセシビリティ

https://ja.reactjs.org/docs/accessibility.html

ここは意識するときが来たらちゃんと見るでいいかな

コード分割

https://ja.reactjs.org/docs/accessibility.html

  • 動的インポートの話と、その時のコンポーネントの取り回し
  • vueではNuxt.jsで暗黙的にルーティングのレイヤーでやっていたので、react or Next.jsでも同じような考え方でやる感じになると思った

コンテクスト

https://ja.reactjs.org/docs/context.html

  • vueでいうとこのthis.$routerとかでコンポーネント間で共有できるグローバルなアレを作るとこ
    • vueと同じくpropsのバケツリレーを避けたりするために使ってはいけない
  • React.createContext()
  • vueと違って暗黙的に全部差し込まれて使える状態までにはならないので、static contextType = MyContext;する

Error Boundary

https://ja.reactjs.org/docs/error-boundaries.html

  • React16から追加
  • コンポーネント版のcatch{}みたいなやつ
    • 普通コンポーネントの描画壊れると全部巻き込んで死ぬけど、<ErrorBoundary>のとこで捕まえてフォールバックして別コンポーネント描画したりできる
      • 知らないけどNext.jsではいい感じにルーティングのレイヤーとかでラップしてそう
  • 非同期処理とかのエラーはキャッチできないので注意

Ref と DOM,refのフォワーディング

https://ja.reactjs.org/docs/refs-and-the-dom.html
https://ja.reactjs.org/docs/forwarding-refs.html

  • 生のDOMを触らなければ行けない時が来たら読む

フラグメント

https://ja.reactjs.org/docs/fragments.html

  • <React.Fragment>
    • 短縮記法で、単純に<>でも良いらしい
  • vueで言うところの<template>かな
  • keyつけなきゃいけないので注意

高階 (Higher-Order) コンポーネント

https://ja.reactjs.org/docs/higher-order-components.html

  • いい具合にラップして共通化すると良いよという話

他のライブラリとのインテグレーション

https://ja.reactjs.org/docs/integrating-with-other-libraries.html

  • jQueryとか他のライブラリで作っているとこに対して混ぜるときが来たらちゃんと読む

JSX を深く理解する

https://ja.reactjs.org/docs/jsx-in-depth.html

yamishyamish

パフォーマンス最適化

https://ja.reactjs.org/docs/optimizing-performance.html

  • 長いリストの仮想化
    • これ大事そうなので覚えておく
    • vueでは意識したことなかったな

ポータル

https://ja.reactjs.org/docs/portals.html

  • ダイアログとか自前で作るときに見る

プロファイラ API

https://ja.reactjs.org/docs/profiler.html

  • パフォーマンスとか調査するときに使う

ES6 なしで React を使う

https://ja.reactjs.org/docs/react-without-es6.html

  • そのシチュエーションがきたら見る

JSX なしで React を使う

https://ja.reactjs.org/docs/react-without-jsx.html

  • そのシチュエーションがきたら見る

差分検出処理

https://ja.reactjs.org/docs/reconciliation.html

Ref と DOM

https://ja.reactjs.org/docs/refs-and-the-dom.html

  • DOMに直接アクセスする時が来たら見る

レンダープロップ

https://ja.reactjs.org/docs/render-props.html

  • なるほどという感じ

静的型チェック

https://ja.reactjs.org/docs/static-type-checking.html

  • Flowは使わないと思うので一旦無視
  • TypeScriptのとこだけ読んだ
  • vue-typescript-xxxとかnuxt-typecript-xxxみたいなライブラリを入れなくて良いのはイイネ

strictモード

https://ja.reactjs.org/docs/strict-mode.html

  • 開発時は入れておくと良さそう

PropTypes を用いた型チェック

https://ja.reactjs.org/docs/typechecking-with-proptypes.html

  • vueにもあった仕組みではある
  • TypeScriptを使うので頭の片隅においておく程度で良いはず

非制御コンポーネント

https://ja.reactjs.org/docs/uncontrolled-components.html

  • FormとかでDOMの仕組みそのまま使いたいときとかの説明
  • <input type="file" />とかでは常に使うっぽい

Web Components

https://ja.reactjs.org/docs/web-components.html

  • まあ今は意識しなくていい
yamishyamish

HOOKS

フックの導入

https://ja.reactjs.org/docs/hooks-intro.html

フック早わかり

https://ja.reactjs.org/docs/hooks-overview.html

  • classでのstateの扱いがとても面倒そうだったのでこれはすっごい便利そう

ステートフックの利用法

https://ja.reactjs.org/docs/hooks-state.html

副作用フックの利用法

https://ja.reactjs.org/docs/hooks-effect.html

フックのルール

https://ja.reactjs.org/docs/hooks-rules.html

独自フックの作成

https://ja.reactjs.org/docs/hooks-custom.html