diff --git a/content/de/index.md b/content/de/index.md index 50ee5dcc1..00b7481e6 100755 --- a/content/de/index.md +++ b/content/de/index.md @@ -10,7 +10,7 @@ title: Preact

Schnelle 3kB-Alternative zu React mit der gleichen ES6-API

Fang an - Wechsle zu Preact + Wechsle zu Preact

@@ -123,7 +123,7 @@ function Counter() { Preacts Gestaltung lässt dich tausende Komponenten, die bereits im React-Ökosystem verfügbar sind, verwenden.

- Das Hinzufügen eines einfachen preact-compat-Alias zum Bundler fügt eine Kompatibilitätsschicht hinzu, die es erlaubt, selbst die komplexesten React-Komponenten in der eigenen Preact-App zu verwenden. + Das Hinzufügen eines einfachen preact-compat-Alias zum Bundler fügt eine Kompatibilitätsschicht hinzu, die es erlaubt, selbst die komplexesten React-Komponenten in der eigenen Preact-App zu verwenden.

@@ -270,6 +270,6 @@ function Counter() {

Fang an - Wechsle zu Preact + Wechsle zu Preact

diff --git a/content/en/about/project-goals.md b/content/en/about/project-goals.md index 6b2525342..44316cae0 100755 --- a/content/en/about/project-goals.md +++ b/content/en/about/project-goals.md @@ -25,4 +25,4 @@ The intentional items under [Differences to React](/guide/v10/differences-to-rea - `Children`, can be replaced with native arrays - `Synthetic Events`, since Preact does not attempt to patch issues in older browsers like IE8 -[preact/compat]: /guide/v10/switching-to-preact +[preact/compat]: /guide/v10/getting-started#aliasing-react-to-preact diff --git a/content/en/guide/v10/differences-to-react.md b/content/en/guide/v10/differences-to-react.md index a6c1cec4b..369924679 100755 --- a/content/en/guide/v10/differences-to-react.md +++ b/content/en/guide/v10/differences-to-react.md @@ -171,5 +171,5 @@ The legacy `Context` API requires Components to declare specific properties usin [project goals]: /about/project-goals [hyperscript]: https://github.com/dominictarr/hyperscript -[preact/compat]: /guide/v10/switching-to-preact +[preact/compat]: /guide/v10/getting-started#aliasing-react-to-preact [mdn's event reference]: https://developer.mozilla.org/en-US/docs/Web/Events diff --git a/content/en/guide/v10/switching-to-preact.md b/content/en/guide/v10/switching-to-preact.md deleted file mode 100755 index 834cb64bc..000000000 --- a/content/en/guide/v10/switching-to-preact.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Switching to Preact from React -description: Everything you need to know to switch from React to Preact ---- - -# Switching to Preact (from React) - -`preact/compat` is our compatibility layer that allows you to leverage the many libraries of the React ecosystem and use them with Preact. This is the recommended way to try out Preact if you have an existing React app. - -This lets you continue writing React/ReactDOM code without any changes to your workflow or codebase. `preact/compat` adds somewhere around 2kb to your bundle size, but has the advantage of supporting the vast majority of existing React modules you might find on npm. The `preact/compat` package provides all the necessary tweaks on top of Preact's core to make it work just like `react` and `react-dom`, in a single module. - ---- - - - ---- - -## Setting up compat - -To set up `preact/compat` you need to alias `react` and `react-dom` to `preact/compat`. The [Getting Started](/guide/v10/getting-started#aliasing-react-to-preact) page goes into detail on how aliasing is configured in various bundlers. - -## PureComponent - -The `PureComponent` class works similar to `Component`. The difference is that `PureComponent` will skip rendering when the new props are equal to the old ones. To do this we compare the old and new props via a shallow comparison where we check each props property for referential equality. This can speed up applications a lot by avoiding unnecessary re-renders. It works by adding a default `shouldComponentUpdate` lifecycle hook. - -```jsx -import { render } from 'preact'; -import { PureComponent } from 'preact/compat'; - -class Foo extends PureComponent { - render(props) { - console.log('render'); - return
; - } -} - -const dom = document.getElementById('root'); -render(, dom); -// Logs: "render" - -// Render a second time, doesn't log anything -render(, dom); -``` - -> Note that the advantage of `PureComponent` only pays off when then render is expensive. For simple children trees it can be quicker to just do the `render` compared to the overhead of comparing props. - -## memo - -`memo` is equivalent to functional components as `PureComponent` is to classes. It uses the same comparison function under the hood, but allows you to specify your own specialized function optimized for your use case. - -```jsx -import { memo } from 'preact/compat'; - -function MyComponent(props) { - return
Hello {props.name}
; -} - -// Usage with default comparison function -const Memoed = memo(MyComponent); - -// Usage with custom comparison function -const Memoed2 = memo(MyComponent, (prevProps, nextProps) => { - // Only re-render when `name' changes - return prevProps.name === nextProps.name; -}); -``` - -> The comparison function is different from `shouldComponentUpdate` in that it checks if the two props objects are **equal**, whereas `shouldComponentUpdate` checks if they are different. - -## forwardRef - -In some cases when writing a component you want to allow the user to get hold of a specific reference further down the tree. With `forwardRef` you can sort-of "forward" the `ref` property: - -```jsx -import { createRef, render } from 'preact'; -import { forwardRef } from 'preact/compat'; - -const MyComponent = forwardRef((props, ref) => { - return
Hello world
; -}); - -// Usage: `ref` will hold the reference to the inner `div` instead of -// `MyComponent` -const ref = createRef(); -render(, dom); -``` - -This component is most useful for library authors. - -## Portals - -In rare circumstances you may want to continue rendering into a different DOM node. The target DOM node **must** be present before attempting to render into it. - -```html - - - -
- -
- - -``` - -```jsx -import { createPortal } from 'preact/compat'; -import MyModal from './MyModal'; - -function App() { - const container = document.getElementById('modals'); - return ( -
- I'm app - {createPortal(, container)} -
- ); -} -``` - -> Keep in mind that due to Preact reusing the browser's event system, events won't bubble up through a Portal container to the other tree. - -## Suspense - -The main idea behind `Suspense` is to allow sections of your UI to display some sort of placeholder content while components further down the tree are still loading. A common use case for this is code-splitting where you'll need to load a component from the network before you can render it. - -```jsx -import { Suspense, lazy } from 'preact/compat'; - -const SomeComponent = lazy(() => import('./SomeComponent')); - -// Usage -loading...
}> - - - -; -``` - -In this example the UI will display the `loading...` text until `SomeComponent` is loaded and the Promise is resolved. - -> Suspense in both React and Preact isn't quite finalized or set in stone as of yet. While the React team still actively discourages users interfacing with it directly for data fetching, it's a pattern some Preact users have been happily using over the last few years. There are a few known issues (please see [our tracker](https://github.com/preactjs/preact/issues?q=is%3Aissue+is%3Aopen+suspense) for an up-to-date reference) but it's generally considered stable enough for use in production if you so wish. -> -> This site, for instance, is built using a Suspense-based data fetching strategy used to load all content you see. diff --git a/content/en/guide/v11/differences-to-react.md b/content/en/guide/v11/differences-to-react.md index a6c1cec4b..369924679 100755 --- a/content/en/guide/v11/differences-to-react.md +++ b/content/en/guide/v11/differences-to-react.md @@ -171,5 +171,5 @@ The legacy `Context` API requires Components to declare specific properties usin [project goals]: /about/project-goals [hyperscript]: https://github.com/dominictarr/hyperscript -[preact/compat]: /guide/v10/switching-to-preact +[preact/compat]: /guide/v10/getting-started#aliasing-react-to-preact [mdn's event reference]: https://developer.mozilla.org/en-US/docs/Web/Events diff --git a/content/en/guide/v11/switching-to-preact.md b/content/en/guide/v11/switching-to-preact.md deleted file mode 100755 index 834cb64bc..000000000 --- a/content/en/guide/v11/switching-to-preact.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Switching to Preact from React -description: Everything you need to know to switch from React to Preact ---- - -# Switching to Preact (from React) - -`preact/compat` is our compatibility layer that allows you to leverage the many libraries of the React ecosystem and use them with Preact. This is the recommended way to try out Preact if you have an existing React app. - -This lets you continue writing React/ReactDOM code without any changes to your workflow or codebase. `preact/compat` adds somewhere around 2kb to your bundle size, but has the advantage of supporting the vast majority of existing React modules you might find on npm. The `preact/compat` package provides all the necessary tweaks on top of Preact's core to make it work just like `react` and `react-dom`, in a single module. - ---- - - - ---- - -## Setting up compat - -To set up `preact/compat` you need to alias `react` and `react-dom` to `preact/compat`. The [Getting Started](/guide/v10/getting-started#aliasing-react-to-preact) page goes into detail on how aliasing is configured in various bundlers. - -## PureComponent - -The `PureComponent` class works similar to `Component`. The difference is that `PureComponent` will skip rendering when the new props are equal to the old ones. To do this we compare the old and new props via a shallow comparison where we check each props property for referential equality. This can speed up applications a lot by avoiding unnecessary re-renders. It works by adding a default `shouldComponentUpdate` lifecycle hook. - -```jsx -import { render } from 'preact'; -import { PureComponent } from 'preact/compat'; - -class Foo extends PureComponent { - render(props) { - console.log('render'); - return
; - } -} - -const dom = document.getElementById('root'); -render(, dom); -// Logs: "render" - -// Render a second time, doesn't log anything -render(, dom); -``` - -> Note that the advantage of `PureComponent` only pays off when then render is expensive. For simple children trees it can be quicker to just do the `render` compared to the overhead of comparing props. - -## memo - -`memo` is equivalent to functional components as `PureComponent` is to classes. It uses the same comparison function under the hood, but allows you to specify your own specialized function optimized for your use case. - -```jsx -import { memo } from 'preact/compat'; - -function MyComponent(props) { - return
Hello {props.name}
; -} - -// Usage with default comparison function -const Memoed = memo(MyComponent); - -// Usage with custom comparison function -const Memoed2 = memo(MyComponent, (prevProps, nextProps) => { - // Only re-render when `name' changes - return prevProps.name === nextProps.name; -}); -``` - -> The comparison function is different from `shouldComponentUpdate` in that it checks if the two props objects are **equal**, whereas `shouldComponentUpdate` checks if they are different. - -## forwardRef - -In some cases when writing a component you want to allow the user to get hold of a specific reference further down the tree. With `forwardRef` you can sort-of "forward" the `ref` property: - -```jsx -import { createRef, render } from 'preact'; -import { forwardRef } from 'preact/compat'; - -const MyComponent = forwardRef((props, ref) => { - return
Hello world
; -}); - -// Usage: `ref` will hold the reference to the inner `div` instead of -// `MyComponent` -const ref = createRef(); -render(, dom); -``` - -This component is most useful for library authors. - -## Portals - -In rare circumstances you may want to continue rendering into a different DOM node. The target DOM node **must** be present before attempting to render into it. - -```html - - - -
- -
- - -``` - -```jsx -import { createPortal } from 'preact/compat'; -import MyModal from './MyModal'; - -function App() { - const container = document.getElementById('modals'); - return ( -
- I'm app - {createPortal(, container)} -
- ); -} -``` - -> Keep in mind that due to Preact reusing the browser's event system, events won't bubble up through a Portal container to the other tree. - -## Suspense - -The main idea behind `Suspense` is to allow sections of your UI to display some sort of placeholder content while components further down the tree are still loading. A common use case for this is code-splitting where you'll need to load a component from the network before you can render it. - -```jsx -import { Suspense, lazy } from 'preact/compat'; - -const SomeComponent = lazy(() => import('./SomeComponent')); - -// Usage -loading...
}> - - - -; -``` - -In this example the UI will display the `loading...` text until `SomeComponent` is loaded and the Promise is resolved. - -> Suspense in both React and Preact isn't quite finalized or set in stone as of yet. While the React team still actively discourages users interfacing with it directly for data fetching, it's a pattern some Preact users have been happily using over the last few years. There are a few known issues (please see [our tracker](https://github.com/preactjs/preact/issues?q=is%3Aissue+is%3Aopen+suspense) for an up-to-date reference) but it's generally considered stable enough for use in production if you so wish. -> -> This site, for instance, is built using a Suspense-based data fetching strategy used to load all content you see. diff --git a/content/en/index.md b/content/en/index.md index 94fa54be4..822da71d9 100755 --- a/content/en/index.md +++ b/content/en/index.md @@ -10,7 +10,7 @@ description: Fast 3kB alternative to React with the same modern API

Fast 3kB alternative to React with the same modern API

Get Started - Switch to Preact + Switch to Preact

@@ -121,7 +121,7 @@ function Counter() { Preact's design means you can seamlessly use thousands of Components available in the React ecosystem.

- Adding a simple preact/compat alias to your bundler provides a compatibility layer + Adding a simple preact/compat alias to your bundler provides a compatibility layer that enables even the most complex React components to be used in your application.

@@ -264,6 +264,6 @@ function Counter() {

Get Started - Switch to Preact + Switch to Preact

diff --git a/content/es/index.md b/content/es/index.md index 8a93ed722..260d9b977 100755 --- a/content/es/index.md +++ b/content/es/index.md @@ -10,7 +10,7 @@ title: Preact

Una alternativa veloz a React en 3kB con la misma API de ES6

Primeros pasos - Cambiar a Preact + Cambiar a Preact

@@ -129,7 +129,7 @@ function Counter() {

Agregando un simple alias a - preact-compat en tu bundler provee una capa de compatibilidad que habilita incluso los componentes de React más complejos para ser usados en tu aplicación. + preact-compat en tu bundler provee una capa de compatibilidad que habilita incluso los componentes de React más complejos para ser usados en tu aplicación.

@@ -276,6 +276,6 @@ function Counter() {

Primeros pasos - Cambiando a Preact + Cambiando a Preact

diff --git a/content/fr/index.md b/content/fr/index.md index bf37e9a02..ca1c57fdc 100755 --- a/content/fr/index.md +++ b/content/fr/index.md @@ -9,7 +9,7 @@ title: Preact

Alternative légère et rapide à React avec le même API en seulement 3Ko

Commencer - Passer à preact + Passer à preact

@@ -122,7 +122,7 @@ function Counter() { Les composants du DOM virtuel vous permettent de réutiliser des briques de votre application. Grâce à la conception de Preact, vous avez à votre disposition les composants de l'écosystème React.

- Un simple alias vers preact-compat apporte une couche de compatibilité qui permet l'utilisation des fonctionnalités les plus complexes de React. + Un simple alias vers preact-compat apporte une couche de compatibilité qui permet l'utilisation des fonctionnalités les plus complexes de React.

@@ -269,6 +269,6 @@ function Counter() {

Commencer - Passer à Preact + Passer à Preact

diff --git a/content/it/index.md b/content/it/index.md index 78f4889c8..40954637a 100755 --- a/content/it/index.md +++ b/content/it/index.md @@ -10,7 +10,7 @@ title: Preact

Un alternativa veloce e leggera 3Kb a React con le stesse moderne API

Primi Passi - Passare a Preact + Passare a Preact

@@ -129,7 +129,7 @@ function Counter() { Il design di Preact ti permette di utilizzare senza problemi migliaia di componenti disponibili nell'ecosistema React.

- La semplice aggiunta dell'alias preact-compat al tuo bundler fornisce un livello di compatibilità che permette anche al più complesso componente React di essere utilizzato nella tua applicaizone. + La semplice aggiunta dell'alias preact-compat al tuo bundler fornisce un livello di compatibilità che permette anche al più complesso componente React di essere utilizzato nella tua applicaizone.

@@ -276,6 +276,6 @@ function Counter() {

Primi passi - Passa a Preact + Passa a Preact

diff --git a/content/ja/about/project-goals.md b/content/ja/about/project-goals.md index 744068d45..cb71e1670 100755 --- a/content/ja/about/project-goals.md +++ b/content/ja/about/project-goals.md @@ -25,4 +25,4 @@ Reactの機能の一部は意図的にPreactでは提供されていません。 - `Children`は標準のArrayに置き換えることができます。 - `Synthetic Events`はPreactがIE8のような古いブラウザに対応しないのでサポートされません。 -[preact/compat]: /guide/v10/switching-to-preact +[preact/compat]: /guide/v10/getting-started#aliasing-react-to-preact diff --git a/content/ja/guide/v10/differences-to-react.md b/content/ja/guide/v10/differences-to-react.md index 20fd028c5..59d8af6d5 100755 --- a/content/ja/guide/v10/differences-to-react.md +++ b/content/ja/guide/v10/differences-to-react.md @@ -158,5 +158,5 @@ Preactではこの制限はありません。すべてのコンポーネント [Projectの目的]: /about/project-goals [hyperscript]: https://github.com/dominictarr/hyperscript -[preact/compat]: /guide/v10/switching-to-preact +[preact/compat]: /guide/v10/getting-started#aliasing-react-to-preact [MDN's Event Reference]: https://developer.mozilla.org/ja/docs/Web/Events diff --git a/content/ja/guide/v10/switching-to-preact.md b/content/ja/guide/v10/switching-to-preact.md deleted file mode 100755 index 5d4363d41..000000000 --- a/content/ja/guide/v10/switching-to-preact.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: ReactからPreactへの移行 -description: ReactからPreactへの移行するために必要なことをすべて説明します。 ---- - -# (Reactから)Preactへの移行 - -`preact/compat`はReactのエコシステムに存在する多くのライブラリをPreactで使用することができるようにする互換レイヤです。既存のReactアプリケーションをPreactに移行する場合はこれを使うことをお勧めします。 - -`preact/compat`を使うことによってワークフローやコードベースを変更することなく既存のReact/ReactDOMで作られたコードで開発し続けることができます。 -`preact/compat`はバンドルサイズを2kB増加させますが、npmにあるほとんどのReact用のモジュールを利用できるようになるという利点があります。 -`preact/compat`パッケージは、`react`と`react-dom`と同じような動作するようにPreactコアに調整を加えたものです。 - ---- - - - ---- - -## compatの設定 - -`preact/compat`を設定するには`react`と`react-dom`を`preact/compat`にエイリアスする必要があります。 -バンドラでエイリアスする方法を詳しく知りたい場合は[はじめに](/guide/v10/getting-started#aliasing-react-to-preact)を読んでください。 - -## PureComponent - -`PureComponent`クラスは`Component`クラスと似た動作をします。 -違いは新しい`props`が古い`props`と等しい場合、`PureComponent`はレンダリングをスキップする点です。 -この判断は、古い`props`と新しい`props`のそれぞれのプロパティが参照的に等しいかどうか浅い(shallow)比較をすることにより行います。 -これによって不要な再レンダリングを避けることができ、アプリケーションは大幅にスピードアップします。 -`PureComponent`は`shouldComponentUpdate`のデフォルト実装を提供することにより、これを実現しています。 - -```jsx -import { render } from 'preact'; -import { PureComponent } from 'preact/compat'; - -class Foo extends PureComponent { - render(props) { - console.log("render") - return
- } -} - -const dom = document.getElementById('root'); -render(, dom); -// Logs: "render" - -// 2回目のレンダリングではログを出力しません。 -render(, dom); -``` - -> `PureComponent`はレンダリングコストが高い場合のみ有効です。シンプルなDOMツリーの場合、`props`を比較するより普通にレンダリングを実行するほうが速い場合もあります。 - -## memo - -`memo`は関数コンポーネント版の`PureComponent`に相当します。 -デフォルトでは`PureComponent`と同じ比較を行いますが、個別に比較を行う関数を設定することもできます。 - -```jsx -import { memo } from 'preact/compat'; - -function MyComponent(props) { - return
Hello {props.name}
-} - -// デフォルトの比較を使用します。 -const Memoed = memo(MyComponent); - -// 比較を行う関数を使用します。 -const Memoed2 = memo(MyComponent, (prevProps, nextProps) => { - // `name`が変わった場合のみ再レンダリングします。 - return prevProps.name === nextProps.name; -}) -``` - -> `memo`に渡す比較関数は再レンダリングをスキップしたい場合は`true`を返します。`shouldComponentUpdate`は再レンダリングをスキップしたい場合は`false`を返します。両者の戻り値が逆なことに注意してください。 - -## forwardRef - -`forwardRef`を使うとコンポーネントの外部からコンポーネント内部の要素を参照することができます。 - -```jsx -import { createRef, render } from 'preact'; -import { forwardRef } from 'preact/compat'; - -const MyComponent = forwardRef((props, ref) => { - return
Hello world
; -}) - -// refはMyComponentではなくMyComponent内部の`div`への参照を持ちます。 -const ref = createRef(); -render(, dom) -``` - -これはライブラリの開発にとても役立ちます。 - -## Portals - -`createPortal()`を使うとレンダリング時にコンポーネントの外にあるDOM Nodeにレンダリング結果を加えることができます。 -加える対象となるDOM Nodeはレンダリング時よりも前に**存在している必要があります**。 - -```html - - - -
- -
- - -``` - -```jsx -import { createPortal } from 'preact/compat'; -import MyModal from './MyModal'; - -function App() { - const container = document.getElementById('modals'); - return ( -
- I'm app - {createPortal(, container)} -
- ) -} -``` - -> Preactはブラウザのイベントシステムを使用しているのでイベントがPortalコンテナを通じて他のツリーにバブルアップしないことを忘れないでください。 - -## Suspense (実験的な機能) - -`Suspense`を使うとSuspenseの下に存在する子コンポーネントがロード中の場合はプレースホルダを表示することができます。 -一般的なユースケースとして、レンダリングする前にネットワークからコンポーネントをロードする必要があるcode-splittingを行う場合が挙げられます。 - -```jsx -import { Suspense, lazy } from `preact/compat`; - -const SomeComponent = lazy(() => import('./SomeComponent')); - -// 使い方 -loading...
}> - - - - -``` - -この例では、`SomeComponent`コンポーネントがロードされてPromiseがresolveするまで、UIに`loading...`というテキストを表示します。 - -> この機能は実験的な機能でバグがあるかもしれません。テストで試せるようにプレビュー版に含めました。製品版では使用しないことをお勧めします。 diff --git a/content/ja/index.md b/content/ja/index.md index f3c31ab0d..a0aa272d4 100755 --- a/content/ja/index.md +++ b/content/ja/index.md @@ -10,7 +10,7 @@ description: Preact is a fast 3kB alternative to React with the same modern API

Fast 3kB alternative to React with the same modern API

はじめに - Preactへ移行する + Preactへ移行する

@@ -121,7 +121,7 @@ function Counter() { PreactはReactのエコシステムにある何千ものコンポーネントをシームレスに利用できるように設計されています。

- React互換レイヤとしてバンドラにpreact/compatを加えるだけで、どんなに複雑なReactコンポーネントでもそのままアプリケーションに組み込むことができます。 + React互換レイヤとしてバンドラにpreact/compatを加えるだけで、どんなに複雑なReactコンポーネントでもそのままアプリケーションに組み込むことができます。

@@ -263,6 +263,6 @@ function Counter() {

はじめに - Preactへ移行する + Preactへ移行する

diff --git a/content/kr/about/project-goals.md b/content/kr/about/project-goals.md index ccff03243..f22685e95 100755 --- a/content/kr/about/project-goals.md +++ b/content/kr/about/project-goals.md @@ -25,4 +25,4 @@ React의 일부 기능은 Preact에서 의도적으로 제외되었습니다. - `Children`, 원시 배열로 대체 가능 - `Synthetic Events`, Preact는 IE8과 같은 이전 브라우저의 문제를 해결하지 않음 -[preact/compat]: /guide/v10/switching-to-preact +[preact/compat]: /guide/v10/getting-started#aliasing-react-to-preact diff --git a/content/kr/guide/v10/differences-to-react.md b/content/kr/guide/v10/differences-to-react.md index c1e41e4a3..faf44a796 100755 --- a/content/kr/guide/v10/differences-to-react.md +++ b/content/kr/guide/v10/differences-to-react.md @@ -170,5 +170,5 @@ React.createElement( [Project Goals]: /about/project-goals [hyperscript]: https://github.com/dominictarr/hyperscript -[preact/compat]: /guide/v10/switching-to-preact +[preact/compat]: /guide/v10/getting-started#aliasing-react-to-preact [MDN's Event Reference]: https://developer.mozilla.org/ko/docs/Web/Events diff --git a/content/kr/index.md b/content/kr/index.md index 6f92a22e7..189865ead 100644 --- a/content/kr/index.md +++ b/content/kr/index.md @@ -10,7 +10,7 @@ description: Fast 3kB alternative to React with the same modern API

Fast 3kB alternative to React with the same modern API

시작하기 - Preact로 전환하기 + Preact로 전환하기

@@ -117,7 +117,7 @@ function Counter() { 가상 DOM 구성 요소를 사용하면 버튼에서 데이터 공급자에 이르기까지 재사용 가능한 모든 것을 쉽게 공유할 수 있습니다. Preact의 디자인은 React 생태계에서 사용 가능한 수천 개의 구성 요소를 원활하게 사용할 수 있음을 의미합니다.

- 간단한 preact/compat 별칭을 번들러에 추가하면 가장 복잡한 React 구성 요소도 애플리케이션에서 사용할 수 있는 호환성 계층이 제공됩니다. + 간단한 preact/compat 별칭을 번들러에 추가하면 가장 복잡한 React 구성 요소도 애플리케이션에서 사용할 수 있는 호환성 계층이 제공됩니다.

@@ -259,6 +259,6 @@ function Counter() {

시작하기 - Preact로 전환하기 + Preact로 전환하기

diff --git a/content/pt-br/guide/v10/differences-to-react.md b/content/pt-br/guide/v10/differences-to-react.md index 6673ca09f..93f8942b8 100755 --- a/content/pt-br/guide/v10/differences-to-react.md +++ b/content/pt-br/guide/v10/differences-to-react.md @@ -119,5 +119,5 @@ A API legada `Context` exige que os Componentes implementem `contextTypes` ou `c [Objetivos do projeto]: /about/project-goals [hyperscript]: https://github.com/dominictarr/hyperscript -[preact/compat]: /guide/v10/switching-to-preact +[preact/compat]: /guide/v10/getting-started#aliasing-react-to-preact [MDN's Event Reference]: https://developer.mozilla.org/pt-BR/docs/Web/Events diff --git a/content/pt-br/guide/v10/switching-to-preact.md b/content/pt-br/guide/v10/switching-to-preact.md deleted file mode 100755 index 1300fcf22..000000000 --- a/content/pt-br/guide/v10/switching-to-preact.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Mudando de React para Preact -description: Tudo o que você precisa saber para mudar de React para Preact ---- - -# Mudando para Preact (de React) - -`preact/compat` é a nossa camada de compatibilidade que permite aproveitar as muitas bibliotecas do ecossistema React e usá-las com o Preact. Esta é a maneira recomendada de experimentar o Preact, se você já tiver um aplicativo React. - -Isso permite que você continue escrevendo o código React / ReactDOM sem nenhuma alteração no fluxo de trabalho ou na base de código. O `preact / compat` adiciona algo em torno de 2kb ao tamanho do seu pacote, mas tem a vantagem de suportar a grande maioria dos módulos React existentes que você pode encontrar no npm. O pacote `preact / compat` fornece todos os ajustes necessários no topo do núcleo do Preact para fazê-lo funcionar como `react` e `react-dom`, em um único módulo. - ---- - - - ---- - -## Configurando compat - -Para configurar `preact/compat`, você precisa de um alias `react` e `react-dom` para `preact/compat`. A página [Introdução](/guide/v10/getting-started#aliasing-react-to-preact) detalha como o aliasing é configurado em vários empacotadores. - -## PureComponent - -A classe `PureComponent` funciona de maneira semelhante ao `Component`. A diferença é que o `PureComponent` pulará a renderização quando os novos adereços forem iguais aos antigos. Para fazer isso, comparamos os adereços antigos e novos por meio de uma comparação superficial, onde verificamos cada propriedade dos adereços quanto à igualdade referencial. Isso pode acelerar muito os aplicativos, evitando renderizações desnecessárias. Ele funciona adicionando um hook de ciclo de vida padrão `shouldComponentUpdate`. - -```jsx -import { render } from 'preact'; -import { PureComponent } from 'preact/compat'; - -class Foo extends PureComponent { - render(props) { - console.log("render") - return
- } -} - -const dom = document.getElementById('root'); -render(, dom); -// Logs: "render" - -// Renderiza uma segunda vez, não registra nada -render(, dom); -``` - -> Observe que a vantagem do `PureComponent` somente compensa quando a renderização é cara. Para árvores de crianças simples, pode ser mais rápido executar o `render` comparado à sobrecarga de comparar adereços. - -## memo - -`memo` é equivalente a componentes funcionais, como` PureComponent` é para classes. Ele usa a mesma função de comparação sob o capô, mas permite especificar sua própria função especializada otimizada para o seu caso de uso. - -```jsx -import { memo } from 'preact/compat'; - -function MyComponent(props) { - return
Olá {props.name}
-} - -// Uso com função de comparação padrão -const Memoed = memo(MyComponent); - -// Uso com função de comparação personalizada -const Memoed2 = memo(MyComponent, (prevProps, nextProps) => { - // Renderiza novamente somente quando o `nome 'muda - return prevProps.name === nextProps.name; -}) -``` - -> A função de comparação é diferente de `shouldComponentUpdate`, pois verifica se os dois objetos props são **iguais**, enquanto que `shouldComponentUpdate` verifica se são diferentes. - -## forwardRef - -Em alguns casos, ao escrever um componente, você deseja permitir que o usuário encontre uma referência específica mais abaixo na árvore. Com `forwardRef`, você pode classificar" forward "a propriedade `ref`: - -```jsx -import { createRef, render } from 'preact'; -import { forwardRef } from 'preact/compat'; - -const MyComponent = forwardRef((props, ref) => { - return
Olá mundo
; -}) - -// Usage: `ref` will hold the reference to the inner `div` instead of -// `MyComponent` -const ref = createRef(); -render(, dom) -``` - -Este componente é mais útil para autores de bibliotecas. - -## Portais - -Em raras circunstâncias, convém continuar renderizando em um nó DOM diferente. O nó DOM de destino **deve** estar presente antes de tentar renderizar nele. - -```html - - - -
- -
- - -``` - -```jsx -import { createPortal } from 'preact/compat'; -import MyModal from './MyModal'; - -function App() { - const container = document.getElementById('modals'); - return ( -
- Eu sou um app - {createPortal(, container)} -
- ) -} -``` - -> Lembre-se de que, devido ao Preact reutilizar o sistema de eventos do navegador, os eventos não passam por um contêiner do Portal para a outra árvore. - -## Suspense (experimental) - -A principal idéia por trás do `Suspense` é permitir que seções da sua interface do usuário exibam algum tipo de conteúdo de espaço reservado enquanto os componentes mais abaixo na árvore ainda estão carregando. Um caso de uso comum para isso é a divisão de código, na qual você precisará carregar um componente da rede antes de poder renderizá-lo. - -```jsx -import { Suspense, lazy } from 'preact/compat'; - -const SomeComponent = lazy(() => import('./SomeComponent')); - -// Usage -loading...
}> - - - - -``` - -Neste exemplo, a interface do usuário exibirá o texto `loading ...` até que 'SomeComponent` seja carregado e a promessa seja resolvida. - -> Esse recurso é experimental e pode conter bugs. Nós o incluímos como uma prévia antecipada para aumentar a visibilidade dos testes. Não recomendamos o uso na produção. diff --git a/content/pt-br/index.md b/content/pt-br/index.md index 54adb6f81..c656d9922 100755 --- a/content/pt-br/index.md +++ b/content/pt-br/index.md @@ -10,7 +10,7 @@ title: Preact

Uma alternativa ao React com apenas 3kB e a mesma API ES6

Como começar - Mudando para Preact + Mudando para Preact

@@ -119,7 +119,7 @@ function Counter() { O design do Preact significa que você pode usar de forma harmoniosa os milhares de Componentes disponíveis no ecossistema React.

- Ao adicionar um simples alias preact-compat ao seu bundler adiciona uma camada de compatibilidade que possibilita até mesmo os componentes React mais complexos a serem utilizados na sua aplicação. + Ao adicionar um simples alias preact-compat ao seu bundler adiciona uma camada de compatibilidade que possibilita até mesmo os componentes React mais complexos a serem utilizados na sua aplicação.

@@ -266,6 +266,6 @@ function Counter() {

Como começar - Mudando para Preact + Mudando para Preact

diff --git a/content/ru/about/project-goals.md b/content/ru/about/project-goals.md index 73c2976b0..a21675678 100644 --- a/content/ru/about/project-goals.md +++ b/content/ru/about/project-goals.md @@ -25,4 +25,4 @@ Preact стремится достичь нескольких ключевых - `Children`, можно заменить собственными массивами - `Synthetic Events`, поскольку Preact не пытается исправлять проблемы в старых браузерах, таких как IE8. -[preact/compat]: /guide/v10/switching-to-preact +[preact/compat]: /guide/v10/getting-started#aliasing-react-to-preact diff --git a/content/ru/guide/v10/differences-to-react.md b/content/ru/guide/v10/differences-to-react.md index eb1c9c6b4..562ac9d5d 100644 --- a/content/ru/guide/v10/differences-to-react.md +++ b/content/ru/guide/v10/differences-to-react.md @@ -167,5 +167,5 @@ React.createElement('a', { href: '/' }, React.createElement('span', null, 'Гл [Project Goals]: /about/project-goals [hyperscript]: https://github.com/dominictarr/hyperscript -[preact/compat]: /guide/v10/switching-to-preact +[preact/compat]: /guide/v10/getting-started#aliasing-react-to-preact [MDN's Event Reference]: https://developer.mozilla.org/ru/docs/Web/Events diff --git a/content/ru/guide/v10/switching-to-preact.md b/content/ru/guide/v10/switching-to-preact.md deleted file mode 100644 index 82644b33c..000000000 --- a/content/ru/guide/v10/switching-to-preact.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Переход на Preact с React -description: Всё, что нужно знать для перехода с React на Preact ---- - -# Переход на Preact с React - -`preact/compat` — это наш слой совместимости, который позволяет использовать множество библиотек экосистемы React и применять их в Preact. Это рекомендуемый способ опробовать Preact, если у вас уже есть приложение на React. - -Это позволяет вам продолжать писать код React/ReactDOM без каких-либо изменений в рабочем процессе или кодовой базе. `preact/compat` добавляет где-то около 2 КБ к размеру вашего пакета, но имеет то преимущество, что поддерживает подавляющее большинство существующих модулей React, которые вы можете найти в npm. Пакет `preact/compat` предоставляет все необходимые настройки поверх ядра Preact, чтобы он работал так же, как `react` и `react-dom`, в одном модуле. - ---- - - - ---- - -## Настройка `preact/compat` - -Чтобы настроить `preact/compat`, вам нужно использовать псевдонимы `react` и `react-dom` для `preact/compat`. На странице [Первые шаги](/guide/v10/getting-started#псевдонимы-react-для-preact) подробно описывается настройка псевдонимов в различных сборщиках. - -## PureComponent - -Класс `PureComponent` работает аналогично `Component`. Разница в том, что `PureComponent` пропустит рендеринг, когда новые параметры будут равны старым. Для этого мы сравниваем старые и новые параметры посредством поверхностного сравнения, где мы проверяем каждое свойство параметра на ссылочное равенство. Это может значительно ускорить работу приложений, избегая ненужных повторных рендерингов. Это работает путём добавления хука жизненного цикла `shouldComponentUpdate` по умолчанию. - -```jsx -import { render } from 'preact'; -import { PureComponent } from 'preact/compat'; - -class Foo extends PureComponent { - render(props) { - console.log('render'); - return
; - } -} - -const dom = document.getElementById('root'); -render(, dom); -// Лог: "render" - -// Рендеринг второй раз, ничего не логируется -render(, dom); -``` - -> Обратите внимание, что преимущество `PureComponent` окупается только тогда, когда рендеринг обходится дорого. Для простых дочерних деревьев просто выполнить «рендеринг» (`render`) может быть быстрее, чем накладные расходы на сравнение параметров. - -## memo - -`memo` эквивалентен функциональным компонентам, как `PureComponent` — классам. Он использует ту же функцию сравнения, но позволяет вам указать собственную специализированную функцию, оптимизированную для вашего случая использования. - -```jsx -import { memo } from 'preact/compat'; - -function MyComponent(props) { - return
Hello {props.name}
; -} - -// Использование с функцией сравнения по умолчанию -const Memoed = memo(MyComponent); - -// Использование с пользовательской функцией сравнения -const Memoed2 = memo(MyComponent, (prevProps, nextProps) => { - // Повторный рендеринг только при изменении `name' - return prevProps.name === nextProps.name; -}); -``` - -> Функция сравнения отличается от `shouldComponentUpdate` тем, что она проверяет, являются ли два объекта props **равными**, тогда как `shouldComponentUpdate` проверяет, различны ли они. - -## forwardRef - -В некоторых случаях при написании компонента вы хотите, чтобы пользователь мог получить определённую ссылку дальше по дереву. С помощью `forwardRef` вы можете своего рода «переслать» свойство `ref`: - -```jsx -import { createRef, render } from 'preact'; -import { forwardRef } from 'preact/compat'; - -const MyComponent = forwardRef((props, ref) => { - return
Привет, мир
; -}); - -// Использование: `ref` будет содержать ссылку на внутренний `div` вместо `MyComponent` -const ref = createRef(); -render(, dom); -``` - -Этот компонент наиболее полезен для авторов библиотек. - -## Порталы - -В редких случаях вам может потребоваться продолжить рендеринг в другой узел DOM. Целевой узел DOM **должен** присутствовать перед попыткой рендеринга в него. - -```html - - - -
- -
- - -``` - -```jsx -import { createPortal } from 'preact/compat'; -import MyModal from './MyModal'; - -function App() { - const container = document.getElementById('modals'); - return ( -
- I'm app - {createPortal(, container)} -
- ); -} -``` - -> Имейте в виду, что из-за того, что Preact повторно использует систему событий браузера, события не передаются через контейнер портала в другое дерево. - -## Suspense - -Основная идея `Suspense` (дословно — «Приостановка») заключается в том, чтобы позволить разделам вашего пользовательского интерфейса отображать своего рода заполнительный контент, в то время как компоненты, расположенные ниже по дереву, всё ещё загружаются. Распространённым вариантом использования этого является разделение кода, когда вам нужно загрузить компонент из сети, прежде чем вы сможете его отобразить. - -```jsx -import { Suspense, lazy } from 'preact/compat'; - -const SomeComponent = lazy(() => import('./SomeComponent')); - -// Usage -загрузка...
}> - - - -; -``` - -В этом примере пользовательский интерфейс будет отображать текст `загрузка...` до тех пор, пока `SomeComponent` не будет загружен и Promise не будет разрешен. - -> Suspense как в React, так и в Preact ещё не совсем завершен. Хотя команда React по-прежнему активно отговаривает пользователей взаимодействовать с ним напрямую для получения данных, это шаблон, который некоторые пользователи Preact с удовольствием используют на протяжении последних нескольких лет. Существуют несколько известных проблем (пожалуйста, смотрите [наш трекер](https://github.com/preactjs/preact/issues?q=is%3Aissue+is%3Aopen+suspense) для получения актуальной информации), но в целом он считается достаточно стабильным для использования в работе, если вы этого хотите. -> -> Этот сайт, например, построен с использованием стратегии получения данных на основе Suspense, используемой для загрузки всего контента, который вы видите. diff --git a/content/ru/guide/v11/differences-to-react.md b/content/ru/guide/v11/differences-to-react.md index bd43e55fb..c2a4c603a 100644 --- a/content/ru/guide/v11/differences-to-react.md +++ b/content/ru/guide/v11/differences-to-react.md @@ -167,5 +167,5 @@ React.createElement('a', { href: '/' }, React.createElement('span', null, 'Гл [Project Goals]: /about/project-goals [hyperscript]: https://github.com/dominictarr/hyperscript -[preact/compat]: /guide/v11/switching-to-preact +[preact/compat]: /guide/v11/getting-started#aliasing-react-to-preact [MDN's Event Reference]: https://developer.mozilla.org/ru/docs/Web/Events diff --git a/content/ru/guide/v11/switching-to-preact.md b/content/ru/guide/v11/switching-to-preact.md deleted file mode 100644 index 102af2ec1..000000000 --- a/content/ru/guide/v11/switching-to-preact.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Переход на Preact с React -description: Всё, что нужно знать для перехода с React на Preact ---- - -# Переход на Preact с React - -`preact/compat` — это наш слой совместимости, который позволяет использовать множество библиотек экосистемы React и применять их в Preact. Это рекомендуемый способ опробовать Preact, если у вас уже есть приложение на React. - -Это позволяет вам продолжать писать код React/ReactDOM без каких-либо изменений в рабочем процессе или кодовой базе. `preact/compat` добавляет где-то около 2 КБ к размеру вашего пакета, но имеет то преимущество, что поддерживает подавляющее большинство существующих модулей React, которые вы можете найти в npm. Пакет `preact/compat` предоставляет все необходимые настройки поверх ядра Preact, чтобы он работал так же, как `react` и `react-dom`, в одном модуле. - ---- - - - ---- - -## Настройка `preact/compat` - -Чтобы настроить `preact/compat`, вам нужно использовать псевдонимы `react` и `react-dom` для `preact/compat`. На странице [Первые шаги](/guide/v11/getting-started#псевдонимы-react-для-preact) подробно описывается настройка псевдонимов в различных сборщиках. - -## PureComponent - -Класс `PureComponent` работает аналогично `Component`. Разница в том, что `PureComponent` пропустит рендеринг, когда новые параметры будут равны старым. Для этого мы сравниваем старые и новые параметры посредством поверхностного сравнения, где мы проверяем каждое свойство параметра на ссылочное равенство. Это может значительно ускорить работу приложений, избегая ненужных повторных рендерингов. Это работает путём добавления хука жизненного цикла `shouldComponentUpdate` по умолчанию. - -```jsx -import { render } from 'preact'; -import { PureComponent } from 'preact/compat'; - -class Foo extends PureComponent { - render(props) { - console.log('render'); - return
; - } -} - -const dom = document.getElementById('root'); -render(, dom); -// Лог: "render" - -// Рендеринг второй раз, ничего не логируется -render(, dom); -``` - -> Обратите внимание, что преимущество `PureComponent` окупается только тогда, когда рендеринг обходится дорого. Для простых дочерних деревьев просто выполнить «рендеринг» (`render`) может быть быстрее, чем накладные расходы на сравнение параметров. - -## memo - -`memo` эквивалентен функциональным компонентам, как `PureComponent` — классам. Он использует ту же функцию сравнения, но позволяет вам указать собственную специализированную функцию, оптимизированную для вашего случая использования. - -```jsx -import { memo } from 'preact/compat'; - -function MyComponent(props) { - return
Hello {props.name}
; -} - -// Использование с функцией сравнения по умолчанию -const Memoed = memo(MyComponent); - -// Использование с пользовательской функцией сравнения -const Memoed2 = memo(MyComponent, (prevProps, nextProps) => { - // Повторный рендеринг только при изменении `name' - return prevProps.name === nextProps.name; -}); -``` - -> Функция сравнения отличается от `shouldComponentUpdate` тем, что она проверяет, являются ли два объекта props **равными**, тогда как `shouldComponentUpdate` проверяет, различны ли они. - -## forwardRef - -В некоторых случаях при написании компонента вы хотите, чтобы пользователь мог получить определённую ссылку дальше по дереву. С помощью `forwardRef` вы можете своего рода «переслать» свойство `ref`: - -```jsx -import { createRef, render } from 'preact'; -import { forwardRef } from 'preact/compat'; - -const MyComponent = forwardRef((props, ref) => { - return
Привет, мир
; -}); - -// Использование: `ref` будет содержать ссылку на внутренний `div` вместо `MyComponent` -const ref = createRef(); -render(, dom); -``` - -Этот компонент наиболее полезен для авторов библиотек. - -## Порталы - -В редких случаях вам может потребоваться продолжить рендеринг в другой узел DOM. Целевой узел DOM **должен** присутствовать перед попыткой рендеринга в него. - -```html - - - -
- -
- - -``` - -```jsx -import { createPortal } from 'preact/compat'; -import MyModal from './MyModal'; - -function App() { - const container = document.getElementById('modals'); - return ( -
- I'm app - {createPortal(, container)} -
- ); -} -``` - -> Имейте в виду, что из-за того, что Preact повторно использует систему событий браузера, события не передаются через контейнер портала в другое дерево. - -## Suspense - -Основная идея `Suspense` (дословно — «Приостановка») заключается в том, чтобы позволить разделам вашего пользовательского интерфейса отображать своего рода заполнительный контент, в то время как компоненты, расположенные ниже по дереву, всё ещё загружаются. Распространённым вариантом использования этого является разделение кода, когда вам нужно загрузить компонент из сети, прежде чем вы сможете его отобразить. - -```jsx -import { Suspense, lazy } from 'preact/compat'; - -const SomeComponent = lazy(() => import('./SomeComponent')); - -// Usage -загрузка...
}> - - - -; -``` - -В этом примере пользовательский интерфейс будет отображать текст `загрузка...` до тех пор, пока `SomeComponent` не будет загружен и Promise не будет разрешен. - -> Suspense как в React, так и в Preact ещё не совсем завершен. Хотя команда React по-прежнему активно отговаривает пользователей взаимодействовать с ним напрямую для получения данных, это шаблон, который некоторые пользователи Preact с удовольствием используют на протяжении последних нескольких лет. Существуют несколько известных проблем (пожалуйста, смотрите [наш трекер](https://github.com/preactjs/preact/issues?q=is%3Aissue+is%3Aopen+suspense) для получения актуальной информации), но в целом он считается достаточно стабильным для использования в работе, если вы этого хотите. -> -> Этот сайт, например, построен с использованием стратегии получения данных на основе Suspense, используемой для загрузки всего контента, который вы видите. diff --git a/content/ru/index.md b/content/ru/index.md index 86c081334..32d0c9c59 100644 --- a/content/ru/index.md +++ b/content/ru/index.md @@ -10,7 +10,7 @@ description: Быстрая 3КБ-альтернатива React с тем же

Быстрая альтернатива React весом 3 КБ с тем же современным API.

Начать - Перейти на Preact + Перейти на Preact

@@ -120,7 +120,7 @@ function Counter() { Дизайн Preact позволяет легко использовать тысячи компонентов, доступных в экосистеме React.

- Добавление простого preact/compat псевдонима в вашу сборку обеспечивает совместимость даже с самыми сложными компонентами React. + Добавление простого preact/compat псевдонима в вашу сборку обеспечивает совместимость даже с самыми сложными компонентами React.

@@ -263,6 +263,6 @@ function Counter() {

Начать - Перейти на Preact + Перейти на Preact

diff --git a/content/tr/index.md b/content/tr/index.md index bfa1da5d7..d20090cb4 100755 --- a/content/tr/index.md +++ b/content/tr/index.md @@ -10,7 +10,7 @@ title: Preact

Aynı modern API ile React'e hızlı ve 3kB'lık alternatif

Başlangıç - Preact'e Geçiş + Preact'e Geçiş

@@ -131,7 +131,7 @@ function Counter() { Preact'ın tasarımı, halihazırda React'ın ekosisteminde bulunan yüzlerce Component'i sorunsuz bir şekilde kullanabileceğiniz manasına gelir.

- Paketleyicinizde preact-compat'ı eklemek, bir uyumluluk katmanı sunarak karmaşık React bileşenlerini dahi uygulamanızda kullanmanıza izin veriyor. + Paketleyicinizde preact-compat'ı eklemek, bir uyumluluk katmanı sunarak karmaşık React bileşenlerini dahi uygulamanızda kullanmanıza izin veriyor.

@@ -278,6 +278,6 @@ function Counter() {

Başlangıç - Preact'e Geçiş + Preact'e Geçiş

diff --git a/content/zh/guide/v10/differences-to-react.md b/content/zh/guide/v10/differences-to-react.md index 4d1a58aa9..33fa12306 100644 --- a/content/zh/guide/v10/differences-to-react.md +++ b/content/zh/guide/v10/differences-to-react.md @@ -167,5 +167,5 @@ React.createElement( [Project Goals]: /about/project-goals [hyperscript]: https://github.com/dominictarr/hyperscript -[preact/compat]: /guide/v10/switching-to-preact +[preact/compat]: /guide/v10/getting-started#aliasing-react-to-preact [MDN's Event Reference]: https://developer.mozilla.org/en-US/docs/Web/Events diff --git a/content/zh/guide/v10/switching-to-preact.md b/content/zh/guide/v10/switching-to-preact.md deleted file mode 100644 index f615f18cd..000000000 --- a/content/zh/guide/v10/switching-to-preact.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: 从 React 迁移到 Preact -description: 从 React 迁移到 Preact 时必要的说明。 ---- - -# 从 React 切换到 Preact - -`preact/compat` 是我们的兼容层，它允许您无需修改现有代码即可利用 React 生态系统中丰富的库。这是现有的 React 应用迁移到 Preact 的推荐选择。 - -通过这一兼容层，您可以沿用现有的 React/ReactDOM 代码和开发流程。只增加约 2kb 的打包体积，就能无缝兼容 npm 上绝大多数 React 生态模块。该包在 Preact 核心之上完美模拟了 `react` 和 `react-dom` 的完整功能，并将这两个模块整合在一个模块中。 - ---- - - - ---- - -## 设置 compat - -要启用 `preact/compat`，只需在构建工具中将 `react` 和 `react-dom` 的引用重定向到 `preact/compat`。[开始上手](/guide/v10/getting-started#aliasing-react-to-preact)页面提供了主流打包工具的详细配置方法。 - -## PureComponent - -`PureComponent` 是自带性能优化的组件基类：和 `Component` 类不同的是，当新旧 `props` 通过浅层比较（逐个属性值比对）相等时，将自动跳过渲染。这通过默认的 `shouldComponentUpdate` 生命周期钩子实现，能显著提升复杂应用的性能表现。 - -```jsx -import { render } from 'preact'; -import { PureComponent } from 'preact/compat'; - -class Foo extends PureComponent { - render(props) { - console.log("render") - return
- } -} - -const dom = document.getElementById('root'); -render(, dom); -// 输出: "render" - -// 第二次渲染，不会输出任何内容 -render(, dom); -``` - -> 注意：当组件渲染开销较大时，使用 `PureComponent` 才能体现优势。对于简单组件，直接渲染可能比 `props` 比对更高效。 - -## memo - -`memo` 为函数式组件提供类似 `PureComponent` 的优化能力。您既可以使用默认比较，也可以自定义比对逻辑来满足特定需求。 - -```jsx -import { memo } from 'preact/compat'; - -function MyComponent(props) { - return
Hello {props.name}
-} - -// 使用默认比较函数 -const Memoed = memo(MyComponent); - -// 使用自定义比较函数 -const Memoed2 = memo(MyComponent, (prevProps, nextProps) => { - // 仅当 `name` 改变时才重新渲染 - return prevProps.name === nextProps.name; -}) -``` - -> 比对函数与 `shouldComponentUpdate` 不同之处在于，前者比较两个 props 是否**相同**（比对函数返回 `true` 表示属性相同），而后者比较两个 props 是否不同。 - -## forwardRef - -当需要暴露内部子元素引用时，`forwardRef` 可将 `ref` 属性透传到指定元素： - -```jsx -import { createRef, render } from 'preact'; -import { forwardRef } from 'preact/compat'; - -const MyComponent = forwardRef((props, ref) => { - return
Hello world
; -}) - -// 用法：`ref` 将持有内部 `div` 的引用，而不是 `MyComponent` 的引用 -const ref = createRef(); -render(, dom) -``` - -这个功能对可复用组件库作者尤为重要。 - -## 跨层级渲染 Portals - -当需要将内容渲染到组件树之外的 DOM 节点时，可以使用 `createPortal`。注意目标容器需预先存在。 - -```html - - - -
- -
- - -``` - -```jsx -import { createPortal } from 'preact/compat'; -import MyModal from './MyModal'; - -function App() { - const container = document.getElementById('modals'); - return ( -
- 我是 App - {createPortal(, container)} -
- ) -} -``` - -> 请记住，由于 Preact 重用了浏览器的原生事件系统，所以 Portal 内事件不会冒泡到父组件树当中。 - -## Suspense - -`Suspense` 允许在子组件加载过程中展示加载状态，常用于代码分割等异步场景。当子组件的加载未完成时显示备用内容。 - -```jsx -import { Suspense, lazy } from 'preact/compat'; - -const SomeComponent = lazy(() => import('./SomeComponent')); - -// 用法 -加载中...
}> - - - - -``` - -在此示例中，界面将显示 `加载中...` 文本，直到 `SomeComponent` 加载完毕并且 Promise 完成。 - -> React 和 Preact 中的 Suspense 仍处于演进阶段。虽然 React 团队仍然不鼓励用户直接将其用于数据获取，但它已被众多 Preact 开发者成功实践多年。尽管存在部分已知问题（最新动态请参考[我们的问题追踪系统](https://github.com/preactjs/preact/issues)），但普遍认为其稳定性足以满足生产环境需求。 -> -> 例如，您现在浏览的 Preact 官方网站，正是采用基于 Suspense 的异步数据加载策略来实现全站内容渲染。 diff --git a/content/zh/guide/v11/differences-to-react.md b/content/zh/guide/v11/differences-to-react.md index 3ba8c4a4b..dd29fa97a 100644 --- a/content/zh/guide/v11/differences-to-react.md +++ b/content/zh/guide/v11/differences-to-react.md @@ -171,5 +171,5 @@ React.createElement( [project goals]: /about/project-goals [hyperscript]: https://github.com/dominictarr/hyperscript -[preact/compat]: /guide/v10/switching-to-preact +[preact/compat]: /guide/v10/getting-started#aliasing-react-to-preact [mdn's event reference]: https://developer.mozilla.org/en-US/docs/Web/Events diff --git a/content/zh/guide/v11/switching-to-preact.md b/content/zh/guide/v11/switching-to-preact.md deleted file mode 100644 index bba51042f..000000000 --- a/content/zh/guide/v11/switching-to-preact.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: 从 React 迁移到 Preact -description: 从 React 迁移到 Preact 时必要的说明。 ---- - -# 从 React 切换到 Preact - -`preact/compat` 是我们的兼容层，它允许您无需修改现有代码即可利用 React 生态系统中丰富的库。这是现有的 React 应用迁移到 Preact 的推荐选择。 - -通过这一兼容层，您可以沿用现有的 React/ReactDOM 代码和开发流程。只增加约 2kb 的打包体积，就能无缝兼容 npm 上绝大多数 React 生态模块。该包在 Preact 核心之上完美模拟了 `react` 和 `react-dom` 的完整功能，并将这两个模块整合在一个模块中。 - ---- - - - ---- - -## 设置 compat - -要启用 `preact/compat`，只需在构建工具中将 `react` 和 `react-dom` 的引用重定向到 `preact/compat`。[开始上手](/guide/v10/getting-started#aliasing-react-to-preact)页面提供了主流打包工具的详细配置方法。 - -## PureComponent - -`PureComponent` 是自带性能优化的组件基类：和 `Component` 类不同的是，当新旧 `props` 通过浅层比较（逐个属性值比对）相等时，将自动跳过渲染。这通过默认的 `shouldComponentUpdate` 生命周期钩子实现，能显著提升复杂应用的性能表现。 - -```jsx -import { render } from 'preact'; -import { PureComponent } from 'preact/compat'; - -class Foo extends PureComponent { - render(props) { - console.log('render'); - return
; - } -} - -const dom = document.getElementById('root'); -render(, dom); -// 输出: "render" - -// 第二次渲染，不会输出任何内容 -render(, dom); -``` - -> 注意：当组件渲染开销较大时，使用 `PureComponent` 才能体现优势。对于简单组件，直接渲染可能比 `props` 比对更高效。 - -## memo - -`memo` 为函数式组件提供类似 `PureComponent` 的优化能力。您既可以使用默认比较，也可以自定义比对逻辑来满足特定需求。 - -```jsx -import { memo } from 'preact/compat'; - -function MyComponent(props) { - return
Hello {props.name}
; -} - -// 使用默认比较函数 -const Memoed = memo(MyComponent); - -// 使用自定义比较函数 -const Memoed2 = memo(MyComponent, (prevProps, nextProps) => { - // 仅当 `name` 改变时才重新渲染 - return prevProps.name === nextProps.name; -}); -``` - -> 比对函数与 `shouldComponentUpdate` 不同之处在于，前者比较两个 props 是否**相同**（比对函数返回 `true` 表示属性相同），而后者比较两个 props 是否不同。 - -## forwardRef - -当需要暴露内部子元素引用时，`forwardRef` 可将 `ref` 属性透传到指定元素： - -```jsx -import { createRef, render } from 'preact'; -import { forwardRef } from 'preact/compat'; - -const MyComponent = forwardRef((props, ref) => { - return
Hello world
; -}); - -// 用法：`ref` 将持有内部 `div` 的引用，而不是 `MyComponent` 的引用 -const ref = createRef(); -render(, dom); -``` - -这个功能对可复用组件库作者尤为重要。 - -## 跨层级渲染 Portals - -当需要将内容渲染到组件树之外的 DOM 节点时，可以使用 `createPortal`。注意目标容器需预先存在。 - -```html - - - -
- -
- - -``` - -```jsx -import { createPortal } from 'preact/compat'; -import MyModal from './MyModal'; - -function App() { - const container = document.getElementById('modals'); - return ( -
- 我是 App - {createPortal(, container)} -
- ); -} -``` - -> 请记住，由于 Preact 重用了浏览器的原生事件系统，所以 Portal 内事件不会冒泡到父组件树当中。 - -## Suspense - -`Suspense` 允许在子组件加载过程中展示加载状态，常用于代码分割等异步场景。当子组件的加载未完成时显示备用内容。 - -```jsx -import { Suspense, lazy } from 'preact/compat'; - -const SomeComponent = lazy(() => import('./SomeComponent')); - -// 用法 -加载中...
}> - - - -; -``` - -在此示例中，界面将显示 `加载中...` 文本，直到 `SomeComponent` 加载完毕并且 Promise 完成。 - -> React 和 Preact 中的 Suspense 仍处于演进阶段。虽然 React 团队仍然不鼓励用户直接将其用于数据获取，但它已被众多 Preact 开发者成功实践多年。尽管存在部分已知问题（最新动态请参考[我们的问题追踪系统](https://github.com/preactjs/preact/issues)），但普遍认为其稳定性足以满足生产环境需求。 -> -> 例如，您现在浏览的 Preact 官方网站，正是采用基于 Suspense 的异步数据加载策略来实现全站内容渲染。 diff --git a/content/zh/index.md b/content/zh/index.md index 31c5b4f4c..468fc633a 100755 --- a/content/zh/index.md +++ b/content/zh/index.md @@ -11,7 +11,7 @@ description: React 的 3kb 轻量级替代方案，拥有相同的现代 API。

3kb 大小的 React 轻量、快速替代方案，拥有相同的现代 API。

开始上手 - 切换到 preact + 切换到 preact

@@ -123,7 +123,7 @@ function Counter() { 虚拟 DOM 组件让其复用易如反掌——无论是按钮，还是数据提供方，Preact 的设计都能让您轻松、无缝地借用来自 React 生态中的许多组件。

- 为您的打包工具添加一行简单的 preact/compat 替名即可为即便是最为复杂的 React 组件提供一层无缝兼容。 + 为您的打包工具添加一行简单的 preact/compat 替名即可为即便是最为复杂的 React 组件提供一层无缝兼容。

@@ -269,6 +269,6 @@ function Counter() {

开始上手 - 切换到 Preact + 切换到 Preact

diff --git a/src/assets/_redirects b/src/assets/_redirects index 42c67e1db..c2b310606 100644 --- a/src/assets/_redirects +++ b/src/assets/_redirects @@ -10,6 +10,7 @@ /guide/unit-testing-with-enzyme /guide/v10/unit-testing-with-enzyme /guide/progressive-web-apps /guide/v8/progressive-web-apps /guide/v10/tutorial /tutorial +/guide/v10/switching-to-preact /guide/v10/getting-started#aliasing-react-to-preact # Return a smaller asset than the prerendered 404 page for failed "guess-and-check" translation fetches /content/* /content/en/404.json 404 diff --git a/src/config.json b/src/config.json index 83d394936..b55a9dd0f 100644 --- a/src/config.json +++ b/src/config.json @@ -242,6 +242,18 @@ "kr": "10.x에서 업그레이드하기", "ru": "Обновление с 10.x" } + }, + { + "path": "/differences-to-react", + "name": { + "en": "Differences to React", + "pt-br": "Diferenças do React", + "ja": "Reactとの違い", + "de": "Unterschiede zu React", + "kr": "React와의 차이점", + "zh": "与 React 的区别", + "ru": "Отличия от React" + } } ] }, @@ -370,40 +382,6 @@ } ] }, - { - "name": { - "en": "React compatibility", - "zh": "React 兼容性", - "kr": "React 호환성", - "ru": "Совместимость с React" - }, - "routes": [ - { - "path": "/differences-to-react", - "name": { - "en": "Differences to React", - "pt-br": "Diferenças do React", - "ja": "Reactとの違い", - "de": "Unterschiede zu React", - "kr": "React와의 차이점", - "zh": "与 React 的区别", - "ru": "Отличия от React" - } - }, - { - "path": "/switching-to-preact", - "name": { - "en": "Switching to Preact", - "pt-br": "Mudando para Preact", - "ja": "Preactへの移行", - "de": "Wechsel zu Preact", - "kr": "Preact로 전환", - "zh": "从 React 转到 Preact", - "ru": "Переход на Preact" - } - } - ] - }, { "name": { "en": "Advanced", @@ -545,6 +523,18 @@ "ru": "Обновление с 8.x", "zh": "从 8.x 版本更新" } + }, + { + "path": "/differences-to-react", + "name": { + "en": "Differences to React", + "de": "Unterschiede zu React", + "ja": "Reactとの違い", + "kr": "React와의 차이점", + "pt-br": "Diferenças do React", + "ru": "Отличия от React", + "zh": "与 React 的区别" + } } ] }, @@ -673,40 +663,6 @@ } ] }, - { - "name": { - "en": "React compatibility", - "kr": "React 호환성", - "ru": "Совместимость с React", - "zh": "React 兼容性" - }, - "routes": [ - { - "path": "/differences-to-react", - "name": { - "en": "Differences to React", - "de": "Unterschiede zu React", - "ja": "Reactとの違い", - "kr": "React와의 차이점", - "pt-br": "Diferenças do React", - "ru": "Отличия от React", - "zh": "与 React 的区别" - } - }, - { - "path": "/switching-to-preact", - "name": { - "en": "Switching to Preact", - "de": "Wechsel zu Preact", - "ja": "Preactへの移行", - "kr": "Preact로 전환", - "pt-br": "Mudando para Preact", - "ru": "Переход на Preact", - "zh": "从 React 转到 Preact" - } - } - ] - }, { "name": { "en": "Advanced",