From 02883825f9d00420e05006d8591ed5737eb1b941 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 16 Jul 2023 13:58:55 +0900 Subject: [PATCH] Translate "useInsertionEffect" --- .../reference/react/useInsertionEffect.md | 62 +++++++++---------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md index 175b4476f..757373529 100644 --- a/src/content/reference/react/useInsertionEffect.md +++ b/src/content/reference/react/useInsertionEffect.md @@ -4,13 +4,13 @@ title: useInsertionEffect -`useInsertionEffect` is for CSS-in-JS library authors. Unless you are working on a CSS-in-JS library and need a place to inject the styles, you probably want [`useEffect`](/reference/react/useEffect) or [`useLayoutEffect`](/reference/react/useLayoutEffect) instead. +`useInsertionEffect` は CSS-in-JS ライブラリの作者向けです。CSS-in-JS ライブラリの開発をしておりスタイルを挿入する場所を必要としているのでない限り、おそらく [`useEffect`](/reference/react/useEffect) または [`useLayoutEffect`](/reference/react/useLayoutEffect) の方が適切です。 -`useInsertionEffect` is a version of [`useEffect`](/reference/react/useEffect) that fires before any DOM mutations. +`useInsertionEffect` は [`useEffect`](/reference/react/useEffect) の一種ですが、DOM の書き換えを行う前に実行されます。 ```js useInsertionEffect(setup, dependencies?) @@ -22,11 +22,11 @@ useInsertionEffect(setup, dependencies?) --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `useInsertionEffect(setup, dependencies?)` {/*useinsertioneffect*/} -Call `useInsertionEffect` to insert the styles before any DOM mutations: +DOM の変更前にスタイルを挿入するために `useInsertionEffect` を呼び出します。 ```js import { useInsertionEffect } from 'react'; @@ -40,31 +40,31 @@ function useCSS(rule) { } ``` -[See more examples below.](#usage) +[さらに例を見る](#usage) -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function. +* `setup`: エフェクトのロジックが記述された関数です。このセットアップ関数は、オプションで*クリーンアップ*関数を返すことができます。コンポーネントが初めて DOM に追加されると、React はセットアップ関数を実行します。依存配列 (dependencies) が変更された再レンダー時には、React はまず古い値を使ってクリーンアップ関数（あれば）を実行し、次に新しい値を使ってセットアップ関数を実行します。コンポーネントが DOM から削除された後、React はクリーンアップ関数を最後にもう一度実行します。 -* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. If you don't specify the dependencies at all, your Effect will re-run after every re-render of the component. +* **省略可能** `dependencies`: `setup` コード内で参照されるすべてのリアクティブな値のリストです。リアクティブな値には、props、state、コンポーネント本体に直接宣言されたすべての変数および関数が含まれます。リンタが [React 用に設定されている場合](/learn/editor-setup#linting)、すべてのリアクティブな値が依存値として正しく指定されているか確認できます。依存値のリストは要素数が一定である必要があり、`[dep1, dep2, dep3]` のようにインラインで記述する必要があります。React は、[`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) を使った比較で、それぞれの依存値を以前の値と比較します。この引数を省略すると、エフェクトはコンポーネントの毎回のレンダー後に再実行されます。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -`useInsertionEffect` returns `undefined`. +`useInsertionEffect` は `undefined` を返します。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -* Effects only run on the client. They don't run during server rendering. -* You can't update state from inside `useInsertionEffect`. -* By the time `useInsertionEffect` runs, refs are not attached yet, and DOM is not yet updated. +* エフェクトはクライアント上でのみ実行されます。サーバレンダリング中には実行されません。 +* `useInsertionEffect` の内部から state を更新することはできません。 +* `useInsertionEffect` が実行される時点では、まだ ref はアタッチされておらず、DOM も更新されていません。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Injecting dynamic styles from CSS-in-JS libraries {/*injecting-dynamic-styles-from-css-in-js-libraries*/} +### CSS-in-JS ライブラリからの動的スタイル注入 {/*injecting-dynamic-styles-from-css-in-js-libraries*/} -Traditionally, you would style React components using plain CSS. +従来、React コンポーネントのスタイル付けはプレーンな CSS を使用して行われていました。 ```js // In your JS file: @@ -74,20 +74,20 @@ Traditionally, you would style React components using plain CSS. .success { color: green; } ``` -Some teams prefer to author styles directly in JavaScript code instead of writing CSS files. This usually requires using a CSS-in-JS library or a tool. There are three common approaches to CSS-in-JS: +チームによっては、CSS ファイルを書く代わりに JavaScript コード内で直接スタイルを記述することを好む場合があります。これには通常、CSS-in-JS ライブラリやツールが必要です。CSS-in-JS には以下の 3 つの一般的なアプローチがあります。 -1. Static extraction to CSS files with a compiler -2. Inline styles, e.g. `
` -3. Runtime injection of `