title | author | redirect_from | ||
---|---|---|---|---|
React v16.13.0 |
|
|
本日、React 16.13.0 をリリースします。このリリースには、バグ修正と、今後のメジャーリリースに備えるための新しい非推奨の警告が含まれています。
React コンポーネントは、レンダー中に他のコンポーネントに副作用を起こしてはいけません。
レンダー中に setState
を呼び出すことはサポートされていますが 同じコンポーネントに対してのみ可能です。別のコンポーネントのレンダー中に setState
を呼び出すと、警告が表示されるようになりました。
Warning: Cannot update a component from inside the function body of a different component.
**この警告は、意図しない状態変更によって引き起こされるアプリケーションのバグを見つけるのに役立ちます。**レンダーの結果として他のコンポーネントの状態を意図的に変更したいという稀なケースでは、setState
呼び出しを useEffect
にラップすることができます。
ある CSS プロパティの長い記法と短い記法を同時に含む style
を動的に適用する場合、特定の更新の組み合わせにより、スタイリングの一貫性が失われることがあります。例えば、以下のようになります。
<div style={toggle ?
{ background: 'blue', backgroundColor: 'red' } :
{ backgroundColor: 'red' }
}>
...
</div>
この <div>
は toggle
の値に関係なく常に背景色が赤になると思っていたかもしれません。しかし、このデモを見てわかるように、toggle
の値を true
と false
の間で交互に変更すると、背景色は red
から始まり、その後 transparent
と blue
の間で交互に変更されます。
Reactは、スタイルルールの競合を検出し、警告をログに記録するようになりました。
警告が検出されたソースコードを修正するには、同じCSSプロパティのshortandとlonghandのバージョンをstyle
プロップに混在させないようにしてください。
String Refs は古いバージョンのAPIは開発者に気に入れられておらず、将来的には非推奨になりそうです。
<Button ref="myRef" />
(String Refs と一般的な refs を混同しないでください。)
将来的には、String Refsからの移行を自動化するスクリプト(a "codemod")を提供する予定です。しかし、まれに自動移行できないケースがあります。このリリースでは、非推奨となるケースに先立ち、そのようなケースにのみ警告を追加しています。
例えば、Render Prop パターンと一緒に String Refs を使用した場合に発生します。
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>
);
}
}
このようなコードはしばしばバグを示します。(参照は 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
はReact要素を作成するための旧版のルパーです。このリリースでは、メソッドに非推奨の警告が追加されています。これは将来のメジャーバージョンで削除される予定です。
React.createFactory
の使用法を通常の JSX で置き換えてください。代わりに、この一行ヘルパーをコピー&ペーストするか、ライブラリとして公開することもできます。
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
を直接使ってください。これは全く同じシグネチャを持っています。
React は開発警告にコンポーネントスタックを追加し、開発者がバグを分離してプログラムをデバッグできるようにします。今回のリリースでは、以前はなかった多くの開発警告にコンポーネントスタックが追加されました。例として、以前のバージョンにあったこのハイドレーション警告を考えてみましょう。
コードのエラーを指摘していますが、どこにエラーが存在しているのか、次に何をすればいいのかが明確ではありません。このリリースでは、この警告にコンポーネントスタックが追加され、以下のようになりました。
これにより、問題がどこにあるのかが明確になり、より早くバグの場所を特定して修正することができます。
このリリースには、他にもいくつかの注目すべき改善点が含まれています。
-
厳密な開発モードでは、React はライフサイクルメソッドを2回呼び出し、不要な副作用の可能性を洗い出すようにしています。このリリースでは、その動作を
shouldComponentUpdate
に追加しています。これは、shouldComponentUpdate
に副作用がない限り、ほとんどのコードには影響しないはずです。これを修正するには、副作用のあるコードをcomponentDidUpdate
に移動してください。 -
厳密な開発モードでは、レガシーコンテキストAPIの使用に関する警告には、警告のトリガーとなったコンポーネントのスタックが含まれていませんでした。このリリースでは、不足していたスタックが警告に追加されます。
-
無効な(disabled の)
<button>
要素に対してonMouseEnter
がトリガされないようになりました。 -
ReactDOM は v16 を公開して以来、
version
のエクスポートがありませんでした。このリリースではそれが改めて追加されました。アプリケーションロジックでの使用はお勧めしませんが、同じページ上の ReactDOM のバージョン不一致や複数バージョンに関わる問題をデバッグする際に便利です。
これらの問題やその他の問題を解決してくれた貢献者に感謝します。完全な changelog は下記を参照してください。
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>
詳細のスクリプト設置方法については、説明書を参照してください。
- 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)
- Warn when changes in
style
may cause an unexpected collision (@sophiebits in #14181, #18002) - Warn when a function component is updated during another component's render phase (@acdlite in #17099)
- Deprecate
unstable_createPortal
(@trueadm in #17880) - Fix
onMouseEnter
being fired on disabled buttons (@AlfredoGJ in #17675) - Call
shouldComponentUpdate
twice when developing inStrictMode
(@bvaughn in #17942) - Add
version
property to ReactDOM (@ealush in #15780) - Don't call
toString()
ofdangerouslySetInnerHTML
(@sebmarkbage in #17773) - Show component stacks in more warnings (@gaearon in #17922, #17586)
- Warn for problematic usages of
ReactDOM.createRoot()
(@trueadm in #17937) - Remove
ReactDOM.createRoot()
callback params and added warnings on usage (@bvaughn in #17916) - Don't group Idle/Offscreen work with other work (@sebmarkbage in #17456)
- Adjust
SuspenseList
CPU bound heuristic (@sebmarkbage in #17455) - Add missing event plugin priorities (@trueadm in #17914)
- Fix
isPending
only being true when transitioning from inside an input event (@acdlite in #17382) - Fix
React.memo
components dropping updates when interrupted by a higher priority update (@acdlite in #18091) - Don't warn when suspending at the wrong priority (@gaearon in #17971)
- Fix a bug with rebasing updates (@acdlite and @sebmarkbage in #17560, #17510, #17483, #17480)