Reactを勉強し直す 〜 v16.0~16.4 〜

はじめに

React19がベータ版ではあるものの2024年4月にリリースされました。

にも関わらず自分の知識は16くらいから止まっているので、再度16から勉強し直していきます。

React 16.0~16.4

以下にReact 16.0~16.4で追加された機能について一部抜粋しながらまとめていく。

render()の返り値

配列や文字列が返せるようになった。ただし配列の場合はkeyをつける必要あり。

// 配列
render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

// 文字列
render() {
  return 'Look ma, no spans!';
}

Fragment

v16.0から配列を返せるようになったが、子要素をカンマで区切らなければいけなかったり、keyをつけなければいけなかった。

v16.2でFragmentが登場したことによりkeyをつけずに書けるようになった。

render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}

Context API

コンポーネントツリー全体にわたってデータを共有できる。問題となる親から子へのpropsのバケツリレーをすることなくデータにアクセスできる。

Providerでラップしたコンポーネントが対象範囲。

const ThemeContext = React.createContext('light');

class ThemeProvider extends React.Component {
  state = {theme: 'light'};

  render() {
    return (
      <ThemeContext.Provider value={this.state.theme}>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

class ThemedButton extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {theme => <Button theme={theme} />}
      </ThemeContext.Consumer>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <ThemeProvider>
        <ThemedButton />
      </ThemeProvider>
    );
  }
}

createRef API

DOM要素やクラスコンポーネントのインスタンスに直接アクセスするためのもの。

ただし、Reactはstateやpropsを通じて状態が管理されるべきであり、refは直接的なDOM操作を行うためできる限り使用はしない方が良い。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}

forwardRef API

親コンポーネントから子コンポーネントにrefを渡す（フォワードする）ためのもの。これによって親コンポーネントから子コンポーネントのDOMノードやクラスインスタンスに直接アクセスできる。

// 子コンポーネント
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 親コンポーネント
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Strict Mode

アプリケーションの潜在的な問題をチェックするためのツール。Fragmentのように実際には表示されない。ラップした子孫コンポーネントに対してチェックと警告を行う。

StrictModeチェックは開発モードでのみ実行されるため本番ビルドには影響しない。

v16.3では以下をサポートしてくれる。

• 安全でないライフサイクルのコンポーネントを特定する
• レガシー文字列参照APIの使用に関する警告
• 予期せぬ副作用の検出

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

PointerEvent

以下のポインタ系のイベントが使えるようになった。ただし、サポートされていないブラウザでは使えない。

• onPointerDown
• onPointerMove
• onPointerUp
• onPointerCancel
• onGotPointerCapture
• onLostPointerCapture
• onPointerEnter
• onPointerLeave
• onPointerOver
• onPointerOut

参考