Preact X の新機能

Preact X は Preact 8.x からの大幅な進歩です。私たちはコードのあらゆるビットとバイトを再考し、その過程で数多くの主要な機能を追加しました。また、より多くのサードパーティライブラリをサポートするための互換性の強化も同様です。

簡単に言うと、Preact X は私たちが常に Preact に求めていたものです。それは、小さく、速く、機能満載のライブラリです。そしてサイズといえば、すべての新機能と改善されたレンダリングが 8.x と同じサイズに収まっていることを嬉しく思うでしょう！

フラグメント

Fragments は Preact X の主要な新機能であり、Preact のアーキテクチャを再考する主な動機の1つです。これらは、追加のラッピング DOM 要素なしで、親要素に合わせて子要素をインラインでレンダリングする特殊な種類のコンポーネントです。さらに、render から複数のノードを返すことができます。

フラグメントドキュメント →

function Foo() {
  return (
    <>
      <div>A</div>
      <div>B</div>
    </>
  )
}

REPL で実行

componentDidCatch

私たちは皆、アプリケーションでエラーが発生しないことを望んでいますが、時にはエラーが発生します。componentDidCatch を使用すると、コンポーネントツリーの奥深くの例外を含め、render などのライフサイクルメソッド内で発生するエラーをキャッチして処理することが可能になりました。これは、ユーザーフレンドリーなエラーメッセージを表示したり、何か問題が発生した場合に外部サービスにログエントリを書き込んだりするために使用できます。

ライフサイクルドキュメント →

class Catcher extends Component {
  state = { errored: false }

  componentDidCatch(error) {
    this.setState({ errored: true });
  }

  render(props, state) {
    if (state.errored) {
      return <p>Something went badly wrong</p>;
    }
    return props.children;
  }
}

REPL で実行

フック

Hooks は、コンポーネント間でロジックを共有しやすくする新しい方法です。既存のクラスベースのコンポーネントAPIの代替を表します。Preact では、これらは preact/hooks を介してインポートできるアドオン内に存在します。

フックドキュメント →

function Counter() {
  const [value, setValue] = useState(0);
  const increment = useCallback(() => setValue(value + 1), [value]);

  return (
    <div>
      Counter: {value}
      <button onClick={increment}>Increment</button>
    </div>
  );
}

REPL で実行

createContext

createContext-API は getChildContext() の正当な後継者です。getChildContext は値を決して変更しないことが確実な場合には問題ありませんが、プロバイダーとコンシューマーの間にあるコンポーネントが shouldComponentUpdate を介して更新をブロックし、false を返すとすぐに問題が発生します。新しいコンテキスト API では、この問題は過去のものになりました。これは、ツリーの奥深くまで更新を配信するための真の pub/sub ソリューションです。

createContext ドキュメント →

const Theme = createContext('light');

function ThemedButton(props) {
  return (
    <Theme.Consumer>
      {theme => <div>Active theme: {theme}</div>}
    </Theme.Consumer>
  );
}

function App() {
  return (
    <Theme.Provider value="dark">
      <SomeComponent>
        <ThemedButton />
      </SomeComponent>
    </Theme.Provider>
  );
}

CSS カスタムプロパティ

時には、小さなことが大きな違いを生み出すことがあります。最近の CSS の進歩により、スタイル設定にCSS変数を活用できます。

function Foo(props) {
  return <div style={{ '--theme-color': 'blue' }}>{props.children}</div>;
}

互換性がコアに

私たちは常に新機能の追加と Preact の推進に熱心でしたが、preact-compat パッケージはそれほど多くの愛を受けられませんでした。これまで、これは Preact と互換性レイヤーにまたがる大規模な変更を調整することを困難にする別のリポジトリに存在していました。compat を Preact 自体と同じパッケージに移動することで、React エコシステムのライブラリを使用するために追加でインストールするものは何もありません。

互換性レイヤーは preact/compat と呼ばれるようになり、forwardRef、memo、および数え切れないほどの互換性の改善など、いくつかの新しいトリックを習得しました。

// Preact 8.x
import React from "preact-compat";

// Preact X
import React from "preact/compat";

多くの互換性修正

これらは多すぎてリストできませんが、React エコシステムのライブラリとの互換性の面で大幅に成長しました。特に、完全なサポートを保証するために、テストプロセスにいくつかの人気のあるパッケージを含めるようにしました。

Preact 8 でうまく動作しなかったライブラリに遭遇した場合は、X でもう一度試してみてください。すべてが期待どおりに動作する可能性が高いです;)