Skip to content

Latest commit

 

History

History
209 lines (145 loc) · 13.8 KB

2020-02-26-react-v16.13.0.md

File metadata and controls

209 lines (145 loc) · 13.8 KB
Raw
title author redirect_from
React v16.13.0
threepointone
blog/2020/03/02/react-v16.13.0.html

本日、React 16.13.0 をリリースします。このリリースには、バグ修正と、今後のメジャーリリースに備えるための新しい非推奨の警告が含まれています。

新たな警告 {#new-warnings}

レンダリング中のいくつかの更新に関する警告 {#warnings-for-some-updates-during-render}

React コンポーネントは、レンダー中に他のコンポーネントに副作用を起こしてはいけません。

レンダー中に setState を呼び出すことはサポートされていますが 同じコンポーネントに対してのみ可能です。別のコンポーネントのレンダー中に setState を呼び出すと、警告が表示されるようになりました。

Warning: Cannot update a component from inside the function body of a different component.

**この警告は、意図しない状態変更によって引き起こされるアプリケーションのバグを見つけるのに役立ちます。**レンダーの結果として他のコンポーネントの状態を意図的に変更したいという稀なケースでは、setState 呼び出しを useEffect にラップすることができます。

スタイルルールが矛盾している場合の警告 {#warnings-for-conflicting-style-rules}

ある CSS プロパティの長い記法と短い記法を同時に含む style を動的に適用する場合、特定の更新の組み合わせにより、スタイリングの一貫性が失われることがあります。例えば、以下のようになります。

<div style={toggle ? 
  { background: 'blue', backgroundColor: 'red' } : 
  { backgroundColor: 'red' }
}>
  ...
</div>

この<div>はtoggleの値に関係なく常に背景色が赤になると思われるかもしれません。しかし、このデモを見てわかるように、toggleの値を trueとfalseの間で切り替えると、背景色はredから始まり、その後transparentとblueの間で交互に切り替わります。

**Reactは、スタイルルールの競合を検出し、警告をログに記録するようになりました。**この問題を修正するには、同一の CSS プロパティの短い記法と長い記法のバージョンを style プロパティ内で混在させないようにしてください。

一部の非推奨 string ref に関する注意点 {#warnings-for-some-deprecated-string-refs}

String ref（文字列形式の ref）は古いレガシー APIであり、既に勧められておらず、将来的に正式に非推奨となる予定です。

<Button ref="myRef" />

(String ref と異なり、一般的なref自体は完全にサポートされ続けますので混同しないようにしてください。）

将来的には、string ref からの移行を自動化するスクリプト ("codemod") を提供する予定です。しかし、まれに自動移行できないケースがあります。このリリースでは、非推奨化に先立ち、そのようなケースにのみ警告を追加しています。

例えば、レンダープロップパターンと一緒に string ref を使用した場合に発生します。

class ClassWithRenderProp extends React.Component {
  componentDidMount() {
    doSomething(this.refs.myRef);
  }
  render() {
    return this.props.children();
  }
}

class ClassParent extends React.Component {
  render() {
    return (
      <ClassWithRenderProp>
        {() => <Button ref="myRef" />}
      </ClassWithRenderProp>
    );
  }
}

このようなコードはしばしばバグを示します。(ref は ClassParent で利用できると思われるかもしれませんが、代わりに ClassWithRenderProp に置かれてしまいます)。

このようなコードはお持ちでない可能性が高いでしょう。もしそのようなコードがあって、それが意図的なものであれば、代わりに React.createRef() を使うよう変更してください:

class ClassWithRenderProp extends React.Component {
  myRef = React.createRef();
  componentDidMount() {
    doSomething(this.myRef.current);
  }
  render() {
    return this.props.children(this.myRef);
  }
}

class ClassParent extends React.Component {
  render() {
    return (
      <ClassWithRenderProp>
        {myRef => <Button ref={myRef} />}
      </ClassWithRenderProp>
    );
  }
}

Note

To see this warning, you need to have the babel-plugin-transform-react-jsx-self installed in your Babel plugins. It must only be enabled in development mode.

If you use Create React App or have the "react" preset with Babel 7+, you already have this plugin installed by default.

React.createFactoryの非推奨化{#deprecating-reactcreatefactory}

React.createFactory は React 要素を作成するためのレガシーのヘルパです。このリリースでは、このメソッドに非推奨の警告が追加されています。これは将来のメジャーバージョンで削除される予定です。

React.createFactory の使用法を通常の JSX で置き換えてください。代わりに、この 1 行ヘルパをコピー＆ペーストするか、ライブラリとして公開することもできます。

let createFactory = type => React.createElement.bind(null, type);

全く同じことをしています。

ReactDOM.unstable_createPortal の非推奨化（ReactDOM.createPortal に変更を） {#deprecating-reactdomunstable_createportal-in-favor-of-reactdomcreateportal}

React 16がリリースされたとき、createPortalは公式にサポートされるAPIになりました。

しかし、unstable_createPortalを採用している少数のライブラリが動作するように、unstable_createPortalをサポートされたエイリアスとして残していました。現在、この不安定なエイリアスは非推奨となっています。unstable_createPortal の代わりに createPortal を直接使ってください。これは全く同じシグネチャを持っています。

その他の改良事項 {#other-improvements}

hydrationの警告におけるコンポーネントスタック{#component-stacks-in-hydration-warnings}

React は開発者向け警告にコンポーネントスタックを追加し、開発者がバグを特定してプログラムをデバッグできるようにしています。今回のリリースでは、以前はコンポーネントスタックが存在しなかった多くの開発者向け警告に、それが追加されました。例として、以前のバージョンにあったこのハイドレーション警告を考えてみましょう。

A screenshot of the console warning, simply stating the nature of the hydration mismatch: "Warning: Expected server HTML to contain a matching div in div."

コードとともにエラーを指摘していますが、どこにエラーが存在しているのか、次に何をすればいいのかが明確ではありません。このリリースでは、この警告にコンポーネントスタックが追加され、以下のようになりました。

A screenshot of the console warning, stating the nature of the hydration mismatch, but also including a component stack : "Warning: Expected server HTML to contain a matching div in div, in div (at pages/index.js:4)..."

これにより、問題がどこにあるのかが明確になり、より早くバグの場所を特定して修正することができます。

注目すべきバグ修正 {#notable-bugfixes}

このリリースには、他にもいくつかの注目すべき改善点が含まれています。

  • Strict 開発モードでは、React はライフサイクルメソッドを 2 回呼び出し、不要な副作用の可能性を洗い出すようにしています。このリリースでは、その動作を shouldComponentUpdate に追加しています。これは、shouldComponentUpdate に副作用がない限り、ほとんどのコードには影響しないはずです。これを修正するには、副作用のあるコードを componentDidUpdate に移動してください。

  • Strict 開発モードでは、レガシーコンテクスト API の使用に関する警告には、警告のトリガとなったコンポーネントのスタックが含まれていませんでした。このリリースでは、欠けていたスタックが警告に追加されます。

  • 無効な（disabled の）<button> 要素に対して onMouseEnter がトリガされないようになりました。

  • ReactDOM は v16 を公開して以来、version のエクスポートがありませんでした。このリリースではそれが改めて追加されました。アプリケーションロジックでの使用はお勧めしませんが、同じページ上の ReactDOM のバージョン不一致や複数バージョンに関わる問題をデバッグする際に便利です。

これらの問題やその他の問題を解決してくれた貢献者に感謝します。完全な changelog は下記を参照してください。

インストール {#installation}

React {#react}

React v16.13.0 はnpmで利用可能です。

YarnでReact 16をインストールするには、下記を実行します:

yarn add react@^16.13.0 react-dom@^16.13.0

npmでReact 16をインストールするには、下記を実行します:

npm install --save react@^16.13.0 react-dom@^16.13.0

また、CDN経由でReactのUMDビルドも提供しています:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

詳細のスクリプト設置方法については、説明書を参照してください。

変更履歴 {#changelog}

React {#react}

  • Warn when a string ref is used in a manner that's not amenable to a future codemod (@lunaruan in #17864)
  • Deprecate React.createFactory() (@trueadm in #17878)

React DOM {#react-dom}

Concurrent Mode (Experimental) {#concurrent-mode-experimental}