Zenn
Open4

React自由帳

React
yukijiyukiji

Error Boundary

  • React 16 でを導入
  • 自身の子コンポーネントツリーで発生したJavaScript エラーをキャッチ
  • エラーを記録
  • クラッシュしたコンポーネントツリーの代わりにフォールバック用の UI を表示する React コンポーネント
  • キャッチしないエラーもある
  • error boundary はコンポーネントに対して JavaScript の catch {} ブロックのように動作する

メモ

  • error boundary になれるのはクラスコンポーネントだけ（関数コンポーネントは？）

https://kudolog.net/posts/func-error-boundary/

yukijiyukiji

RefとDOM

  • Ref は render メソッドで作成された DOM ノードもしくは React の要素にアクセスする方法
yukijiyukiji

Fragment

  • DOM に余分なノードを追加することなく子要素をまとめることができるようになります。
  • divでラップする必要がなくなる
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

短い記法

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

key 付きフラグメント

  • フラグメントでは key を持つことができる
  • key はフラグメントに渡すことができる唯一の属性
yukijiyukiji

JSXを深く理解する

JSX 型にドット記法を使用

  • JSX の中においては、ドット記法を使うことによって React コンポーネントを参照することもできる
  • 単一のモジュールがたくさんの React コンポーネントをエクスポートしているような場合に便利
  • どんな時使うん？
import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;

属性の展開

  • props オブジェクトがあらかじめ存在しており、それを JSX に渡したいような場合は ... を「スプレッド」算子として使用することで、props オブジェクトそのものを渡すことができる
  • 以下のふたつの JSX の式はまったく等しい
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}