Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 11 commits into from May 13, 2020
Merged

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

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
03180af
#4 react-v16.13.0.md add japanese transration
PeterTakahashi May 3, 2020
90b1174
titleを日本語へ翻訳
May 5, 2020
0bed9d6
#329 @smikitkyさん指摘箇所の修正
May 5, 2020
b73fe18
#329 warningを警告と翻訳
PeterTakahashi May 5, 2020
2c914d3
#329 @smikitky さん追加修正箇所
May 7, 2020
7cd1163
行数をあわせる
May 9, 2020
ad4ca30
Update content/blog/2020-02-26-react-v16.13.0.md
PeterTakahashi May 9, 2020
16d091b
#329 fix textlint warning
PeterTakahashi May 9, 2020
0096743
#329 補足の追記
May 9, 2020
b0faf51
textlint 修正
May 10, 2020
398dfc8
unwantedの訳の翻訳修正
PeterTakahashi May 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
92 changes: 46 additions & 46 deletions content/blog/2020-02-26-react-v16.13.0.md
View file
Open in desktop
Expand Up @@ -5,25 +5,25 @@ redirect_from:
- "blog/2020/03/02/react-v16.13.0.html"
---

Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.
本日、React 16.13.0 をリリースします。このリリースには、バグ修正と、今後のメジャーリリースに備えるための新しい非推奨の警告が含まれています。

## New Warnings {#new-warnings}
## 新たな警告 {#new-warnings}

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

A React component should not cause side effects in other components during rendering.
React コンポーネントは、レンダー中に他のコンポーネントに副作用を起こしてはいけません。

It is supported to call `setState` during render, but [only for *the same component*](/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). If you call `setState` during a render on a different component, you will now see a warning:
レンダー中に `setState` を呼び出すことはサポートされていますが[*同じ*コンポーネントに対してのみ](/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops)可能です。別のコンポーネントのレンダー中に `setState` を呼び出すと、警告が表示されるようになりました。

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

**This warning will help you find application bugs caused by unintentional state changes.** In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the `setState` call into `useEffect`.
**この警告は、意図しない状態変更によって引き起こされるアプリケーションのバグを見つけるのに役立ちます。**レンダーの結果として他のコンポーネントの状態を意図的に変更したいという稀なケースでは、`setState` 呼び出しを `useEffect` にラップすることができます。

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

When dynamically applying a `style` that contains longhand and shorthand versions of CSS properties, particular combinations of updates can cause inconsistent styling. For example:
ある CSS プロパティの長い記法と短い記法を同時に含む `style` を動的に適用する場合、特定の更新の組み合わせにより、スタイリングの一貫性が失われることがあります。例えば、以下のようになります。

```js
<div style={toggle ?
Expand All @@ -34,23 +34,23 @@ When dynamically applying a `style` that contains longhand and shorthand version
</div>
```

You might expect this `<div>` to always have a red background, no matter the value of `toggle`. However, on alternating the value of `toggle` between `true` and `false`, the background color start as `red`, then alternates between `transparent` and `blue`, [as you can see in this demo](https://codesandbox.io/s/suspicious-sunset-g3jub).
この `<div>` は `toggle` の値に関係なく常に背景色が赤になると思われるかもしれません。しかし、[このデモを見てわかるように](https://codesandbox.io/s/suspicious-sunset-g3jub)、`toggle` の値を `true` と `false` の間で切り替えると、背景色は `red` から始まり、その後 `transparent` と `blue` の間で交互に切り替わります。

**React now detects conflicting style rules and logs a warning.** To fix the issue, don't mix shorthand and longhand versions of the same CSS property in the `style` prop.
**React は、スタイルルールの競合を検出し、警告をログに記録するようになりました。**この問題を修正するには、同一の CSS プロパティの短い記法と長い記法のバージョンを `style` プロパティ内で混在させないようにしてください。

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

[String Refs is an old legacy API](/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future:
[String ref（文字列形式の ref）は古いレガシー API](/docs/refs-and-the-dom.html#legacy-api-string-refs) であり、既に勧められておらず、将来的に正式に非推奨となる予定です。

```js
<Button ref="myRef" />
```

(Don't confuse String Refs with refs in general, which **remain fully supported**.)
（String ref と異なり、一般的な ref 自体は**完全にサポートされ続けます**ので混同しないようにしてください）

In the future, we will provide an automated script (a "codemod") to migrate away from String Refs. However, some rare cases can't be migrated automatically. This release adds a new warning **only for those cases** in advance of the deprecation.
将来的には、string ref からの移行を自動化するスクリプト ("codemod") を提供する予定です。しかし、まれに自動移行できないケースがあります。このリリースでは、非推奨化に先立ち、**そのようなケースにのみ**警告を追加しています。

For example, it will fire if you use String Refs together with the Render Prop pattern:
例えば、レンダープロップパターンと一緒に string ref を使用した場合に発生します。

```jsx
class ClassWithRenderProp extends React.Component {
Expand All @@ -73,9 +73,9 @@ class ClassParent extends React.Component {
}
```

Code like this often indicates bugs. (You might expect the ref to be available on `ClassParent`, but instead it gets placed on `ClassWithRenderProp`).
このようなコードはしばしばバグを示します。（ref は `ClassParent` で利用できると思われるかもしれませんが、代わりに `ClassWithRenderProp` に置かれてしまいます）。

**You most likely don't have code like this**. If you do and it is intentional, convert it to [`React.createRef()`](/docs/refs-and-the-dom.html#creating-refs) instead:
**このようなコードはお持ちでない可能性が高いでしょう**。もしそのようなコードがあって、それが意図的なものであれば、代わりに [`React.createRef()`](/docs/refs-and-the-dom.html#creating-refs) を使うよう変更してください：

```jsx
class ClassWithRenderProp extends React.Component {
Expand All @@ -99,86 +99,86 @@ class ClassParent extends React.Component {
}
```

> Note
> 補足
>
> To see this warning, you need to have the [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) installed in your Babel plugins. It must _only_ be enabled in development mode.
> この警告を見るためには、Babel プラグインとして [babel-plugin-transform-react-jsx-self](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self) がインストールされている必要があります。これは開発モードで*のみ*有効にする必要があります。
>
> If you use Create React App or have the "react" preset with Babel 7+, you already have this plugin installed by default.
> Create React App を使っているか、Babel 7 以降で "react" プリセットを使っている場合、既にデフォルトでこのプラグインはインストールされています。

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

[`React.createFactory`](/docs/react-api.html#createfactory) is a legacy helper for creating React elements. This release adds a deprecation warning to the method. It will be removed in a future major version.
[`React.createFactory`](/docs/react-api.html#createfactory) は React 要素を作成するためのレガシーのヘルパです。このリリースでは、このメソッドに非推奨の警告が追加されています。これは将来のメジャーバージョンで削除される予定です。

Replace usages of `React.createFactory` with regular JSX. Alternately, you can copy and paste this one-line helper or publish it as a library:
`React.createFactory` の使用法を通常の JSX で置き換えてください。代わりに、この 1 行ヘルパをコピー＆ペーストするか、ライブラリとして公開することもできます。

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

It does exactly the same thing.
全く同じことをしています。

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

When React 16 was released, `createPortal` became an officially supported API.
React 16 がリリースされたとき、`createPortal` は公式にサポートされる API になりました。

However, we kept `unstable_createPortal` as a supported alias to keep the few libraries that adopted it working. We are now deprecating the unstable alias. Use `createPortal` directly instead of `unstable_createPortal`. It has exactly the same signature.
しかし、`unstable_createPortal` を採用している少数のライブラリが動作するように、`unstable_createPortal` をサポートされたエイリアスとして残していました。今後この不安定なエイリアスは非推奨とします。`unstable_createPortal` の代わりに `createPortal` を直接使ってください。これは全く同じシグネチャを持っています。

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

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

React adds component stacks to its development warnings, enabling developers to isolate bugs and debug their programs. This release adds component stacks to a number of development warnings that didn't previously have them. As an example, consider this hydration warning from the previous versions:
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."](../images/blog/react-v16.13.0/hydration-warning-before.png)

While it's pointing out an error with the code, it's not clear where the error exists, and what to do next. This release adds a component stack to this warning, which makes it look like this:
コードとともにエラーを指摘していますが、どこにエラーが存在しているのか、次に何をすればいいのかが明確ではありません。このリリースでは、この警告にコンポーネントスタックが追加され、以下のようになりました。

![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)..."](../images/blog/react-v16.13.0/hydration-warning-after.png)

This makes it clear where the problem is, and lets you locate and fix the bug faster.
これにより、問題がどこにあるのかが明確になり、より早くバグの場所を特定して修正することができます。

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

This release contains a few other notable improvements:
このリリースには、他にもいくつかの注目すべき改善点が含まれています。

- In Strict Development Mode, React calls lifecycle methods twice to flush out any possible unwanted side effects. This release adds that behaviour to `shouldComponentUpdate`. This shouldn't affect most code, unless you have side effects in `shouldComponentUpdate`. To fix this, move the code with side effects into `componentDidUpdate`.
- Strict 開発モードでは、React はライフサイクルメソッドを 2 回呼び出し、好ましくない副作用の可能性を洗い出すようにしています。このリリースでは、その動作を `shouldComponentUpdate` に追加しています。これは、`shouldComponentUpdate` に副作用がない限り、ほとんどのコードには影響しないはずです。これを修正するには、副作用のあるコードを `componentDidUpdate` に移動してください。

- In Strict Development Mode, the warnings for usage of the legacy context API didn't include the stack for the component that triggered the warning. This release adds the missing stack to the warning.
- Strict 開発モードでは、レガシーコンテクスト API の使用に関する警告には、警告のトリガとなったコンポーネントのスタックが含まれていませんでした。このリリースでは、欠けていたスタックが警告に追加されます。

- `onMouseEnter` now doesn't trigger on disabled `<button>` elements.
- 無効な（disabled の）`<button>` 要素に対して `onMouseEnter` がトリガされないようになりました。

- ReactDOM was missing a `version` export since we published v16. This release adds it back. We don't recommend using it in your application logic, but it's useful when debugging issues with mismatching / multiple versions of ReactDOM on the same page.
- ReactDOM は v16 を公開して以来、`version` のエクスポートがありませんでした。このリリースではそれが改めて追加されました。アプリケーションロジックでの使用はお勧めしませんが、同じページ上の ReactDOM のバージョン不一致や複数バージョンに関わる問題をデバッグする際に便利です。

We’re thankful to all the contributors who helped surface and fix these and other issues. You can find the full changelog [below](#changelog).
これらの問題やその他の問題を解決してくれた貢献者に感謝します。完全な changelog は[下記](#changelog)を参照してください。

## Installation {#installation}
## インストール {#installation}

### React {#react}

React v16.13.0 is available on the npm registry.
React v16.13.0 は npm レジストリで利用可能です。

To install React 16 with Yarn, run:
Yarn で React 16 をインストールするには、下記を実行します：

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

To install React 16 with npm, run:
npm で React 16 をインストールするには、下記を実行します：

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

We also provide UMD builds of React via a CDN:
また、CDN 経由で React の UMD ビルドも提供しています：

```html
<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>
```

Refer to the documentation for [detailed installation instructions](/docs/installation.html).
[詳細なインストール方法](/docs/installation.html)については、ドキュメントを参照してください。

## Changelog {#changelog}
## 変更履歴 {#changelog}

### React {#react}

Expand Down