#4 react-v16.13.0.md add japanese transration

[PeterTakahashi]

add japanese transration

---

title: "React v16.13.0"
author: [threepointone]
redirect_from:

• "blog/2020/03/02/react-v16.13.0.html"

---

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

New Warnings {#new-warnings}

Warnings for some updates during render {#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 {#warnings-for-conflicting-style-rules}

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

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

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

Reactは、スタイルルールの競合を検出し、警告をログに記録するようになりました。
警告が検出されたソースコードを修正するには、同じCSSプロパティのshortandとlonghandのバージョンをstyleプロップに混在させないようにしてください。

Warnings for some deprecated string refs {#warnings-for-some-deprecated-string-refs}

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.

Deprecating React.createFactory {#deprecating-reactcreatefactory}

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

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

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

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

Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM.createPortal {#deprecating-reactdomunstable_createportal-in-favor-of-reactdomcreateportal}

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

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

Other Improvements {#other-improvements}

Component stacks in hydration warnings {#component-stacks-in-hydration-warnings}

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

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

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

Notable bugfixes {#notable-bugfixes}

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

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

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

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

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

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

Installation {#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 {#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}

• 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 in StrictMode (@bvaughn in #17942)
• Add version property to ReactDOM (@ealush in #15780)
• Don't call toString() of dangerouslySetInnerHTML (@sebmarkbage in #17773)
• Show component stacks in more warnings (@gaearon in #17922, #17586)

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

• 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)

[netlify]

Deploy preview for ja-reactjs ready!

Built with commit 398dfc8

https://deploy-preview-329--ja-reactjs.netlify.app

[smikitky]

そもそもブログ記事はこれまで一つも翻訳してきておらず、今後も積極的に翻訳する予定はありませんでした。「せっかくやっていただいたので」ということでこの記事1個だけマージしてしまうと、大量にある残りの翻訳されていないブログ記事も今後翻訳されるのかと期待されてしまいますし、少なくとも古い記事まで全部翻訳するのも現実的ではないと思います。

まあ「過去ログ全部は無理でも2020年以降からは全部翻訳する」といった方針に転換して作業を進めていくことは可能だと思いますが、現時点では何の合意もない状況です。

@koba04 @potato4d どうしましょう？ 個人的にはブログには結構大事なことが載っていることもあるので、「2020年以降からは翻訳していく」とかでもいい気がします。

[PeterTakahashi]

@smikitky
すみません。確認せずいきなり翻訳をしてしまいました。
他に翻訳を優先的にしたいページなどがありましたら教えてください。

[smikitky]

現時点では当初予定していた記事については翻訳が終わっており、元記事の細かな更新に追従している状態です。もしも更に翻訳対象を増やすのだとすればブログにはなると思いますが…

[koba04]

@smikitky そうですね、そんなに頻繁にポストされるわけでもないので、2020年以降から翻訳する案いいと思います。

[smikitky]

• 見出しも翻訳してください。
• 「レンダリング」という言葉は基本的に使わず「レンダー」になります。他「コンテクスト」「レンダープロップ」などの用語統一を行っています。
• 行の不一致が散見されますので対応をお願いします。基本的に、GitHubの差分で見て、行番号まで左右で完全に対応しているようにさせてください。
• 英文字と和文との間に半角スペースがない、などのスタイリングの問題が多数あります。コミットの際に textlint が大量のエラーを出力していたと思いますので、対応をお願いします。

以上は、https://github.com/reactjs/ja.reactjs.org/blob/master/TRANSLATION.md に解説がありますので確認をお願いします。

[smikitky]

あ、blog は現状 textlint の対象でなかったため、本来出るべきエラーが出てなかったんですね…。すみません、設定を修正しますのでお待ちください。

[smikitky]

• 前回のもののうち対応いただけていないレビューコメントが複数ありますので対応をお願いします。多分「hidden conversations」みたいなのをクリックすると更に出てきます。
• warnings はあくまで console に出てくる開発者向け警告のことであり、単なる「注意点」ではありません。「警告」と訳すようにお願いします。
• 元と改行の仕方が厳密に一致していないためGitHubの差分ページで見たときに左右の文章が対応しなくなってしまっています。将来原文が更新された時にGitがどの英文とどの和文が対応しているのか分からない状態だと、非常に扱いづらいコンフリクトを生成してしまいます。対応をお願いします。

[smikitky]

@SeiyaTAKAHASHI 以下のURLを見ていただくと分かると思うのですが指摘点が残っていますので確認をお願いします。この "Conversation" で見ているだけだと一部のコメントが省略されてしまうので "Files" の方で見てください。

https://github.com/reactjs/ja.reactjs.org/pull/329/files

[smikitky]

元ファイルは204行なのに翻訳後のファイルは208行になっており、随所に本来なかった空行などが含まれているため、翻訳前と翻訳後の行がずれています。繰り返しで申し訳ありませんが、GitHubのサイトの差分を行番号まで注意しながら見て、左右で対応がおかしくなっているところの修正をお願いします。

あとお手数ですが一旦 git merge master して、textlint がこのブログ記事にも適用されるようにしていただいて良いでしょうか。git commit 時にいろいろエラーが出ると思いますのでそちらの確認をお願いします。

[PeterTakahashi]

textlintでこのようなエラーが発生し�、npm install @textlint-rule/textlint-rule-no-invalid-control-characterしましたが、直りませんでした。
原因がわかりましたら教えてください。現在調べ中です。

$ textlint content/blog/2020-02-26-react-v16.13.0.md
✖ Error
Failed to load textlint's rule module: "@textlint-rule/no-invalid-control-character" is not found.
See FAQ: https://github.com/textlint/textlint/blob/master/docs/faq/failed-to-load-textlints-module.md


✖ Stack trace
ReferenceError: Failed to load textlint's rule module: "@textlint-rule/no-invalid-control-character" is not found.
See FAQ: https://github.com/textlint/textlint/blob/master/docs/faq/failed-to-load-textlints-module.md

[smikitky]

@SeiyaTAKAHASHI あ、もしかしたら私の以前の作業でのミスかもしれません…すみません。

ターミナルで

yarn add @textlint-rule/textlint-rule-no-invalid-control-character

としていただいていいでしょうか。yark.lock が更新されると思いますが git checkout yarn.lock で一旦 yark.lock だけ元に戻してコミットしないでおいてください。

[PeterTakahashi]

@SeiyaTAKAHASHI 以下のURLを見ていただくと分かると思うのですが指摘点が残っていますので確認をお願いします。この "Conversation" で見ているだけだと一部のコメントが省略されてしまうので "Files" の方で見てください。

行間あわせました。
textlintは私のローカルではmoduleエラーが出て実行できませんでした。私のローカル環境のバージョンは下記になります。

node: v12.16.1
yarn: 1.22.4
npm: 6.14.4

[smikitky]

ではこちらで textlint をかけた場合の結果を添付します。修正を suggest しましたのでざっと確認して対応をお願いします。（14 箇所ありますので Files タブで見てください）

[smikitky]

102～106行目に訳抜けがあるのを見逃していました。以下を使ってください。

> 補足
>
> この警告を見るためには、Babel プラグインとして [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) がインストールされている必要があります。これは開発モードで*のみ*有効にする必要があります。
> 
> Create React App を使っているか、Babel 7 以降で "react" プリセットを使っている場合、既にデフォルトでこのプラグインはインストールされています。

[smikitky]

これで大丈夫そうです、長くなってしまいましたがありがとうございました！

[smikitky]

ごめんなさいあと3か所 textlint がエラーを出していました、対応をお願いします…

[smikitky]

ありがとうございました！

[koba04]

@SeiyaTAKAHASHI ありがとうございます！1点コメントしたので確認お願いします！

[koba04]

@SeiyaTAKAHASHI 翻訳ありがとうございました！読みやすかったです！