diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index 07271cef6..87dcfdc73 100644 --- a/.github/workflows/analyze.yml +++ b/.github/workflows/analyze.yml @@ -16,7 +16,7 @@ jobs: - name: Set up node uses: actions/setup-node@v1 with: - node-version: "14.x" + node-version: '20.x' - name: Install dependencies uses: bahmutov/npm-install@v1.7.10 diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml index bf446393a..34ca6d7b8 100644 --- a/.github/workflows/site_lint.yml +++ b/.github/workflows/site_lint.yml @@ -11,17 +11,17 @@ jobs: lint: runs-on: ubuntu-latest - name: Lint on node 12.x and ubuntu-latest + name: Lint on node 20.x and ubuntu-latest steps: - uses: actions/checkout@v1 - - name: Use Node.js 12.x - uses: actions/setup-node@v1 + - name: Use Node.js 20.x + uses: actions/setup-node@v3 with: - node-version: 12.x + node-version: 20.x - name: Install deps and build (with cache) - uses: bahmutov/npm-install@v1.7.10 + uses: bahmutov/npm-install@v1.8.32 - name: Lint codebase run: yarn ci-check diff --git a/next.config.js b/next.config.js index 2ea3e916e..414728580 100644 --- a/next.config.js +++ b/next.config.js @@ -9,10 +9,10 @@ const nextConfig = { pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'], reactStrictMode: true, experimental: { - plugins: true, + // TODO: Remove after https://github.com/vercel/next.js/issues/49355 is fixed + appDir: false, scrollRestoration: true, legacyBrowsers: false, - browsersListForSwc: true, }, env: { SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS, diff --git a/package.json b/package.json index f4f9a8026..e12f2aa46 100644 --- a/package.json +++ b/package.json @@ -32,12 +32,12 @@ "debounce": "^1.2.1", "ga-lite": "^2.1.4", "github-slugger": "^1.3.0", - "next": "12.3.2-canary.7", + "next": "^13.4.1", "next-remote-watch": "^1.0.0", "parse-numeric-range": "^1.2.0", - "react": "0.0.0-experimental-cb5084d1c-20220924", + "react": "^0.0.0-experimental-16d053d59-20230506", "react-collapsed": "npm:@gaearon/react-collapsed@3.1.0-forked.1", - "react-dom": "0.0.0-experimental-cb5084d1c-20220924", + "react-dom": "^0.0.0-experimental-16d053d59-20230506", "remark-frontmatter": "^4.0.1", "remark-gfm": "^3.0.1" }, @@ -98,7 +98,7 @@ "webpack-bundle-analyzer": "^4.5.0" }, "engines": { - "node": ">=12.x" + "node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0" }, "nextBundleAnalysis": { "budget": null, diff --git a/patches/next+12.3.2-canary.7.patch b/patches/next+12.3.2-canary.7.patch deleted file mode 100644 index ee8d132de..000000000 --- a/patches/next+12.3.2-canary.7.patch +++ /dev/null @@ -1,22 +0,0 @@ -diff --git a/node_modules/next/dist/server/render.js b/node_modules/next/dist/server/render.js -index 3a141de..72a8749 100644 ---- a/node_modules/next/dist/server/render.js -+++ b/node_modules/next/dist/server/render.js -@@ -752,9 +752,14 @@ async function renderToHTML(req, res, pathname, query, renderOpts) { - // Enabling react concurrent rendering mode: __NEXT_REACT_ROOT = true - const renderShell = async (EnhancedApp, EnhancedComponent)=>{ - const content = renderContent(EnhancedApp, EnhancedComponent); -- return await (0, _nodeWebStreamsHelper).renderToInitialStream({ -- ReactDOMServer, -- element: content -+ return new Promise((resolve, reject) => { -+ (0, _nodeWebStreamsHelper).renderToInitialStream({ -+ ReactDOMServer, -+ element: content, -+ streamOptions: { -+ onError: reject -+ } -+ }).then(resolve, reject); - }); - }; - const createBodyResult = (initialStream, suffix)=>{ diff --git a/patches/next+13.4.1.patch b/patches/next+13.4.1.patch new file mode 100644 index 000000000..6de490aa4 --- /dev/null +++ b/patches/next+13.4.1.patch @@ -0,0 +1,22 @@ +diff --git a/node_modules/next/dist/server/render.js b/node_modules/next/dist/server/render.js +index a1f8648..1b3d608 100644 +--- a/node_modules/next/dist/server/render.js ++++ b/node_modules/next/dist/server/render.js +@@ -758,9 +758,14 @@ async function renderToHTML(req, res, pathname, query, renderOpts) { + // Always using react concurrent rendering mode with required react version 18.x + const renderShell = async (EnhancedApp, EnhancedComponent)=>{ + const content = renderContent(EnhancedApp, EnhancedComponent); +- return await (0, _nodewebstreamshelper.renderToInitialStream)({ +- ReactDOMServer: _serverbrowser.default, +- element: content ++ return new Promise((resolve, reject) => { ++ (0, _nodewebstreamshelper.renderToInitialStream)({ ++ ReactDOMServer: _serverbrowser.default, ++ element: content, ++ streamOptions: { ++ onError: reject ++ } ++ }).then(resolve, reject); + }); + }; + const createBodyResult = (0, _tracer.getTracer)().wrap(_constants2.RenderSpan.createBodyResult, (initialStream, suffix)=>{ diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx index ca3afa851..8eead2302 100644 --- a/src/components/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -15,10 +15,10 @@ function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) { !crumb.skipBreadcrumb && (
- - - {crumb.title} - + + {crumb.title} & ButtonLinkProps) { const classes = cn( className, 'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug', @@ -34,10 +34,13 @@ function ButtonLink({ } ); return ( - - - {children} - + + {children} ); } diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx index d2c2c25de..a5c7324e2 100644 --- a/src/components/DocsFooter.tsx +++ b/src/components/DocsFooter.tsx @@ -66,25 +66,24 @@ function FooterLink({ type: 'Previous' | 'Next'; }) { return ( - - - - - - {type} - - {title} + + + + + {type} - + {title} + ); } diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index 677899eec..4d0b06646 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -388,8 +388,8 @@ function FooterLink({ return (
- - {children} + + {children}
); diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 0597642ae..ba3ff6ef1 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -1186,13 +1186,14 @@ async function Talks({ confId }) { function useNestedScrollLock(ref) { useEffect(() => { + let node = ref.current; let isLocked = false; let lastScroll = performance.now(); function handleScroll() { if (!isLocked) { isLocked = true; - ref.current.style.pointerEvents = 'none'; + node.style.pointerEvents = 'none'; } lastScroll = performance.now(); } @@ -1200,7 +1201,7 @@ function useNestedScrollLock(ref) { function updateLock() { if (isLocked && performance.now() - lastScroll > 150) { isLocked = false; - ref.current.style.pointerEvents = ''; + node.style.pointerEvents = ''; } } @@ -1274,7 +1275,7 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
-
+ {hasRefresh &&
}
- 0, - 'pl-5': level < 2, - 'text-base font-bold': level === 0, - 'text-primary dark:text-primary-dark': level === 0 && !selected, - 'text-base text-secondary dark:text-secondary-dark': - level > 0 && !selected, - 'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark': - selected, - 'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3': - isPending, - } - )}> - {/* This here needs to be refactored ofc */} + 0, + 'pl-5': level < 2, + 'text-base font-bold': level === 0, + 'text-primary dark:text-primary-dark': level === 0 && !selected, + 'text-base text-secondary dark:text-secondary-dark': + level > 0 && !selected, + 'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark': + selected, + 'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3': + isPending, + } + )}> + {/* This here needs to be refactored ofc */} + + {title} + + {isExpanded != null && !hideArrow && ( - {title} + - {isExpanded != null && !hideArrow && ( - - - - )} - + )} ); } diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx index 23860a16f..0157f1ba5 100644 --- a/src/components/Layout/TopNav/TopNav.tsx +++ b/src/components/Layout/TopNav/TopNav.tsx @@ -90,15 +90,17 @@ const githubIcon = ( ); -function Link({href, children, ...props}: JSX.IntrinsicElements['a']) { +function Link({ + href, + children, + ...props +}: React.AnchorHTMLAttributes) { return ( - - {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} - - {children} - + + {children} ); } @@ -247,16 +249,15 @@ export default function TopNav({ {isOpen ? : }
- - - - React - + + + React
diff --git a/src/components/MDX/BlogCard.tsx b/src/components/MDX/BlogCard.tsx index 9d86f9211..ba610b111 100644 --- a/src/components/MDX/BlogCard.tsx +++ b/src/components/MDX/BlogCard.tsx @@ -16,62 +16,62 @@ export interface BlogCardProps { function BlogCard({title, badge, date, icon, url, children}: BlogCardProps) { return ( - - -
-
-

- {title} -

-
-
-
- {icon === 'labs' && ( - - - - )} - {icon === 'blog' && ( - - - - )} - {date} - {badge ? ( -
- New -
- ) : null} -
- - {children} - - {children != null && ( -
- Read more -
+ + ); } diff --git a/src/components/MDX/Link.tsx b/src/components/MDX/Link.tsx index 8986d07a5..7bf041e56 100644 --- a/src/components/MDX/Link.tsx +++ b/src/components/MDX/Link.tsx @@ -13,7 +13,7 @@ function Link({ className, children, ...props -}: JSX.IntrinsicElements['a']) { +}: React.AnchorHTMLAttributes) { const classes = 'inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal'; const modifiedChildren = Children.toArray(children).map((child: any) => { @@ -41,11 +41,8 @@ function Link({ {modifiedChildren} ) : ( - - {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} - - {modifiedChildren} - + + {modifiedChildren} )} diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx index 4181dbe95..4d206fff8 100644 --- a/src/components/MDX/Sandpack/DownloadButton.tsx +++ b/src/components/MDX/Sandpack/DownloadButton.tsx @@ -7,19 +7,22 @@ import {useSandpack} from '@codesandbox/sandpack-react'; import {IconDownload} from '../../Icon/IconDownload'; export interface DownloadButtonProps {} -let supportsImportMap: boolean | void; +let supportsImportMap = false; + +function subscribe(cb: () => void) { + // This shouldn't actually need to update, but this works around + // https://github.com/facebook/react/issues/26095 + let timeout = setTimeout(() => { + supportsImportMap = + (HTMLScriptElement as any).supports && + (HTMLScriptElement as any).supports('importmap'); + cb(); + }, 0); + return () => clearTimeout(timeout); +} function useSupportsImportMap() { - function subscribe() { - // It never updates. - return () => {}; - } function getCurrentValue() { - if (supportsImportMap === undefined) { - supportsImportMap = - (HTMLScriptElement as any).supports && - (HTMLScriptElement as any).supports('importmap'); - } return supportsImportMap; } function getServerSnapshot() { diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 0e8f84f0d..2a9743ec3 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -22,11 +22,7 @@ export interface SearchProps { } function Hit({hit, children}: any) { - return ( - - {children} - - ); + return {children}; } // Copy-pasted from @docsearch/react to avoid importing the whole bundle. diff --git a/src/content/blog/2023/05/03/react-canaries.md b/src/content/blog/2023/05/03/react-canaries.md new file mode 100644 index 000000000..81da3fd00 --- /dev/null +++ b/src/content/blog/2023/05/03/react-canaries.md @@ -0,0 +1,94 @@ +--- +title: "React Canaries: Enabling Incremental Feature Rollout Outside Meta" +--- + +May 3, 2023 by [Dan Abramov](https://twitter.com/dan_abramov), [Sophie Alpert](https://twitter.com/sophiebits), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Andrew Clark](https://twitter.com/acdlite) + +--- + + + +We'd like to offer the React community an option to adopt individual new features as soon as their design is close to final, before they're released in a stable version--similar to how Meta has long used bleeding-edge versions of React internally. We are introducing a new officially supported [Canary release channel](/community/versioning-policy#canary-channel). It lets curated setups like frameworks decouple adoption of individual React features from the React release schedule. + + + +--- + +## tl;dr {/*tldr*/} + +* We're introducing an officially supported [Canary release channel](/community/versioning-policy#canary-channel) for React. Since it's officially supported, if any regressions land, we'll treat them with a similar urgency to bugs in stable releases. +* Canaries let you start using individual new React features before they land in the semver-stable releases. +* Unlike the [Experimental](/community/versioning-policy#experimental-channel) channel, React Canaries only include features that we reasonably believe to be ready for adoption. We encourage frameworks to consider bundling pinned Canary React releases. +* We will announce breaking changes and new features on our blog as they land in Canary releases. +* **As always, React continues to follow semver for every Stable release.** + +## How React features are usually developed {/*how-react-features-are-usually-developed*/} + +Typically, every React feature has gone through the same stages: + +1. We develop an initial version and prefix it with `experimental_` or `unstable_`. The feature is only available in the `experimental` release channel. At this point, the feature is expected to change significantly. +2. We find a team at Meta willing to help us test this feature and provide feedback on it. This leads to a round of changes. As the feature becomes more stable, we work with more teams at Meta to try it out. +3. Eventually, we feel confident in the design. We remove the prefix from the API name, and make the feature available on the `main` branch by default, which most Meta products use. At this point, any team at Meta can use this feature. +4. As we build confidence in the direction, we also post an RFC for the new feature. At this point we know the design works for a broad set of cases, but we might make some last minute adjustments. +5. When we are close to cutting an open source release, we write documentation for the feature and finally release the feature in a stable React release. + +This playbook works well for most features we've released so far. However, there can be a significant gap between when the feature is generally ready to use (step 3) and when it is released in open source (step 5). + +**We'd like to offer the React community an option to follow the same approach as Meta, and adopt individual new features earlier (as they become available) without having to wait for the next release cycle of React.** + +As always, all React features will eventually make it into a Stable release. + +## Can we just do more minor releases? {/*can-we-just-do-more-minor-releases*/} + +Generally, we *do* use minor releases for introducing new features. + +However, this isn't always possible. Sometimes, new features are interconnected with *other* new features which have not yet been fully completed and that we're still actively iterating on. We can't release them separately because their implementations are related. We can't version them separately because they affect the same packages (for example, `react` and `react-dom`). And we need to keep the ability to iterate on the pieces that aren't ready without a flurry of major version releases, which semver would require us to do. + +At Meta, we've solved this problem by building React from the `main` branch, and manually updating it to a specific pinned commit every week. This is also the approach that React Native releases have been following for the last several years. Every *stable* release of React Native is pinned to a specific commit from the `main` branch of the React repository. This lets React Native include important bugfixes and incrementally adopt new React features at the framework level without getting coupled to the global React release schedule. + +We would like to make this workflow available to other frameworks and curated setups. For example, it lets a framework *on top of* React include a React-related breaking change *before* this breaking change gets included into a stable React release. This is particularly useful because some breaking changes only affect framework integrations. This lets a framework release such a change in its own minor version without breaking semver. + +Rolling releases with the Canaries channel will allow us to have a tighter feedback loop and ensure that new features get comprehensive testing in the community. This workflow is closer to how TC39, the JavaScript standards committee, [handles changes in numbered stages](https://tc39.es/process-document/). New React features may be available in frameworks built on React before they are in a React stable release, just as new JavaScript features ship in browsers before they are officially ratified as part of the specification. + +## Why not use experimental releases instead? {/*why-not-use-experimental-releases-instead*/} + +Although you *can* technically use [Experimental releases](/community/versioning-policy#canary-channel), we recommend against using them in production because experimental APIs can undergo significant breaking changes on their way to stabilization (or can even be removed entirely). While Canaries can also contain mistakes (as with any release), going forward we plan to announce any significant breaking changes in Canaries on our blog. Canaries are the closest to the code Meta runs internally, so you can generally expect them to be relatively stable. However, you *do* need to keep the version pinned and manually scan the GitHub commit log when updating between the pinned commits. + +**We expect that most people using React outside a curated setup (like a framework) will want to continue using the Stable releases.** However, if you're building a framework, you might want to consider bundling a Canary version of React pinned to a particular commit, and update it at your own pace. The benefit of that is that it lets you ship individual completed React features and bugfixes earlier for your users and at your own release schedule, similar to how React Native has been doing it for the last few years. The downside is that you would take on additional responsibility to review which React commits are being pulled in and communicate to your users which React changes are included with your releases. + +If you're a framework author and want to try this approach, please get in touch with us. + +## Announcing breaking changes and new features early {/*announcing-breaking-changes-and-new-features-early*/} + +Canary releases represent our best guess of what will go into the next stable React release at any given time. + +Traditionally, we've only announced breaking changes at the *end* of the release cycle (when doing a major release). Now that Canary releases are an officially supported way to consume React, we plan to shift towards announcing breaking changes and significant new features *as they land* in Canaries. For example, if we merge a breaking change that will go out in a Canary, we will write a post about it on the React blog, including codemods and migration instructions if necessary. Then, if you're a framework author cutting a major release that updates the pinned React canary to include that change, you can link to our blog post from your release notes. Finally, when a stable major version of React is ready, we will link to those already published blog posts, which we hope will help our team make progress faster. + +We plan to document APIs as they land in Canaries--even if these APIs are not yet available outside of them. APIs that are only available in Canaries will be marked with a special note on the corresponding pages. This will include APIs like [`use`](https://github.com/reactjs/rfcs/pull/229), and some others (like `cache` and `createServerContext`) which we'll send RFCs for. + +## Canaries must be pinned {/*canaries-must-be-pinned*/} + +If you decide to adopt the Canary workflow for your app or framework, make sure you always pin the *exact* version of the Canary you're using. Since Canaries are pre-releases, they may still include breaking changes. + +## Example: React Server Components {/*example-react-server-components*/} + +As we [announced in March](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components), the React Server Components conventions have been finalized, and we do not expect significant breaking changes related to their user-facing API contract. However, we can't release support for React Server Components in a stable version of React yet because we are still working on several intertwined framework-only features (such as [asset loading](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#asset-loading)) and expect more breaking changes there. + +This means that React Server Components are ready to be adopted by frameworks. However, until the next major React release, the only way for a framework to adopt them is to ship a pinned Canary version of React. (To avoid bundling two copies of React, frameworks that wish to do this would need to enforce resolution of `react` and `react-dom` to the pinned Canary they ship with their framework, and explain that to their users. As an example, this is what Next.js App Router does.) + +## Testing libraries against both Stable and Canary versions {/*testing-libraries-against-both-stable-and-canary-versions*/} + +We do not expect library authors to test every single Canary release since it would be prohibitively difficult. However, just as when we [originally introduced the different React pre-release channels three years ago](https://legacy.reactjs.org/blog/2019/10/22/react-release-channels.html), we encourage libraries to run tests against *both* the latest Stable and latest Canary versions. If you see a change in behavior that wasn't announced, please file a bug in the React repository so that we can help diagnose it. We expect that as this practice becomes widely adopted, it will reduce the amount of effort necessary to upgrade libraries to new major versions of React, since accidental regressions would be found as they land. + + + +Strictly speaking, Canary is not a *new* release channel--it used to be called Next. However, we've decided to rename it to avoid confusion with Next.js. We're announcing it as a *new* release channel to communicate the new expectations, such as Canaries being an officially supported way to use React. + + + +## Stable releases work like before {/*stable-releases-work-like-before*/} + +We are not introducing any changes to stable React releases. + + + diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 3459965f6..fc8a2969b 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -10,6 +10,11 @@ This blog is the official source for the updates from the React team. Anything i
+ + +Traditionally, new React features used to only be available at Meta first, and land in the open source releases later. We'd like to offer the React community an option to adopt individual new features as soon as their design is close to final--similar to how Meta uses React internally. We are introducing a new officially supported Canary release channel. It lets curated setups like frameworks decouple adoption of individual React features from the React release schedule. + + diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index b1860ac0d..06711db6d 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,36 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {/*upcoming-conferences*/} -### Reactathon 2023 {/*reactathon-2023*/} -May 2 - 3, 2023. San Francisco, CA, USA - -[Website](https://reactathon.com) - [Twitter](https://twitter.com/reactathon) - [YouTube](https://www.youtube.com/realworldreact) - -### RemixConf 2023 {/*remixconf-2023*/} -May, 2023. Salt Lake City, UT - -[Website](https://remix.run/conf/2023) - [Twitter](https://twitter.com/remix_run) - -### App.js Conf 2023 {/*appjs-conf-2023*/} -May 10 - 12, 2023. In-person in Kraków, Poland + remote - -[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) - -### Chain React 2023 {/*chain-react-2023*/} -May 17 - 19, 2023. Portland, OR, USA - -[Website](https://chainreactconf.com/) - [Twitter](https://twitter.com/ChainReactConf) - [Facebook](https://www.facebook.com/ChainReactConf/) - [Youtube](https://www.youtube.com/channel/UCwpSzVt7QpLDbCnPXqR97-g/playlists) - -### Render(ATL) 2023 🍑 {/*renderatl-2023-*/} -May 31 - June 2, 2023. Atlanta, GA, USA - -[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/) - -### React Summit 2023 {/*react-summit-2023*/} -June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event) - -[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-2023) - ### React Norway 2023 {/*react-norway-2023*/} June 16th, 2023. Larvik, Norway @@ -60,11 +30,6 @@ August 17 & 18, 2023. Salt Lake City, UT, USA [Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/) -### React On The Beach 2023 {/*react-on-the-beach-2023*/} -September 07, 2023. Amsterdam, Netherlands (In-person event) - -[Website](https://reactonthebeach.com/) - [Twitter](https://twitter.com/reactonthebeach) - ### React India 2023 {/*react-india-2023*/} Oct 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day @@ -87,6 +52,36 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity ## Past Conferences {/*past-conferences*/} +### React Summit 2023 {/*react-summit-2023*/} +June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event) + +[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-2023) + +### Render(ATL) 2023 🍑 {/*renderatl-2023-*/} +May 31 - June 2, 2023. Atlanta, GA, USA + +[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/) + +### Chain React 2023 {/*chain-react-2023*/} +May 17 - 19, 2023. Portland, OR, USA + +[Website](https://chainreactconf.com/) - [Twitter](https://twitter.com/ChainReactConf) - [Facebook](https://www.facebook.com/ChainReactConf/) - [Youtube](https://www.youtube.com/channel/UCwpSzVt7QpLDbCnPXqR97-g/playlists) + +### App.js Conf 2023 {/*appjs-conf-2023*/} +May 10 - 12, 2023. In-person in Kraków, Poland + remote + +[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) + +### RemixConf 2023 {/*remixconf-2023*/} +May, 2023. Salt Lake City, UT + +[Website](https://remix.run/conf/2023) - [Twitter](https://twitter.com/remix_run) + +### Reactathon 2023 {/*reactathon-2023*/} +May 2 - 3, 2023. San Francisco, CA, USA + +[Website](https://reactathon.com) - [Twitter](https://twitter.com/reactathon) - [YouTube](https://www.youtube.com/realworldreact) + ### React Miami 2023 {/*react-miami-2023*/} April 20 - 21, 2023. Miami, FL, USA diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md index b6ffc96de..68d5b8eb1 100644 --- a/src/content/community/versioning-policy.md +++ b/src/content/community/versioning-policy.md @@ -79,13 +79,18 @@ This section will be most relevant to developers who work on frameworks, librari Each of React's release channels is designed for a distinct use case: -- [**Latest**](#latest-channel) is for stable, semver React releases. It's what you get when you install React from npm. This is the channel you're already using today. **Use this for all user-facing React applications.** -- [**Next**](#next-channel) tracks the main branch of the React source code repository. Think of these as release candidates for the next minor semver release. Use this for integration testing between React and third party projects. +- [**Latest**](#latest-channel) is for stable, semver React releases. It's what you get when you install React from npm. This is the channel you're already using today. **User-facing applications that consume React directly use this channel.** +- [**Canary**](#canary-channel) tracks the main branch of the React source code repository. Think of these as release candidates for the next semver release. **[Frameworks or other curated setups may choose to use this channel with a pinned version of React.](/blog/2023/05/03/react-canaries) You can also Canaries for integration testing between React and third party projects.** - [**Experimental**](#experimental-channel) includes experimental APIs and features that aren't available in the stable releases. These also track the main branch, but with additional feature flags turned on. Use this to try out upcoming features before they are released. -All releases are published to npm, but only Latest uses semantic versioning. Prereleases (those in the Next and Experimental channels) have versions generated from a hash of their contents and the commit date, e.g. `0.0.0-68053d940-20210623` for Next and `0.0.0-experimental-68053d940-20210623` for Experimental. +All releases are published to npm, but only Latest uses semantic versioning. Prereleases (those in the Canary and Experimental channels) have versions generated from a hash of their contents and the commit date, e.g. `18.3.0-canary-388686f29-20230503` for Canary and `0.0.0-experimental-388686f29-20230503` for Experimental. -**The only officially supported release channel for user-facing applications is Latest**. Next and Experimental releases are provided for testing purposes only, and we provide no guarantees that behavior won't change between releases. They do not follow the semver protocol that we use for releases from Latest. +**Both Latest and Canary channels are officially supported for user-facing applications, but with different expectations**: + +* Latest releases follow the traditional semver model. +* Canary releases [must be pinned](/blog/2023/05/03/react-canaries) and may include breaking changes. They exist for curated setups (like frameworks) that want to gradually release new React features and bugfixes on their own release schedule. + +The Experimental releases are provided for testing purposes only, and we provide no guarantees that behavior won't change between releases. They do not follow the semver protocol that we use for releases from Latest. By publishing prereleases to the same registry that we use for stable releases, we are able to take advantage of the many tools that support the npm workflow, like [unpkg](https://unpkg.com) and [CodeSandbox](https://codesandbox.io). @@ -93,51 +98,51 @@ By publishing prereleases to the same registry that we use for stable releases, Latest is the channel used for stable React releases. It corresponds to the `latest` tag on npm. It is the recommended channel for all React apps that are shipped to real users. -**If you're not sure which channel you should use, it's Latest.** If you're a React developer, this is what you're already using. You can expect updates to Latest to be extremely stable. Versions follow the semantic versioning scheme, as [described earlier.](#stable-releases) +**If you're not sure which channel you should use, it's Latest.** If you're using React directly, this is what you're already using. You can expect updates to Latest to be extremely stable. Versions follow the semantic versioning scheme, as [described earlier.](#stable-releases) -### Next channel {/*next-channel*/} +### Canary channel {/*canary-channel*/} -The Next channel is a prerelease channel that tracks the main branch of the React repository. We use prereleases in the Next channel as release candidates for the Latest channel. You can think of Next as a superset of Latest that is updated more frequently. +The Canary channel is a prerelease channel that tracks the main branch of the React repository. We use prereleases in the Canary channel as release candidates for the Latest channel. You can think of Canary as a superset of Latest that is updated more frequently. -The degree of change between the most recent Next release and the most recent Latest release is approximately the same as you would find between two minor semver releases. However, **the Next channel does not conform to semantic versioning.** You should expect occasional breaking changes between successive releases in the Next channel. +The degree of change between the most recent Canary release and the most recent Latest release is approximately the same as you would find between two minor semver releases. However, **the Canary channel does not conform to semantic versioning.** You should expect occasional breaking changes between successive releases in the Canary channel. -**Do not use prereleases in user-facing applications.** +**Do not use prereleases in user-facing applications directly unless you're following the [Canary workflow](/blog/2023/05/03/react-canaries).** -Releases in Next are published with the `next` tag on npm. Versions are generated from a hash of the build's contents and the commit date, e.g. `0.0.0-68053d940-20210623`. +Releases in Canary are published with the `canary` tag on npm. Versions are generated from a hash of the build's contents and the commit date, e.g. `18.3.0-canary-388686f29-20230503`. -#### Using the next channel for integration testing {/*using-the-next-channel-for-integration-testing*/} +#### Using the canary channel for integration testing {/*using-the-canary-channel-for-integration-testing*/} -The Next channel is designed to support integration testing between React and other projects. +The Canary channel also supports integration testing between React and other projects. All changes to React go through extensive internal testing before they are released to the public. However, there are a myriad of environments and configurations used throughout the React ecosystem, and it's not possible for us to test against every single one. If you're the author of a third party React framework, library, developer tool, or similar infrastructure-type project, you can help us keep React stable for your users and the entire React community by periodically running your test suite against the most recent changes. If you're interested, follow these steps: - Set up a cron job using your preferred continuous integration platform. Cron jobs are supported by both [CircleCI](https://circleci.com/docs/2.0/triggers/#scheduled-builds) and [Travis CI](https://docs.travis-ci.com/user/cron-jobs/). -- In the cron job, update your React packages to the most recent React release in the Next channel, using `next` tag on npm. Using the npm cli: +- In the cron job, update your React packages to the most recent React release in the Canary channel, using `canary` tag on npm. Using the npm cli: ```console - npm update react@next react-dom@next + npm update react@canary react-dom@canary ``` Or yarn: ```console - yarn upgrade react@next react-dom@next + yarn upgrade react@canary react-dom@canary ``` - Run your test suite against the updated packages. - If everything passes, great! You can expect that your project will work with the next minor React release. - If something breaks unexpectedly, please let us know by [filing an issue](https://github.com/facebook/react/issues). -A project that uses this workflow is Next.js. (No pun intended! Seriously!) You can refer to their [CircleCI configuration](https://github.com/zeit/next.js/blob/c0a1c0f93966fe33edd93fb53e5fafb0dcd80a9e/.circleci/config.yml) as an example. +A project that uses this workflow is Next.js. You can refer to their [CircleCI configuration](https://github.com/zeit/next.js/blob/c0a1c0f93966fe33edd93fb53e5fafb0dcd80a9e/.circleci/config.yml) as an example. ### Experimental channel {/*experimental-channel*/} -Like Next, the Experimental channel is a prerelease channel that tracks the main branch of the React repository. Unlike Next, Experimental releases include additional features and APIs that are not ready for wider release. +Like Canary, the Experimental channel is a prerelease channel that tracks the main branch of the React repository. Unlike Canary, Experimental releases include additional features and APIs that are not ready for wider release. -Usually, an update to Next is accompanied by a corresponding update to Experimental. They are based on the same source revision, but are built using a different set of feature flags. +Usually, an update to Canary is accompanied by a corresponding update to Experimental. They are based on the same source revision, but are built using a different set of feature flags. -Experimental releases may be significantly different than releases to Next and Latest. **Do not use Experimental releases in user-facing applications.** You should expect frequent breaking changes between releases in the Experimental channel. +Experimental releases may be significantly different than releases to Canary and Latest. **Do not use Experimental releases in user-facing applications.** You should expect frequent breaking changes between releases in the Experimental channel. Releases in Experimental are published with the `experimental` tag on npm. Versions are generated from a hash of the build's contents and the commit date, e.g. `0.0.0-experimental-68053d940-20210623`. @@ -147,11 +152,11 @@ Experimental features are ones that are not ready to be released to the wider pu For example, if the Experimental channel had existed when we announced Hooks, we would have released Hooks to the Experimental channel weeks before they were available in Latest. -You may find it valuable to run integration tests against Experimental. This is up to you. However, be advised that Experimental is even less stable than Next. **We do not guarantee any stability between Experimental releases.** +You may find it valuable to run integration tests against Experimental. This is up to you. However, be advised that Experimental is even less stable than Canary. **We do not guarantee any stability between Experimental releases.** #### How can I learn more about experimental features? {/*how-can-i-learn-more-about-experimental-features*/} -Experimental features may or may not be documented. Usually, experiments aren't documented until they are close to shipping in Next or Latest. +Experimental features may or may not be documented. Usually, experiments aren't documented until they are close to shipping in Canary or Latest. If a feature is not documented, they may be accompanied by an [RFC](https://github.com/reactjs/rfcs). diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index cfd52320a..8a5368809 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -1,24 +1,24 @@ --- -title: Conditional Rendering +title: Условный рендеринг --- -Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators. +Вашим компонентам нужно часто отображать различные вещи в зависимости от различных условий. В React вы можете рендерить JSX в зависимости от его условий, используя JavaScript операторы. Такие, как `if`, `&&` и `? :` -* How to return different JSX depending on a condition -* How to conditionally include or exclude a piece of JSX -* Common conditional syntax shortcuts you’ll encounter in React codebases +- Как вернуть разный JSX, в зависимости от условия. +- Как в зависимости от условий добавить или убрать часть JSX. +- Часто встречающиеся сокращения синтаксиса условных выражений, с которыми вы столкнётесь в проектах на React. -## Conditionally returning JSX {/*conditionally-returning-jsx*/} +## Условный возврат JSX {/*conditionally-returning-jsx*/} -Let’s say you have a `PackingList` component rendering several `Item`s, which can be marked as packed or not: +Допустим, у вас есть компонент `PackingList`, который рендерит несколько компонентов `Item`, который могут быть отмечены как упакованные или нет: @@ -26,23 +26,22 @@ Let’s say you have a `PackingList` component rendering several `Item`s, which function Item({ name, isPacked }) { return
  • {name}
    • ; } - export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Список вещей Салли Райд

    @@ -51,10 +50,11 @@ export default function PackingList() { ```     + -Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`. +Обратите внимание, что у некоторых компонентов `Item` проп `isPacked` имеет значение `true`, вместо значения `false`. Если `isPacked={true}`, вы хотите добавить галочку(✔) к упакованным вещам. -You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so: +Можно реализовать это с помощью [управляющей конструкции `if`/`else`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...) таким образом: ```js if (isPacked) { @@ -63,7 +63,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -If the `isPacked` prop is `true`, this code **returns a different JSX tree.** With this change, some of the items get a checkmark at the end: +Если `isPacked` проп равен `true`, то этот код **вернёт другое JSX дерево.** Вместе с этим изменением, некоторые вещи получат галочку в конце: @@ -78,19 +78,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Список вещей Салли Райд

    @@ -100,13 +100,13 @@ export default function PackingList() {     -Try editing what gets returned in either case, and see how the result changes! +Попробуйте отредактировать то, что возвращается в обоих случаях, и посмотрите, как изменится результат! -Notice how you're creating branching logic with JavaScript's `if` and `return` statements. In React, control flow (like conditions) is handled by JavaScript. +Обратите внимание, как вы создаёте разветвлённую логику с помощью операторов JavaScript `if` и `return`. В React управление потоком выполнения (например, условия) обрабатывает JavaScript. -### Conditionally returning nothing with `null` {/*conditionally-returning-nothing-with-null*/} +### Условно возвращаем ничего, с помощью `null` {/*conditionally-returning-nothing-with-null*/} -In some situations, you won't want to render anything at all. For example, say you don't want to show packed items at all. A component must return something. In this case, you can return `null`: +В некоторых ситуациях вы вообще не захотите ничего рендерить. Например, вы не хотите показывать упакованные предметы. Компонент должен что-то возвращать. В этом случае вы можете вернуть `null`: ```js if (isPacked) { @@ -115,7 +115,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -If `isPacked` is true, the component will return nothing, `null`. Otherwise, it will return JSX to render. +Если `isPacked` равен true, то компонент не вернёт ничего, `null`. В противном случае, он вернёт JSX для рендеринга. @@ -130,19 +130,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Список вещей Салли Райд

    @@ -152,23 +152,23 @@ export default function PackingList() {     -In practice, returning `null` from a component isn't common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component's JSX. Here's how to do that! +На практике возврат `null` из компонента не является обычным делом, поскольку это может удивить разработчика, пытающегося его рендерить. Чаще всего вы будете условно включать или исключать компонент в JSX родительского компонента. Вот как это сделать! -## Conditionally including JSX {/*conditionally-including-jsx*/} +## Условное включение JSX {/*conditionally-including-jsx*/} -In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output: +В предыдущем примере вы контролировали, какое JSX дерево будет возвращено компонентом (если вообще будет!). Возможно, вы уже заметили некоторое дублирование в выводе рендера: ```js
  • {name} ✔
    • ``` -is very similar to +очень похоже на ```js
  • {name}
    • ``` -Both of the conditional branches return `
  • ...
    • `: +Обе ветки условия возвращают `
  • ...
    • `: ```js if (isPacked) { @@ -177,13 +177,13 @@ if (isPacked) { return
  • {name}
    • ; ``` -While this duplication isn't harmful, it could make your code harder to maintain. What if you want to change the `className`? You'd have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) +Хоть и такое дублирование не вредно, но оно может усложнить поддержку вашего кода. Что если вы захотите изменить `className`? Вам придётся делать это в двух местах вашего кода! В такой ситуации вы можете условно включить небольшой JSX, чтобы сделать ваш код более [DRY.](https://ru.wikipedia.org/wiki/Don%E2%80%99t_repeat_yourself). -### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/} +### Условный (тернанрый) оператор (`? :`) {/*conditional-ternary-operator--*/} -JavaScript has a compact syntax for writing a conditional expression -- the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) or "ternary operator". +В JavaScript есть компактный синтаксис для записи условного выражения — [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) или "тернарный оператор". -Instead of this: +Вместо этого: ```js if (isPacked) { @@ -192,7 +192,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -You can write this: +Вы можете написать это: ```js return ( @@ -202,17 +202,17 @@ return ( ); ``` -You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*. +Вы можете читать это как *"если `isPacked` равно true, тогда (`?`) рендерим `name + ' ✔'`, в противном случае (`:`) рендерим `name`"*. -#### Are these two examples fully equivalent? {/*are-these-two-examples-fully-equivalent*/} +#### Эти два примера полностью эквивалентны? {/*are-these-two-examples-fully-equivalent*/} -If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of `
  • `. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works. +Если вы знакомы с объектно-ориентированным программированием, вы можете предположить, что два приведенных выше примера немного отличаются друг от друга, поскольку один из них может создавать два разных "экземпляра" `
  • `. Но JSX-элементы не являются "экземплярами", потому что они не хранят никакого внутреннего состояния и не являются реальными DOM-узлами. Это лёгкие описания, как чертежи. На самом деле эти два примера *совершенно эквивалентны*. В [Сохранение и сброс состояния](/learn/preserving-and-resetting-state) подробно рассказывается о том, как это работает. -Now let's say you want to wrap the completed item's text into another HTML tag, like `` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX in each of the cases: +Теперь предположим, что вы хотите обернуть текст завершённого элемента в другой HTML-тег, например ``, чтобы вычеркнуть его. Вы можете добавить ещё больше переносов строк и круглых скобок, чтобы было проще вкладывать JSX в каждом из случаев: @@ -234,19 +234,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Список вещей Салли Райд

    @@ -256,11 +256,11 @@ export default function PackingList() {     -This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions. +Этот стиль хорошо работает для простых условий, но используйте его в меру. Если ваши компоненты становятся запутанными из-за слишком большого количества вложенной условной разметки, подумайте об выделении дочерних компонентов, чтобы навести порядок. В React разметка является частью кода, поэтому вы можете использовать такие инструменты, как переменные и функции, чтобы привести в порядок сложные выражения. -### Logical AND operator (`&&`) {/*logical-and-operator-*/} +### Логический оператор И(`&&`) {/*logical-and-operator-*/} -Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`: +Еще одно часто встречающееся сокращение [JavaScript логический оператор И (`&&`).](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) Внутри React-компонентов он часто используется, когда вам нужно отрендерить JSX, когда условие true, **или не рендерить ничего.** С помощью `&&` вы можете условно рендерить галочку, если `isPacked` равно `true`: ```js return ( @@ -270,9 +270,9 @@ return ( ); ``` -You can read this as *"if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing"*. +Вы можете читать это как *"если `isPacked`, тогда (`&&`) рендерим галочку, в противном случае -- ничего не рендерим"*. -Here it is in action: +Вот это в действии: @@ -288,19 +288,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Список вещей Салли Райд

    @@ -310,38 +310,38 @@ export default function PackingList() {     -A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place. +[JavaScript выражение &&](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) возвращает значение правой части (в нашем случае это галочка), если левая часть (наше условие) является `true`. Но если наше условие — `false`, тогда всё выражение становится `false`. React рассматривает `false` как "пустое место" в дереве JSX, прямо как `null` или `undefined`, и ничего не рендерит на этом месте. -**Don't put numbers on the left side of `&&`.** +**Не ставь числа по левую сторону `&&`.** -To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is `0`, then the whole expression gets that value (`0`), and React will happily render `0` rather than nothing. +Для проверки условия JavaScript автоматически преобразует левую часть в булевое значение. Однако, если левая часть равна `0`, то всё выражение получает это значение (`0`), и React будет с радостью рендерить `0` вместо ничего. -For example, a common mistake is to write code like `messageCount &&

    New messages

    `. It's easy to assume that it renders nothing when `messageCount` is `0`, but it really renders the `0` itself! +Например, распространённой ошибкой является написание кода вида `messageCount &&

    Новые сообщения

    `. Легко предположить, что ничего не отрендерено, когда `messageCount` равно `0`, но на самом деле будет рендериться `0`! -To fix it, make the left side a boolean: `messageCount > 0 &&

    New messages

    `. +Чтобы исправить это, сделайте левую часть булевым значением: `messageCount > 0 &&

    Новые сообщения

    `.     -### Conditionally assigning JSX to a variable {/*conditionally-assigning-jsx-to-a-variable*/} +### Условное присвоение JSX к переменной {/*conditionally-assigning-jsx-to-a-variable*/} -When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables defined with [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), so start by providing the default content you want to display, the name: +Когда сокращения мешают написанию понятного кода, то попробуйте использовать `if` оператор и переменную. Вы можете переназначать переменные, объявленные с помощью [`let`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let), поэтому начните с предоставления содержимого по умолчанию, которое вы хотите отобразить, например, name: ```js let itemContent = name; ``` -Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked` is `true`: +Используйте `if` оператор, чтобы переназначить JSX-выражение `itemContent`, если `isPacked` равно `true`: ```js if (isPacked) { - itemContent = name + " ✔"; + itemContent = name + ' ✔'; } ``` -[Curly braces open the "window into JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX: +[Фигурные скобки открывают "окно в мир JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Вставьте переменную с помощью фигурных скобок в возвращаемое дерево JSX, вложив ранее вычисленное выражение внутрь JSX: ```js
  • @@ -349,7 +349,7 @@ if (isPacked) {
    • ``` -This style is the most verbose, but it's also the most flexible. Here it is in action: +Этот стиль самый многословный, но и самый гибкий. Вот он в действии: @@ -357,7 +357,7 @@ This style is the most verbose, but it's also the most flexible. Here it is in a function Item({ name, isPacked }) { let itemContent = name; if (isPacked) { - itemContent = name + " ✔"; + itemContent = name + ' ✔'; } return (
  • @@ -369,19 +369,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Список вещей Салли Райд

    @@ -391,7 +391,7 @@ export default function PackingList() { -Like before, this works not only for text, but for arbitrary JSX too: +Как и раньше, это работает не только для текста, но и для произвольного JSX: @@ -415,19 +415,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Список вещей Салли Райд

    @@ -437,16 +437,16 @@ export default function PackingList() {     -If you're not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code -- and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work. +Если вы не знакомы с JavaScript, то такое разнообразие стилей может показаться поначалу ошеломляющим. Однако их изучение поможет вам читать и писать любой JavaScript код, а не только React-компоненты! Выберите тот, который вам больше нравится, и при необходимости обратитесь к этому справочнику, если вы забудете, как работают другие. -* In React, you control branching logic with JavaScript. -* You can return a JSX expression conditionally with an `if` statement. -* You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces. -* In JSX, `{cond ? : }` means *"if `cond`, render ``, otherwise ``"*. -* In JSX, `{cond && }` means *"if `cond`, render ``, otherwise nothing"*. -* The shortcuts are common, but you don't have to use them if you prefer plain `if`. +- В React вы управляете логикой ветвления с помощью JavaScript. +- Вы можете условно возвращать JSX-выражение с помощью оператора `if`. +- Вы можете условно сохранить JSX в переменную и затем включить её в другой JSX с помощью фигурных скобок. +- В JSX выражение `{cond ? : }` означает *"если `cond`, то отрендерить ``, иначе ``"*. +- В JSX выражение `{cond && }` означает *"если `cond`, то отрендерить``, иначе ничего"*. +- Эти сокращения являются общепринятыми, но эти сокращения необязательно использовать, если вы предпочитаете простой `if`. @@ -454,9 +454,9 @@ If you're not familiar with JavaScript, this variety of styles might seem overwh -#### Show an icon for incomplete items with `? :` {/*show-an-icon-for-incomplete-items-with--*/} +#### Показать иконку для неупакованных вещей с `? :` {/*show-an-icon-for-incomplete-items-with--*/} -Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn’t `true`. +Используйте тернарный оператор (`cond ? a : b`), чтобы отрендерить❌, если `isPacked` не равен `true`. @@ -472,19 +472,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Список вещей Салли Райд

    @@ -510,19 +510,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Список вещей Салли Райд

    @@ -534,15 +534,15 @@ export default function PackingList() { -#### Show the item importance with `&&` {/*show-the-item-importance-with-*/} +#### Показать важность вещи с помощью `&&` {/*show-the-item-importance-with-*/} -In this example, each `Item` receives a numerical `importance` prop. Use the `&&` operator to render "_(Importance: X)_" in italics, but only for items that have non-zero importance. Your item list should end up looking like this: +В этом примере каждый `Item` получает числовой проп `importance`. Используйте `&&`, чтобы рендерить "_(Важность: X)_" курсивом только для вещей с ненулевой важностью. Ваш список вещей должен выглядеть следующем образом: -* Space suit _(Importance: 9)_ -* Helmet with a golden leaf -* Photo of Tam _(Importance: 6)_ +- Космический скафандр _(Важность: 9)_ +- Шлем с золотым листом +- Фотография Тэма _(Важность: 6)_ -Don't forget to add a space between the two labels! +Не забудьте добавить пробел между двумя метками! @@ -558,19 +558,19 @@ function Item({ name, importance }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Список вещей Салли Райд

    @@ -582,7 +582,7 @@ export default function PackingList() { -This should do the trick: +Это должно сработать: @@ -593,7 +593,7 @@ function Item({ name, importance }) { {name} {importance > 0 && ' '} {importance > 0 && - (Importance: {importance}) + (Важность: {importance}) }
    • ); @@ -602,19 +602,19 @@ function Item({ name, importance }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Список вещей Салли Райд

    @@ -624,15 +624,15 @@ export default function PackingList() {     -Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result! +Помните, что вы должны писать `importance > 0 && ...` вместо `importance && ...`, чтобы при `importance` равном `0` число `0` не рендерилось в результате! -In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a fragment with a leading space: `importance > 0 && <> ...` or add a space immediately inside the ``: `importance > 0 && ...`. +В этом решении используются два отдельных условия для вставки пробела между именем и меткой важности. Кроме того, можно использовать фрагмент с ведущим пробелом: `importance > 0 && <> ...` или добавить пробел сразу внутри тега ``: `importance > 0 && ...`. -#### Refactor a series of `? :` to `if` and variables {/*refactor-a-series-of---to-if-and-variables*/} +#### Перепишите тернарный оператор `? :` на `if` и переменные {/*refactor-a-series-of---to-if-and-variables*/} -This `Drink` component uses a series of `? :` conditions to show different information depending on whether the `name` prop is `"tea"` or `"coffee"`. The problem is that the information about each drink is spread across multiple conditions. Refactor this code to use a single `if` statement instead of three `? :` conditions. +Компонент `Drink` использует серию условий `? :` для отображения разной информацию в зависимости от пропа `name` (может быть `"tea"` или `"coffee"`). Проблема заключается в том, что информация о каждом напитке разбросана по нескольким условиям. Перепишите этот код так, используя один `if` вместо трёх условий `? :`. @@ -642,12 +642,12 @@ function Drink({ name }) {

    {name}

    -
    Part of plant
    +
    Часть растения
    {name === 'tea' ? 'leaf' : 'bean'}
    -
    Caffeine content
    -
    {name === 'tea' ? '15–70 mg/cup' : '80–185 mg/cup'}
    -
    Age
    -
    {name === 'tea' ? '4,000+ years' : '1,000+ years'}
    +
    Содержание кофеина
    +
    {name === 'tea' ? '15–70 мг/чашка' : '80–185 мг/чашка'}
    +
    Возраст
    +
    {name === 'tea' ? '4,000+ лет' : '1,000+ лет'}
    ); @@ -665,11 +665,11 @@ export default function DrinkList() {     -Once you've refactored the code to use `if`, do you have further ideas on how to simplify it? +После рефакторинга кода с использованием `if`, у вас есть ещё идеи о том, как упростить его? -There are multiple ways you could go about this, but here is one starting point: +Есть несколько способов, но вот один из них, с которого можно начать: @@ -678,22 +678,22 @@ function Drink({ name }) { let part, caffeine, age; if (name === 'tea') { part = 'leaf'; - caffeine = '15–70 mg/cup'; - age = '4,000+ years'; + caffeine = '15–70 мг/чашка'; + age = '4,000+ лет'; } else if (name === 'coffee') { part = 'bean'; - caffeine = '80–185 mg/cup'; - age = '1,000+ years'; + caffeine = '80–185 мг/чашка'; + age = '1,000+ лет'; } return (

    {name}

    -
    Part of plant
    +
    Часть растения
    {part}
    -
    Caffeine content
    +
    Содержание кофеина
    {caffeine}
    -
    Age
    +
    Возраст
    {age}
    @@ -712,9 +712,9 @@ export default function DrinkList() {     -Here the information about each drink is grouped together instead of being spread across multiple conditions. This makes it easier to add more drinks in the future. +Здесь информация о каждом напитке сгруппирована вместе, а не разбросана по нескольким условиям. Это облегчает добавление новых напитков в будущем. -Another solution would be to remove the condition altogether by moving the information into objects: +Другим решением будет удалить условия, переместив информацию в объекты: @@ -722,14 +722,14 @@ Another solution would be to remove the condition altogether by moving the infor const drinks = { tea: { part: 'leaf', - caffeine: '15–70 mg/cup', - age: '4,000+ years' + caffeine: '15–70 мг/чашка', + age: '4,000+ лет', }, coffee: { part: 'bean', - caffeine: '80–185 mg/cup', - age: '1,000+ years' - } + caffeine: '80–185 мг/чашка', + age: '1,000+ лет', + }, }; function Drink({ name }) { @@ -738,11 +738,11 @@ function Drink({ name }) {

    {name}

    -
    Part of plant
    +
    Часть растения
    {info.part}
    -
    Caffeine content
    +
    Содержание кофеина
    {info.caffeine}
    -
    Age
    +
    Возраст
    {info.age}
    diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index f8f55605c..71cb93782 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -1,26 +1,26 @@ --- -title: Importing and Exporting Components +title: Импорт и экспорт компонентов --- -The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places. +«Магия» компонентов заключается в возможности их повторного использования: можно создавать компоненты, которые состоят из других компонентов. Но по мере увеличения их вложенности зачастую бывает разумным начать раскладывать их по разным файлам. Так навигация по ним останется простой, а компоненты станет легче использовать повторно. -* What a root component file is -* How to import and export a component -* When to use default and named imports and exports -* How to import and export multiple components from one file -* How to split components into multiple files +* Что такое корневой компонент +* Как импортировать и экспортировать компонент +* Когда использовать дефолтные и именованные импорты и экспорты +* Как импортировать и экспортировать несколько компонентов из одного файла +* Как разделять код компонентов на отдельные файлы -## The root component file {/*the-root-component-file*/} +## Файл корневого компонента {/*the-root-component-file*/} -In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it: +В разделе [Ваш первый компонент](/learn/your-first-component) вы создали компонент `Profile` и компонент `Gallery`, который рендерит его: @@ -29,7 +29,7 @@ function Profile() { return ( Katherine Johnson ); } @@ -37,7 +37,7 @@ function Profile() { export default function Gallery() { return (
    -

    Amazing scientists

    +

    Восхитительные ученые

    @@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; } -These currently live in a **root component file,** named `App.js` in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page. +Эти компоненты сейчас находятся внутри **файла корневого компонента,** который в примере называется `App.js`. При использовании [Create React App](https://create-react-app.dev/) приложение находится в `src/App.js`. Однако, в зависимости от конфигурации проекта, корневой компонент может находиться в другом файле. У фреймворка с маршрутизацией на основе файлов, например Next.js, корневой компонент будет разным для каждой страницы. -## Exporting and importing a component {/*exporting-and-importing-a-component*/} +## Экспорт и импорт компонентов {/*exporting-and-importing-a-component*/} -What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps: +Что, если вы захотите изменить страницу и отобразить на ней список научных книг? Или переместить все профили ученых? Кажется разумным извлечь компоненты `Gallery` и `Profile` из файла корневого компонента. Это сделает их более модульными и переиспользуемыми. Переместить компонент можно за три шага: -1. **Make** a new JS file to put the components in. -2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports). -3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports). +1. **Создайте** новый JS файл для компонентов. +2. **Экспортируйте** функциональный компонент из этого файла (используя или [экспорт по умолчанию](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) или [именованный](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) экспорт). +3. **Импортируйте** компонент в файл, где вы будете его использовать (используя соответствующую технику для импорта значения [по умолчанию](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) или [именованного](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) экспорта). -Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`: +В следующем примере `Profile` и `Gallery` были извлечены из `App.js` в новый файл `Gallery.js`. Теперь вы можете изменить `App.js`, добавив в него импорт компонента `Gallery` из файла `Gallery.js`: @@ -81,7 +81,7 @@ function Profile() { return ( Alan L. Hart ); } @@ -89,7 +89,7 @@ function Profile() { export default function Gallery() { return (
    -

    Amazing scientists

    +

    Восхитительные ученые

    @@ -104,60 +104,61 @@ img { margin: 0 10px 10px 0; height: 90px; } -Notice how this example is broken down into two component files now: +Обратите внимание, что код из примера теперь использует два файла компонентов: 1. `Gallery.js`: - - Defines the `Profile` component which is only used within the same file and is not exported. - - Exports the `Gallery` component as a **default export.** + - Содержит компонент `Profile`, который используется только в этом файле и не экспортируется. + - Экспортирует компонент `Gallery` **по умолчанию.** 2. `App.js`: - - Imports `Gallery` as a **default import** from `Gallery.js`. - - Exports the root `App` component as a **default export.** + - Импортирует компонент `Gallery` из `Gallery.js` **по умолчанию.** + - Экспортирует корневой компонент `App` **по умолчанию.** -You may encounter files that leave off the `.js` file extension like so: +В некоторых случаях вы можете заметить, что при импорте в именах файлов опускается расширение `.js`, например: ```js import Gallery from './Gallery'; ``` -Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work. +Оба варианта (`'./Gallery.js'` и `'./Gallery'`) будут работать в React, хотя первый вариант ближе к тому, как работают [нативные ES-модули](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules). -#### Default vs named exports {/*default-vs-named-exports*/} +#### Экспорт по умолчанию и именованный экспорт {/*default-vs-named-exports*/} -There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.** +Существует два основных способа экспорта значений в JavaScript: экспорт по умолчанию и именованный экспорт. До сих пор в примерах использовался только экспорт по умолчанию. Но вы можете использовать один из этих способов или оба в одном файле. **В файле не может быть больше одного экспорта _по умолчанию_, но сколько угодно _именованных_ экспортов.** -![Default and named exports](/images/docs/illustrations/i_import-export.svg) +![Именованные экспорты и экспорты по умолчанию](/images/docs/illustrations/i_import-export.svg) -How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track: +Способ, которым компонент был экспортирован, определяет способ, которым его нужно импортировать. Вы получите ошибку, если попытаетесь импортировать экспортированный по умолчанию компонент так же, как компонент с именованным экспортом! Эта таблица поможет вам разобраться: -| Syntax | Export statement | Import statement | +| Синтаксис экспорта | Как экспортировать | Как импортировать | | ----------- | ----------- | ----------- | -| Default | `export default function Button() {}` | `import Button from './Button.js';` | -| Named | `export function Button() {}` | `import { Button } from './Button.js';` | +| По умолчанию | `export default function Button() {}` | `import Button from './Button.js';` | +| Именованный | `export function Button() {}` | `import { Button } from './Button.js';` | -When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './Button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports! +При использовании импорта _по умолчанию_ можно использовать любое имя после слова `import`. Например, можно написать `import Banana from './Button.js'`, и эта запись все еще будет корректно импортировать значение по умолчанию. При использовании именованных импортов, напротив, значения должны совпадать в обоих файлах. Именно поэтому такие импорты называются _именованными_. + +**Разработчики часто используют экспорт по умолчанию, если файл экспортирует только один компонент, и именованный экспорт, если он экспортирует несколько компонентов и значений.** Независимо от того, какой стиль написания кода вы предпочитаете, всегда давайте осмысленные имена вашим функциональным компонентам и файлам, которые их содержат. Не рекомендуется использовать компоненты без имен, такие как `export default () => {}`, поскольку это затрудняет отладку. -**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder. -## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/} +## Экспорт и импорт нескольких компонентов из одного файла {/*exporting-and-importing-multiple-components-from-the-same-file*/} -What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!** +Что, если вы хотите показывать только один компонент `Profile` вместо всей галереи? Компонент `Profile` тоже можно экспортировать. Но в файле `Gallery.js` уже есть экспорт *по умолчанию*, а в одном файле не может быть _двух_ экспортов по умолчанию. Вы можете создать новый файл с экспортом по умолчанию или добавить *именованный* экспорт для компонента `Profile`. **В файле может быть только один экспорт по умолчанию, но несколько именованных экспортов!** -To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. Do what works best for you! +Чтобы избежать потенциальной путаницы между дефолтными и именованными экспортами, некоторые команды предпочитают придерживаться только одного стиля (экспорт по умолчанию или именованный) или не смешивать их в одном файле. Делайте то, что подходит именно вам! -First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword): +Сначала **экспортируйте** `Profile` из `Gallery.js`, используя именованный экспорт (без использования ключевого слова `default`): ```js export function Profile() { @@ -165,13 +166,13 @@ export function Profile() { } ``` -Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces): +Затем **импортируйте** `Profile` из `Gallery.js` в `App.js`, используя именованный импорт (с фигурными скобками): ```js import { Profile } from './Gallery.js'; ``` -Finally, **render** `` from the `App` component: +Теперь вы можете **отрендерить** `` из компонента `App`: ```js export default function App() { @@ -179,8 +180,7 @@ export default function App() { } ``` -Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `` to `` and back in this example: - +Теперь `Gallery.js` содержит два экспорта: экспорт по умолчанию `Gallery` и именованный экспорт `Profile`. `App.js` импортирует их оба. Попробуйте изменить `` на `` и обратно в этом примере: ```js App.js @@ -199,7 +199,7 @@ export function Profile() { return ( Alan L. Hart ); } @@ -207,7 +207,7 @@ export function Profile() { export default function Gallery() { return (
    -

    Amazing scientists

    +

    Восхитительные ученые

    @@ -222,24 +222,24 @@ img { margin: 0 10px 10px 0; height: 90px; } -Now you're using a mix of default and named exports: +Теперь вы используете как именованные экспорты, так и экспорты по умолчанию: * `Gallery.js`: - - Exports the `Profile` component as a **named export called `Profile`.** - - Exports the `Gallery` component as a **default export.** + - Экспортирует компонент `Profile` как **именованный экспорт `Profile`.** + - Экспортирует компонент `Gallery` **по умолчанию.** * `App.js`: - - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`. - - Imports `Gallery` as a **default import** from `Gallery.js`. - - Exports the root `App` component as a **default export.** + - Импортирует компонент `Profile` как **именованный импорт `Profile`** из файла `Gallery.js`. + - Импортирует компонент `Gallery` как **экспорт по умолчанию** из файла `Gallery.js`. + - Экспортирует корневой компонент `App` **по умолчанию.** -On this page you learned: +В этом разделе вы узнали: -* What a root component file is -* How to import and export a component -* When and how to use default and named imports and exports -* How to export multiple components from the same file +* Что такое корневой компонент +* Как импортировать и экспортировать компонент +* Когда использовать дефолтные и именованные импорты и экспорты +* Как экспортировать несколько компонентов из одного файла @@ -247,23 +247,22 @@ On this page you learned: -#### Split the components further {/*split-the-components-further*/} +#### Дальнейшее разделение компонентов {/*split-the-components-further*/} -Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing. +Сейчас файл `Gallery.js` экспортирует два компонента (`Profile` и `Gallery`), что может немного сбивать с толку. -Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `` and `` one after another. +Переместите компонент `Profile` в отдельный файл `Profile.js`, и затем изменить компонент `App` так, чтобы в нем друг за другом рендерились компоненты `` и ``. -You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above: +Вы можете использовать либо экспорт по умолчанию, либо именованный экспорт для `Profile`, но убедитесь, что вы используете соответствующий синтаксис импорта как в `App.js`, так и в `Gallery.js`! Вы можете свериться с этой таблицей: -| Syntax | Export statement | Import statement | +| Синтаксис экспорта | Как экспортировать | Как импортировать | | ----------- | ----------- | ----------- | -| Default | `export default function Button() {}` | `import Button from './Button.js';` | -| Named | `export function Button() {}` | `import { Button } from './Button.js';` | +| По умолчанию | `export default function Button() {}` | `import Button from './Button.js';` | +| Именованный | `export function Button() {}` | `import { Button } from './Button.js';` | -Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too? - +Не забывайте импортировать компоненты там, где они используются. `Gallery` тоже использует `Profile`, не так ли? @@ -282,12 +281,12 @@ export default function App() { ``` ```js Gallery.js active -// Move me to Profile.js! +// Перемести меня в Profile.js! export function Profile() { return ( Alan L. Hart ); } @@ -295,7 +294,7 @@ export function Profile() { export default function Gallery() { return (
    -

    Amazing scientists

    +

    Восхитительные ученые

    @@ -313,12 +312,11 @@ img { margin: 0 10px 10px 0; height: 90px; } -After you get it working with one kind of exports, make it work with the other kind. +После того, как вы выполните это задание с использованием одного из типов экспорта, выполните его с использованием другого типа. -This is the solution with named exports: - +Вот решение, использующее именованные экспорты: ```js App.js @@ -341,7 +339,7 @@ import { Profile } from './Profile.js'; export default function Gallery() { return (
    -

    Amazing scientists

    +

    Восхитительные ученые

    @@ -355,7 +353,7 @@ export function Profile() { return ( Alan L. Hart ); } @@ -367,7 +365,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -This is the solution with default exports: +Вот решение, использующее экспорты по умолчанию: @@ -391,7 +389,7 @@ import Profile from './Profile.js'; export default function Gallery() { return (
    -

    Amazing scientists

    +

    Восхитительные ученые

    @@ -405,7 +403,7 @@ export default function Profile() { return ( Alan L. Hart ); } diff --git a/src/content/learn/index.md b/src/content/learn/index.md index b57655bc4..d1d8f83de 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -4,51 +4,51 @@ title: Quick Start -Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis. +Добро пожаловать в документацию React! Эта страница познакомит вас с большинством концепций React, которыми вы будете пользоваться каждый день. -- How to create and nest components -- How to add markup and styles -- How to display data -- How to render conditions and lists -- How to respond to events and update the screen -- How to share data between components +- Как создавать и вкладывать компоненты +- Как добавлять разметку и стили +- Как отображать данные +- Как отрисовывать условия и списки +- Как реагировать на события и обновлять страницу +- Как обмениваться данными между компонентами -## Creating and nesting components {/*components*/} +## Создание и вложение компонентов {/*components*/} -React apps are made out of *components*. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page. +Приложения на React собираются из *компонентов*. Компонент — это часть пользовательского интерфейса, у которого есть собственная логика и внешность. Компонент может быть маленьким, как кнопка, или большим, как целая страница. -React components are JavaScript functions that return markup: +React-компоненты — это функции JavaScript, которые возвращают разметку: ```js function MyButton() { return ( - + ); } ``` -Now that you've declared `MyButton`, you can nest it into another component: +Вы объявили компонент `MyButton`, который можно вложить в другой компонент: ```js {5} export default function MyApp() { return (
    -

    Welcome to my app

    +

    Добро пожаловать в моё приложение

    ); } ``` -Notice that `` starts with a capital letter. That's how you know it's a React component. React component names must always start with a capital letter, while HTML tags must be lowercase. +Обратите внимание на то, что `` начинается с заглавной буквы. Это отличительная черта компонентов React. Названия компонентов в React всегда должны начинаться с заглавной буквы, а теги HTML — с маленькой. -Have a look at the result: +Посмотрите на результат: @@ -56,7 +56,7 @@ Have a look at the result: function MyButton() { return ( ); } @@ -64,7 +64,7 @@ function MyButton() { export default function MyApp() { return (
    -

    Welcome to my app

    +

    Добро пожаловать в моё приложение

    ); @@ -73,49 +73,49 @@ export default function MyApp() {     -The `export default` keywords specify the main component in the file. If you're not familiar with some piece of JavaScript syntax, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) and [javascript.info](https://javascript.info/import-export) have great references. +Ключевые слова `export default` указывают на основной компонент в файле. Для того, чтобы понять некоторые особенности синтаксиса JavaScript, можно пользоваться ресурсами [MDN](https://developer.mozilla.org/ru-RU/docs/web/javascript/reference/statements/export) и [learn.javascript.ru](https://learn.javascript.ru/import-export). -## Writing markup with JSX {/*writing-markup-with-jsx*/} +## Написание разметки с JSX {/*writing-markup-with-jsx*/} -The markup syntax you've seen above is called *JSX*. It is optional, but most React projects use JSX for its convenience. All of the [tools we recommend for local development](/learn/installation) support JSX out of the box. +Синтаксис разметки, который вы видели выше, называется *JSX*. Он не обязателен, но большинство проектов на React предпочитают его использовать из-за удобства. Все [инструменты, которые мы рекомендуем для локальной разработки,](/learn/installation) поддерживают JSX. -JSX is stricter than HTML. You have to close tags like `
    `. Your component also can't return multiple JSX tags. You have to wrap them into a shared parent, like a `
    ...
    ` or an empty `<>...` wrapper: +JSX строже HTML. Вам нужно закрывать теги вроде `
    `. Ваш компонент также не может возвращать несколько JSX-тегов. Их нужно будет обернуть внутрь общего родителя, например, `
    ...
    ` или пустую обёртку вида `<>...`: ```js {3,6} function AboutPage() { return ( <> -

    About

    -

    Hello there.
    How do you do?

    +

    Обо мне

    +

    Привет.
    Как дела?

    ); } ``` -If you have a lot of HTML to port to JSX, you can use an [online converter.](https://transform.tools/html-to-jsx) +Для того, чтобы перевести большое количество HTML-верстки в JSX, можно использовать [онлайн-конвертер.](https://transform.tools/html-to-jsx) -## Adding styles {/*adding-styles*/} +## Добавление стилей {/*adding-styles*/} -In React, you specify a CSS class with `className`. It works the same way as the HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute: +В React CSS-классы объявляются с помощью `className`. Оно работает аналогично HTML-атрибуту [`class`](https://developer.mozilla.org/ru-RU/docs/Web/HTML/Global_attributes/class): ```js ``` -Then you write the CSS rules for it in a separate CSS file: +В отдельном CSS-файле вы пишете для него CSS-правила: ```css -/* In your CSS */ +/* В вашем CSS */ .avatar { border-radius: 50%; } ``` -React does not prescribe how you add CSS files. In the simplest case, you'll add a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project. +React не ограничивает вас в том, как добавлять CSS-файлы. В самом простом случае вы добавите тег [``](https://developer.mozilla.org/ru-RU/docs/Web/HTML/Element/link) в ваш HTML-файл. Если вы используете инструмент для сборки или фреймворк, обратитесь к его документации, чтобы понять, как добавить CSS-файл в ваш проект. -## Displaying data {/*displaying-data*/} +## Отображение данных {/*displaying-data*/} -JSX lets you put markup into JavaScript. Curly braces let you "escape back" into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display `user.name`: +Фигурные скобки внутри JSX-разметки позволяют использовать JavaScript, например, для того, чтобы отобразить свою переменную пользователю. Код ниже отобразит `user.name`: ```js {3} return ( @@ -125,7 +125,7 @@ return ( ); ``` -You can also "escape into JavaScript" from JSX attributes, but you have to use curly braces *instead of* quotes. For example, `className="avatar"` passes the `"avatar"` string as the CSS class, but `src={user.imageUrl}` reads the JavaScript `user.imageUrl` variable value, and then passes that value as the `src` attribute: +Вы также можете использовать JavaScript в атрибутах JSX. В таком случае вам нужно поставить фигурные скобки *вместо* кавычек. Например, `className="avatar"` передаёт строку `"avatar"` как CSS-класс, а `src={user.imageUrl}` считывает значение JavaScript-переменной `user.imageUrl` и передаёт его в качестве атрибута `src`: ```js {3,4} return ( @@ -136,7 +136,7 @@ return ( ); ``` -You can put more complex expressions inside the JSX curly braces too, for example, [string concatenation](https://javascript.info/operators#string-concatenation-with-binary): +Вы также можете использовать в JSX более сложные выражения внутри фигурных скобок, например, [сложение строк](https://learn.javascript.ru/operators#slozhenie-strok-pri-pomoschi-binarnogo): @@ -154,7 +154,7 @@ export default function Profile() { {'Photo -In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` JSX curly braces. You can use the `style` attribute when your styles depend on JavaScript variables. +В этом примере `style={{}}` не является специальным синтаксисом, а представляет из себя обычный объект `{}` внутри фигурных скобок JSX `style={ }`. Вы можете использовать атрибут `style` в случаях, когда ваши стили зависят от переменных JavaScript. -## Conditional rendering {/*conditional-rendering*/} +## Условный рендеринг {/*conditional-rendering*/} -In React, there is no special syntax for writing conditions. Instead, you'll use the same techniques as you use when writing regular JavaScript code. For example, you can use an [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to conditionally include JSX: +В React не существует специального синтаксиса для описания условий, вместо этого можно использовать обычный код на JavaScript. Например, для условного рендеринга JSX-кода можно применять [`if`](https://developer.mozilla.org/ru-RU/docs/Web/JavaScript/Reference/Statements/if...else): ```js let content; @@ -197,7 +197,7 @@ return ( ); ``` -If you prefer more compact code, you can use the [conditional `?` operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) Unlike `if`, it works inside JSX: +Если вы предпочитаете писать более компактный код, используйте [условный оператор `?`.](https://developer.mozilla.org/ru-RU/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) В отличие от `if` его можно использовать в JSX: ```js
    @@ -209,7 +209,7 @@ If you prefer more compact code, you can use the [conditional `?` operator.](htt
    ``` -When you don't need the `else` branch, you can also use a shorter [logical `&&` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation): +Когда вам не нужна ветка `else`, можно использовать более короткий [логический оператор `&&`](https://developer.mozilla.org/ru-RU/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation): ```js
    @@ -217,23 +217,23 @@ When you don't need the `else` branch, you can also use a shorter [logical `&&`
    ``` -All of these approaches also work for conditionally specifying attributes. If you're unfamiliar with some of this JavaScript syntax, you can start by always using `if...else`. +Все эти способы подходят и для задания условий в атрибутах. Если вам не знакомы такие синтаксические конструкции JavaScript, вы можете начать с использования `if...else`. -## Rendering lists {/*rendering-lists*/} +## Рендеринг списков {/*rendering-lists*/} -You will rely on JavaScript features like [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and the [array `map()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to render lists of components. +Для отрисовки списков компонентов вам будет нужно использовать такие возможности JavaScript, как [цикл `for`](https://developer.mozilla.org/ru-RU/docs/Web/JavaScript/Reference/Statements/for) и [функция массива `map()`](https://developer.mozilla.org/ru-RU/docs/Web/JavaScript/Reference/Global_Objects/Array/map). -For example, let's say you have an array of products: +Например, представим, что у вас есть массив продуктов: ```js const products = [ - { title: 'Cabbage', id: 1 }, - { title: 'Garlic', id: 2 }, - { title: 'Apple', id: 3 }, + { title: 'Капуста', id: 1 }, + { title: 'Чеснок', id: 2 }, + { title: 'Яблоко', id: 3 }, ]; ``` -Inside your component, use the `map()` function to transform an array of products into an array of `
  • ` items: +Преобразуйте этот массив в массив элементов `
  • ` с помощью функции `map()` внутри вашего компонента: ```js const listItems = products.map(product => @@ -247,15 +247,15 @@ return ( ); ``` -Notice how `
  • ` has a `key` attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items. +Обратите внимание, что у `
  • ` есть атрибут `key`. Для каждого элемента списка вам нужно задавать ключ в виде строки или числа, который позволит однозначно отделить этот элемент от остальных в списке. Обычно этот ключ берется из ваших данных, например, это может быть идентификатор из базы данных. React использует эти ключи при добавлении, удалении или изменении порядка элементов. ```js const products = [ - { title: 'Cabbage', isFruit: false, id: 1 }, - { title: 'Garlic', isFruit: false, id: 2 }, - { title: 'Apple', isFruit: true, id: 3 }, + { title: 'Капуста', isFruit: false, id: 1 }, + { title: 'Чеснок', isFruit: false, id: 2 }, + { title: 'Яблоко', isFruit: true, id: 3 }, ]; export default function ShoppingList() { @@ -278,14 +278,14 @@ export default function ShoppingList() { -## Responding to events {/*responding-to-events*/} +## Обработка событий {/*responding-to-events*/} -You can respond to events by declaring *event handler* functions inside your components: +Вы можете реагировать на события, объявляя внутри ваших компонентов функции *обработчиков событий*: ```js {2-4,7} function MyButton() { function handleClick() { - alert('You clicked me!'); + alert('Вы нажали на меня!'); } return ( @@ -296,19 +296,19 @@ function MyButton() { } ``` -Notice how `onClick={handleClick}` has no parentheses at the end! Do not _call_ the event handler function: you only need to *pass it down*. React will call your event handler when the user clicks the button. +Заметьте: у `onClick={handleClick}` нет скобок в конце! Не _вызывайте_ функцию обработчика событий: вам нужно просто её *передать*. React вызовет ваш обработчик событий, когда пользователь кликнет по кнопке. -## Updating the screen {/*updating-the-screen*/} +## Обновление экрана {/*updating-the-screen*/} -Often, you'll want your component to "remember" some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add *state* to your component. +Вам может понадобиться, чтобы компонент «помнил» какую-то информацию и отображал её. Например, вы хотите посчитать сколько раз была нажата кнопка. Для этого добавьте *состояние* в ваш компонент. -First, import [`useState`](/reference/react/useState) from React: +Сначала импортируйте [`useState`](/reference/react/useState) из React: ```js import { useState } from 'react'; ``` -Now you can declare a *state variable* inside your component: +Теперь можно объявить *переменную состояния* внутри вашего компонента: ```js function MyButton() { @@ -316,9 +316,9 @@ function MyButton() { // ... ``` -You’ll get two things from `useState`: the current state (`count`), and the function that lets you update it (`setCount`). You can give them any names, but the convention is to write `[something, setSomething]`. +`useState` вернет вам две вещи: текущее состояние (`count`) и функцию (`setCount`), которая обновляет его. Можно именовать их как вам угодно, но такого рода вещи принято называть `[something, setSomething]`. -The first time the button is displayed, `count` will be `0` because you passed `0` to `useState()`. When you want to change state, call `setCount()` and pass the new value to it. Clicking this button will increment the counter: +При первом показе кнопка `count` будет иметь значение `0`, потому что вы передали `0` в `useState()`. Для изменения состояния вызовите `setCount()` и передайте туда новое значение. Клик на эту кнопку будет увеличивать счётчик: ```js {5} function MyButton() { @@ -330,15 +330,15 @@ function MyButton() { return ( ); } ``` -React will call your component function again. This time, `count` will be `1`. Then it will be `2`. And so on. +React снова вызовет функцию вашего компонента. На этот раз `count` будет равно `1`, затем `2`, и так далее. -If you render the same component multiple times, each will get its own state. Click each button separately: +Если вы рендерите один и тот же компонент несколько раз, то у каждого из них будет своё состояние. Попробуйте покликать на каждую кнопку по отдельности: @@ -348,7 +348,7 @@ import { useState } from 'react'; export default function MyApp() { return (
    -

    Counters that update separately

    +

    Независимо обновляющиеся счётчики

    @@ -364,7 +364,7 @@ function MyButton() { return ( ); } @@ -379,59 +379,59 @@ button {     -Notice how each button "remembers" its own `count` state and doesn't affect other buttons. +Обратите внимание на то, как каждая кнопка "помнит" свое состояние `count` и не влияет на другие кнопки. -## Using Hooks {/*using-hooks*/} +## Использование хуков {/*using-hooks*/} -Functions starting with `use` are called *Hooks*. `useState` is a built-in Hook provided by React. You can find other built-in Hooks in the [API reference.](/reference/react) You can also write your own Hooks by combining the existing ones. +Функции, которые начинаются с `use`, называются *хуками*. `useState` — это встроенный хук в React. В [справочнике API](/reference/react) приводятся другие встроенные хуки. Также, вы можете писать свои собственные хуки, совмещая их с уже существующими. -Hooks are more restrictive than other functions. You can only call Hooks *at the top* of your components (or other Hooks). If you want to use `useState` in a condition or a loop, extract a new component and put it there. +У хуков больше ограничений, чем у других функций. Хуки могут вызываться только *в начале* ваших компонентов (или других хуков). Если вам нужен `useState` в условии или цикле, выделите новый компонент и используйте его там. -## Sharing data between components {/*sharing-data-between-components*/} +## Обмен данными между компонентами {/*sharing-data-between-components*/} -In the previous example, each `MyButton` had its own independent `count`, and when each button was clicked, only the `count` for the button clicked changed: +В предыдущем примере у каждого `MyButton` имеется своё собственное состояние `count`, и при клике на каждую кнопку обновление `count` происходило только у нажатой кнопки. - + -Initially, each `MyButton`'s `count` state is `0` +В начале у каждого `MyButton` состояние `count` равно `0` - + -The first `MyButton` updates its `count` to `1` +Первый компонент `MyButton` обновляет свой `count` значением `1` -However, often you'll need components to *share data and always update together*. +Однако, вы будете часто сталкиваться с ситуацией, когда вам будет нужно, чтобы компоненты *имели общие данные и всегда обновлялись вместе*. -To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them. +Для того, чтобы оба компонента `MyButton` отображали одно и то же значение `count`, вам нужно перенести состояние из отдельных кнопок «выше», в ближайший компонент, содержащий эти компоненты. -In this example, it is `MyApp`: +В этом случае таким компонентом является `MyApp`: - + -Initially, `MyApp`'s `count` state is `0` and is passed down to both children +Сначала состояние `count` компонента `MyApp` равно `0` и передаётся обоим потомкам - + -On click, `MyApp` updates its `count` state to `1` and passes it down to both children +При клике `MyApp` обновляет своё состояние `count` на значение `1` и передаёт его вниз обоим потомкам -Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code. +Теперь, когда вы нажимаете на любую из кнопок, `count` в `MyApp` будет менять своё значение, что в свою очередь повлечёт обновление счётчиков в обоих компонентах `MyButton`. Вот как это можно выразить в коде. -First, *move the state up* from `MyButton` into `MyApp`: +Сначала *переместите вверх состояние* из `MyButton` в `MyApp`: ```js {2-6,18} export default function MyApp() { @@ -443,7 +443,7 @@ export default function MyApp() { return (
    -

    Counters that update separately

    +

    Независимо обновляющиеся счётчики

    @@ -451,12 +451,12 @@ export default function MyApp() { } function MyButton() { - // ... we're moving code from here ... + // ... мы перемещаем код отсюда ... } ``` -Then, *pass the state down* from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like ``: +Затем *передайте состояние на уровень ниже* из `MyApp` каждому `MyButton` вместе с общим обработчиком клика. Можно передавать информацию в `MyButton` через фигурные скобки JSX таким же образом, как вы это делали со встроенными тегами наподобие ``: ```js {11-12} export default function MyApp() { @@ -468,7 +468,7 @@ export default function MyApp() { return (
    -

    Counters that update together

    +

    Одновременно обновляющиеся счётчики

    @@ -476,21 +476,21 @@ export default function MyApp() { } ``` -The information you pass down like this is called _props_. Now the `MyApp` component contains the `count` state and the `handleClick` event handler, and *passes both of them down as props* to each of the buttons. +Информация, которую вы передаёте таким образом, называется _пропсами_. Теперь у компонента `MyApp` есть состояние `count` и обработчик событий `handleClick`, *которые он передаёт в качестве пропсов* каждой кнопке-потомку. -Finally, change `MyButton` to *read* the props you have passed from its parent component: +Наконец, измените компонент `MyButton` так, чтобы он *считывал* пропсы, переданные от своего родителя: ```js {1,3} function MyButton({ count, onClick }) { return ( ); } ``` -When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value. This is called "lifting state up". By moving state up, you've shared it between components. +При нажатии на кнопку срабатывает обработчик `onClick`. Каждой кнопке в качестве значения пропа `onClick` задана функция `handleClick` из `MyApp`, поэтому выполняется соответствующий код. Этот код вызывает функцию `setCount(count + 1)`, увеличивая значение состояния `count`. Новое значение `count` передаётся каждой кнопке в качестве пропа, поэтому они все отображают новое значение. Это называется "подъёмом состояния вверх". Поднимая состояние вверх, вы делаете его общим для всех компонентов. @@ -531,8 +531,8 @@ button { -## Next Steps {/*next-steps*/} +## Следующие шаги {/*next-steps*/} -By now, you know the basics of how to write React code! +Теперь вы знаете основы того, как писать код для React! -Check out the [Tutorial](/learn/tutorial-tic-tac-toe) to put them into practice and build your first mini-app with React. +Ознакомьтесь с [введением](/learn/tutorial-tic-tac-toe), в рамках которого вы сможете применить полученные знания и собрать своё первое мини-приложение на React. diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md index c5426ea94..9884a65f2 100644 --- a/src/content/learn/installation.md +++ b/src/content/learn/installation.md @@ -1,25 +1,25 @@ --- -title: Installation +title: Установка --- -React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started. +React был спроектирован с самого начала с учётом постепенного внедрения. Вы можете начать с малого и использовать только ту функциональность React, которая необходима вам в данный момент. Информация в этом разделе будет полезна как при первом знакомстве с React, так и при создании простой динамической HTML-страницы или проектировании сложного React-приложения. -* [How to start a new React project](/learn/start-a-new-react-project) -* [How to add React to an existing project](/learn/add-react-to-an-existing-project) -* [How to set up your editor](/learn/editor-setup) -* [How to install React Developer Tools](/learn/react-developer-tools) +* [Как создать новый React-проект](/learn/start-a-new-react-project) +* [Как добавить React в существующий проект](/learn/add-react-to-an-existing-project) +* [Как настроить редактор кода](/learn/editor-setup) +* [Как установить React Developer Tools](/learn/react-developer-tools) -## Try React {/*try-react*/} +## Попробовать React {/*try-react*/} -You don't need to install anything to play with React. Try editing this sandbox! +Вам не нужно ничего устанавливать, чтобы попробовать React. Поредактируйте код в песочнице! @@ -35,23 +35,23 @@ export default function App() { -You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner. +Вы можете редактировать прямо здесь или же открыть код в новой вкладке, нажав на кнопку "Форкнуть" в правом верхнем углу. -Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) +Такие песочницы есть на большинстве страниц React-документации. За пределами React-документации также есть большое количество песочниц, поддерживающих React. Например: [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react) или [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) -### Try React locally {/*try-react-locally*/} +### Попробовать React локально {/*try-react-locally*/} -To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser! +Чтобы попробовать React локально на вашем компьютере, [скачайте эту HTML страницу.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Откройте её в своем текстовом редакторе и браузере! -## Start a new React project {/*start-a-new-react-project*/} +## Начать новый React-проект {/*start-a-new-react-project*/} -If you want to build an app or a website fully with React, [start a new React project.](/learn/start-a-new-react-project) +Если вы хотите создать приложение или сайт полностью на React — [создайте новый React-проект.](/learn/start-a-new-react-project) -## Add React to an existing project {/*add-react-to-an-existing-project*/} +## Добавить React в существующий проект {/*add-react-to-an-existing-project*/} -If want to try using React in your existing app or a website, [add React to an existing project.](/learn/add-react-to-an-existing-project) +Если вы хотите попробовать React в существующем приложении или сайте — [добавьте React в существующий проект.](/learn/add-react-to-an-existing-project) -## Next steps {/*next-steps*/} +## Дальнейшие шаги {/*next-steps*/} -Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day. +Перейдите к [Введению в React](/learn) для ознакомления с самыми важными концепциями, которые вы будете встречать каждый день. diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index b5c193763..3e91a7694 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -31,7 +31,7 @@ Then, use it to declare a ref inside your component: const myRef = useRef(null); ``` -Finally, pass it to the DOM node as the `ref` attribute: +Finally, pass your ref as the `ref` attribute to the JSX tag for which you want to get the DOM node: ```js
    diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 89208a6bb..c554df9c6 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -4,30 +4,31 @@ title: React Developer Tools -Use React Developer Tools to inspect React [components](/learn/your-first-component), edit [props](/learn/passing-props-to-a-component) and [state](/learn/state-a-components-memory), and identify performance problems. +Используйте React Developer Tools для инспекции [компонентов](/learn/your-first-component) React, редактирования [пропсов](/learn/passing-props-to-a-component) и [состояния](/learn/state-a-components-memory), а также для выявления проблем с производительностью. -* How to install React Developer Tools +* Как установить React Developer Tools -## Browser extension {/*browser-extension*/} +## Расширение для браузера {/*browser-extension*/} -The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers: +Самым простым способом отладки сайтов, созданных с использованием React, является установка браузерного расширения React Developer Tools. Оно доступно для нескольких популярных браузеров. -* [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -* [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) -* [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) +* [Установить для **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ru) +* [Установить для **Firefox**](https://addons.mozilla.org/ru/firefox/addon/react-devtools/) +* [Установить для **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) -Now, if you visit a website **built with React,** you will see the _Components_ and _Profiler_ panels. +Если вы откроете сайт, созданный с использованием React, вы увидите панели _Components_ и _Profiler_. -![React Developer Tools extension](/images/docs/react-devtools-extension.png) +![Расширение React Developer Tools](/images/docs/react-devtools-extension.png) + +### Safari и другие браузеры {/*safari-and-other-browsers*/} +Для других браузеров, таких как Safari, необходимо установить npm пакет [`react-devtools`](https://www.npmjs.com/package/react-devtools): -### Safari and other browsers {/*safari-and-other-browsers*/} -For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package: ```bash # Yarn yarn global add react-devtools @@ -36,26 +37,26 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal: +Затем откройте инструменты разработчика из терминала: ```bash react-devtools ``` -Then connect your website by adding the following ` ``` -Reload your website in the browser now to view it in developer tools. +Перезагрузите ваш сайт, чтобы просмотреть его в инструментах разработчика. ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) -## Mobile (React Native) {/*mobile-react-native*/} -React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well. +## Мобильные устройства (React Native) {/*mobile-react-native*/} +React Developer Tools также можно использовать для отладки приложений, созданных с помощью [React Native](https://reactnative.dev/). +Самый простой способ использования React Developer Tools - установить их глобально: -The easiest way to use React Developer Tools is to install it globally: ```bash # Yarn yarn global add react-devtools @@ -64,13 +65,13 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal. +Откройте инструменты разработчика в терминале. ```bash react-devtools ``` -It should connect to any local React Native app that's running. +Он подключится к любому локальному приложению React Native, которое запущено. -> Try reloading the app if developer tools doesn't connect after a few seconds. +> Попробуйте перезагрузить приложение, если инструменты разработчика не подключатся через несколько секунд. -[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging) +[Узнайте больше о отладке React Native.](https://reactnative.dev/docs/debugging) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index da5d864ab..77f337d88 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -1,49 +1,49 @@ --- -title: 'Referencing Values with Refs' +title: 'Обращаемся к значением через рефы' --- -When you want a component to "remember" some information, but you don't want that information to [trigger new renders](/learn/render-and-commit), you can use a *ref*. +Для того, чтобы компонент «запомнил» какие-либо данные, но изменения этих данных не [вызывали новый рендер](/learn/render-and-commit), вы можете использовать *реф*. -- How to add a ref to your component -- How to update a ref's value -- How refs are different from state -- How to use refs safely +- Как добавить реф в ваш компонент +- Как обновить значение рефа +- Отличие рефа от состояния +- Как безопасно использовать рефы -## Adding a ref to your component {/*adding-a-ref-to-your-component*/} +## Добавляем реф в ваш компонент {/*adding-a-ref-to-your-component*/} -You can add a ref to your component by importing the `useRef` Hook from React: +Чтобы добавить реф в ваш компонент, импортируйте хук `useRef` из React: ```js import { useRef } from 'react'; ``` -Inside your component, call the `useRef` Hook and pass the initial value that you want to reference as the only argument. For example, here is a ref to the value `0`: +Внутри компонента вызовите хук `useRef` и передайте аргумент, который будет являться начальным значением. Например, здесь значением реф является `0`: ```js const ref = useRef(0); ``` -`useRef` returns an object like this: +`useRef` возвращает следующий объект: ```js -{ - current: 0 // The value you passed to useRef +{ + current: 0 // Значение, которое вы передали в useRef } ``` - + -You can access the current value of that ref through the `ref.current` property. This value is intentionally mutable, meaning you can both read and write to it. It's like a secret pocket of your component that React doesn't track. (This is what makes it an "escape hatch" from React's one-way data flow--more on that below!) +Получить доступ к значению рефа можно через свойство `ref.current`. Это значение намеренно является мутируемым, т.е. оно доступно как для чтения, так и для изменения. По сути, это как секретный карман, за которым React не следит. (Благодаря этому, реф является «лазейкой» в однонаправленном потоке данных React. Подробнее об этом ниже!) -Here, a button will increment `ref.current` on every click: +В примере ниже создадим кнопку, которая будет увеличивать `ref.current` на каждый клик: @@ -68,20 +68,20 @@ export default function Counter() { -The ref points to a number, but, like [state](/learn/state-a-components-memory), you could point to anything: a string, an object, or even a function. Unlike state, ref is a plain JavaScript object with the `current` property that you can read and modify. +Здесь реф ссылается на число, но как и в случае с [состоянием](/learn/state-a-components-memory), вы можете ссылаться на что угодно: на строку, объект или даже на функцию. В отличии от состояния, реф—это обычный JavaScript-объект со свойством `current`, которое можно читать и изменять. -Note that **the component doesn't re-render with every increment.** Like state, refs are retained by React between re-renders. However, setting state re-renders a component. Changing a ref does not! +Имейте в виду, что **изменение реф не вызовет повторный рендер на каждое изменение.** Рефы будут сохраняться между повторными рендерами, как и состояние. Однако, обновление состояние вызывает новый рендер. А изменение рефа нет! -## Example: building a stopwatch {/*example-building-a-stopwatch*/} +## Пример: создадим секундомер {/*example-building-a-stopwatch*/} -You can combine refs and state in a single component. For example, let's make a stopwatch that the user can start or stop by pressing a button. In order to display how much time has passed since the user pressed "Start", you will need to keep track of when the Start button was pressed and what the current time is. **This information is used for rendering, so you'll keep it in state:** +Рефы и состояние можно использовать в одном компоненте. Например, создадим секундомер, который можно будет запускать и останавливать нажатием кнопки. Чтобы отобразить сколько времени прошло с момента клика «Start», нужно следить за моментом клика и за текущим временем. **Так как эти данные используются при рендере, их лучше хранить в состоянии:** ```js const [startTime, setStartTime] = useState(null); const [now, setNow] = useState(null); ``` -When the user presses "Start", you'll use [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval) in order to update the time every 10 milliseconds: +Чтобы обновлять время каждые 10 миллисекунд, после того как пользователь нажимает «Start», будем использовать [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval): @@ -93,12 +93,12 @@ export default function Stopwatch() { const [now, setNow] = useState(null); function handleStart() { - // Start counting. + // Начинаем отсчёт. setStartTime(Date.now()); setNow(Date.now()); setInterval(() => { - // Update the current time every 10ms. + // Обновляем текущее время каждые 10мс. setNow(Date.now()); }, 10); } @@ -121,7 +121,7 @@ export default function Stopwatch() { -When the "Stop" button is pressed, you need to cancel the existing interval so that it stops updating the `now` state variable. You can do this by calling [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval), but you need to give it the interval ID that was previously returned by the `setInterval` call when the user pressed Start. You need to keep the interval ID somewhere. **Since the interval ID is not used for rendering, you can keep it in a ref:** +Когда нажата кнопка «Stop», нужно очистить текущий интервал, чтобы значение состояния `now` перестало обновляться. Для реализации можно использовать вызов[`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval), но интервалу нужно задать ID, которое возвращается при вызове `setInterval`, когда пользователь нажал «Start». ID интервала нужно где-то сохранить. **Поскольку ID интервала не используется для рендера, вы можете сохранить его в реф:** @@ -168,20 +168,20 @@ export default function Stopwatch() { -When a piece of information is used for rendering, keep it in state. When a piece of information is only needed by event handlers and changing it doesn't require a re-render, using a ref may be more efficient. +Когда какие-то данные используются для рендера, держите её в состоянии. Когда данные нужны только для обработчиков событий, и изменение этих данных не требуют повторного рендера, использование реф будет более эффективным. -## Differences between refs and state {/*differences-between-refs-and-state*/} +## Отличие рефа от состояния {/*differences-between-refs-and-state*/} -Perhaps you're thinking refs seem less "strict" than state—you can mutate them instead of always having to use a state setting function, for instance. But in most cases, you'll want to use state. Refs are an "escape hatch" you won't need often. Here's how state and refs compare: +Может показаться, что рефы менее «строгие», чем состояние—их можно изменять напрямую, вместо использования функции для обновления состояния. Но в большинстве случаев вам захочется использовать состояние. Рефы—это «лазейка», которую не рекомендуется использовать слишком часто. Ниже сравнение рефа и состояния: -| refs | state | +| refs | state | | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -| `useRef(initialValue)` returns `{ current: initialValue }` | `useState(initialValue)` returns the current value of a state variable and a state setter function ( `[value, setValue]`) | -| Doesn't trigger re-render when you change it. | Triggers re-render when you change it. | -| Mutable—you can modify and update `current`'s value outside of the rendering process. | "Immutable"—you must use the state setting function to modify state variables to queue a re-render. | -| You shouldn't read (or write) the `current` value during rendering. | You can read state at any time. However, each render has its own [snapshot](/learn/state-as-a-snapshot) of state which does not change. +| `useRef(initialValue)` возвращает `{ current: initialValue }` | `useState(initialValue)` возвращает текущее значение состояния и функцию-сеттер для его обновления ( `[value, setValue]`) | +| При изменении не вызывает повторный рендер. | При изменении вызывает повторный рендер. | +| Мутабельный—можно изменять и обновлять значение `current` независимо от процесса рендера. | «Иммутабельный»—обязательно использовать функцию-сеттер, чтобы добавить изменение состояния в очередь обновлений. | +| Не рекомендуется читать (или изменять) значение `current` во время рендера. | Можно читать значение состояния в любое время. Однако, за каждым рендером закреплён свой [снимок](/learn/state-as-a-snapshot) состояния, который не будет изменяться. -Here is a counter button that's implemented with state: +В следующем примере создадим кнопку счётчика, которая использует состояние: @@ -205,9 +205,9 @@ export default function Counter() { -Because the `count` value is displayed, it makes sense to use a state value for it. When the counter's value is set with `setCount()`, React re-renders the component and the screen updates to reflect the new count. +В этом случае имеет смысл использовать состояние, т.к. значение `count` отображается на странице. Когда состояние счётчика обновляется при помощи `setCount()`, React вызывает повторный рендер и на экране отображается новое значение счётчика. -If you tried to implement this with a ref, React would never re-render the component, so you'd never see the count change! See how clicking this button **does not update its text**: +Если использовать реф, React никогда не вызовет повторный рендер, поэтому вы никогда не увидите изменение счётчика! Например, в данном случае клик по кнопке **не обновляет её текст**: @@ -218,7 +218,7 @@ export default function Counter() { let countRef = useRef(0); function handleClick() { - // This doesn't re-render the component! + // Повторный рендер не вызовется! countRef.current = countRef.current + 1; } @@ -232,68 +232,68 @@ export default function Counter() { -This is why reading `ref.current` during render leads to unreliable code. If you need that, use state instead. +Именно поэтому чтение из `ref.current` во время рендера приводит к непредсказуемому результату. Используйте состояние, если во время рендера вам точно нужно читать данные из него! -#### How does useRef work inside? {/*how-does-use-ref-work-inside*/} +#### Как работает useRef изнутри? {/*how-does-use-ref-work-inside*/} -Although both `useState` and `useRef` are provided by React, in principle `useRef` could be implemented _on top of_ `useState`. You can imagine that inside of React, `useRef` is implemented like this: +Хотя оба хука `useState` и `useRef` могут быть импортированы из React, `useRef` может быть реализован поверх `useState`. Можно представлять, что внутри React `useRef` реализован следующим образом: ```js -// Inside of React +// Внутри React function useRef(initialValue) { const [ref, unused] = useState({ current: initialValue }); return ref; } ``` -During the first render, `useRef` returns `{ current: initialValue }`. This object is stored by React, so during the next render the same object will be returned. Note how the state setter is unused in this example. It is unnecessary because `useRef` always needs to return the same object! +Во время первого рендера `useRef` возвращает `{ current: initialValue }`. Этот объект сохраняется внутри React, поэтому во время следующего рендера вернётся точно такой же объект. Обратите внимание, что функция для обновления состояния в этом примере не используется. В этом нет необходимости, т.к. `useRef` всегда возвращает один и тот же объект! -React provides a built-in version of `useRef` because it is common enough in practice. But you can think of it as a regular state variable without a setter. If you're familiar with object-oriented programming, refs might remind you of instance fields--but instead of `this.something` you write `somethingRef.current`. +React предоставляет встроенный хук `useRef`, т.к. это достаточно часто встречается на практике. Но можно представлять себе, что это обычное значение состояния, но без функции обновления. Если вы знакомы с объектно-ориентированным программированием, рефы могут напоминать вам поля экземпляра--но вместо `this.something` используется `somethingRef.current`. -## When to use refs {/*when-to-use-refs*/} +## Когда использовать рефы {/*when-to-use-refs*/} -Typically, you will use a ref when your component needs to "step outside" React and communicate with external APIs—often a browser API that won't impact the appearance of the component. Here are a few of these rare situations: +Как правило, вы будете использовать реф, когда захотите выйти за пределы парадигмы React и иметь возможность взаимодействовать со сторонними API—часто это API браузера, которое никак не влияет на отображение компонента на странице. Ниже приведены примеры таких ситуаций: -- Storing [timeout IDs](https://developer.mozilla.org/docs/Web/API/setTimeout) -- Storing and manipulating [DOM elements](https://developer.mozilla.org/docs/Web/API/Element), which we cover on [the next page](/learn/manipulating-the-dom-with-refs) -- Storing other objects that aren't necessary to calculate the JSX. +- Хранение [ID таймера](https://developer.mozilla.org/docs/Web/API/setTimeout) +- Хранение и манипулирование [DOM-элементами](https://developer.mozilla.org/docs/Web/API/Element), которое мы разберём [в следующей главе](/learn/manipulating-the-dom-with-refs) +- Хранение различных других объектов, которые не влияют на JSX. -If your component needs to store some value, but it doesn't impact the rendering logic, choose refs. +Если вы хотите сохранить какое-то значение внутри компонента, которое не влияет на логику рендера, используйте реф. -## Best practices for refs {/*best-practices-for-refs*/} +## Рекомендации по использованию рефов {/*best-practices-for-refs*/} -Following these principles will make your components more predictable: +Следуйте следующим принципам, чтобы сделать ваши компоненты более предсказуемыми: -- **Treat refs as an escape hatch.** Refs are useful when you work with external systems or browser APIs. If much of your application logic and data flow relies on refs, you might want to rethink your approach. -- **Don't read or write `ref.current` during rendering.** If some information is needed during rendering, use [state](/learn/state-a-components-memory) instead. Since React doesn't know when `ref.current` changes, even reading it while rendering makes your component's behavior difficult to predict. (The only exception to this is code like `if (!ref.current) ref.current = new Thing()` which only sets the ref once during the first render.) +- **Используйте рефы как лазейку.** Использование рефов является оправданным, когда вы работаете со сторонними системами или с API браузера. Если большая часть логики вашего приложения и потока данных зависит от рефов, скорее всего вам стоит переосмыслить свой подход. +- **Не читайте и не изменяйте `ref.current` во время рендера.** Если необходимо использовать какие-то данные во время рендера, используйте [состояние](/learn/state-a-components-memory) вместо рефа. Даже просто чтение во время рендера делает поведение вашего компонента менее предсказуемым, поскольку React ничего не знает об изменении `ref.current`. (Единственным исключением является `if (!ref.current) ref.current = new Thing()`, где реф устанавливается единожды, во время первого рендера.) -Limitations of React state don't apply to refs. For example, state acts like a [snapshot for every render](/learn/state-as-a-snapshot) and [doesn't update synchronously.](/learn/queueing-a-series-of-state-updates) But when you mutate the current value of a ref, it changes immediately: +Ограничения React при использовании состояния никак не влияют на рефы. Например, состояние ведёт себя как [снимок для каждого рендера](/learn/state-as-a-snapshot) и [не обновляется синхронно.](/learn/queueing-a-series-of-state-updates) Но при изменении текущего значения реф, оно изменяется сразу же: ```js ref.current = 5; console.log(ref.current); // 5 ``` -This is because **the ref itself is a regular JavaScript object,** and so it behaves like one. +Это обусловлено тем, что **реф—это обычный JavaScript-объект,** и ведёт себя как объект. -You also don't need to worry about [avoiding mutation](/learn/updating-objects-in-state) when you work with a ref. As long as the object you're mutating isn't used for rendering, React doesn't care what you do with the ref or its contents. +Когда вы работаете с рефами, вам не нужно беспокоится о том, чтобы [избегать мутаций](/learn/updating-objects-in-state). До тех пор пока объект, который вы мутируете не используется для рендера, React нет дела, что вы делаете с рефами и их значениями. -## Refs and the DOM {/*refs-and-the-dom*/} +## Рефы и DOM {/*refs-and-the-dom*/} -You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `
    `, React will put the corresponding DOM element into `myRef.current`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs) +Вы можете использовать реф в качестве ссылки на любое значение. Однако, на практике рефы часто используются для доступа к DOM-элементам. Например, когда нужно программно сфокусироваться на элементе `input`. Когда вы устанавливаете `ref` через атрибут, `
    `, React сохранит соответствующий DOM-элемент в качестве значения `myRef.current`. Вы можете больше прочитать об этом в [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs). -- Refs are an escape hatch to hold onto values that aren't used for rendering. You won't need them often. -- A ref is a plain JavaScript object with a single property called `current`, which you can read or set. -- You can ask React to give you a ref by calling the `useRef` Hook. -- Like state, refs let you retain information between re-renders of a component. -- Unlike state, setting the ref's `current` value does not trigger a re-render. -- Don't read or write `ref.current` during rendering. This makes your component hard to predict. +- Рефф—это лазейка для хранения значений, которые не используются при рендере. Чаще всего вы можете обойтись без них. +- Реф—это обычный JavaScript-объект с единственным свойством `curent`, которое доступно как для чтения, так и для записи. +- Вы можете использовать реф, вызвав хук `useRef` из React. +- Рефы позволяют вам сохранить данные между перерисовками компонента, как и в случае с состоянием. +- В отличии от состояния, запись нового значения в `ref.current` не спровоцирует повторный рендер компонента. +- Не читайте и не записывайте ничего в `ref.current` во время рендера. Это сделает поведение вашего компонента менее предсказуемым. @@ -301,13 +301,13 @@ You can point a ref to any value. However, the most common use case for a ref is -#### Fix a broken chat input {/*fix-a-broken-chat-input*/} +#### Исправьте неработающий input в чате {/*fix-a-broken-chat-input*/} -Type a message and click "Send". You will notice there is a three second delay before you see the "Sent!" alert. During this delay, you can see an "Undo" button. Click it. This "Undo" button is supposed to stop the "Sent!" message from appearing. It does this by calling [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) for the timeout ID saved during `handleSend`. However, even after "Undo" is clicked, the "Sent!" message still appears. Find why it doesn't work, and fix it. +Введите сообщение и нажмите «Send». Можно заметить трёхсекундную задержку перед тем, как появится модальное окно с сообщением «Sent!». Во время этой задержки появляется кнопка «Undo». Кликните по ней. Предполагается, что кнопка «Undo» предотвратит появление сообщения «Sent!». Это происходит из-за вызова [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) для сохранения ID во время `handleSend`. Однако, даже после клика «Undo», сообщение все ещё появляется. Попробуйте разобраться, почему этот код не работает, и исправить его. -Regular variables like `let timeoutID` don't "survive" between re-renders because every render runs your component (and initializes its variables) from scratch. Should you keep the timeout ID somewhere else? +Обычные переменные, такие как `let timeoutID` не «выживают» между повторными рендерами, потому что каждый рендер запускает компонент (и инициализирует переменные) с нуля. @@ -360,7 +360,7 @@ export default function Chat() { -Whenever your component re-renders (such as when you set state), all local variables get initialized from scratch. This is why you can't save the timeout ID in a local variable like `timeoutID` and then expect another event handler to "see" it in the future. Instead, store it in a ref, which React will preserve between renders. +Каждый раз когда компонент рендерится повторно (например, когда устанавливается новое состояние), все локальные переменные инициализируются с нуля. Поэтому вы не можете сохранить ID таймера в обычную переменную, как `timeoutID` и ожидать, что обработчик сможет «увидеть» её в будущем. Вместо этого сохраните её в реф, который React сохраняет между рендерами. @@ -412,9 +412,9 @@ export default function Chat() { -#### Fix a component failing to re-render {/*fix-a-component-failing-to-re-render*/} +#### Исправьте ошибку при повторном рендере компонента {/*fix-a-component-failing-to-re-render*/} -This button is supposed to toggle between showing "On" and "Off". However, it always shows "Off". What is wrong with this code? Fix it. +Предполагается, что кнопка должна переключаться между отображением «On» и «Off». Но всегда отображается «Off». Что не так с эти кодом? Попробуйте исправить. @@ -438,7 +438,7 @@ export default function Toggle() { -In this example, the current value of a ref is used to calculate the rendering output: `{isOnRef.current ? 'On' : 'Off'}`. This is a sign that this information should not be in a ref, and should have instead been put in state. To fix it, remove the ref and use state instead: +В этом примере текущее значение реф используется для вычисления того, что отобразится на странице: `{isOnRef.current ? 'On' : 'Off'}`. Это признак того, что эти данные не должны хранится в рефе, и вместо этого должны храниться в состоянии. Чтобы исправить, удалите реф и используйте состояние вместо него: @@ -462,17 +462,17 @@ export default function Toggle() { -#### Fix debouncing {/*fix-debouncing*/} +#### Исправьте debouncing {/*fix-debouncing*/} -In this example, all button click handlers are ["debounced".](https://redd.one/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things". +В данном примере все обработчики событий для кнопок являются ["debounced".](https://redd.one/blog/debounce-vs-throttle) Чтобы понять, как это работает, кликните на одну из кнопок. Обратите внимание, что сообщение появляется через секунду. Если нажать на кнопку во время ожидания сообщения, таймер сбросится. Таким образом, если вы продолжите кликать одну и ту же кнопку много раз, сообщение не появится до тех пор, пока не пройдёт секунда _после_ последнего клика. Debouncing позволяет вам установить задержку до тех пор, пока пользователь «не прекратит делать что-то», прежде чем произойдёт какое-то действие. -This example works, but not quite as intended. The buttons are not independent. To see the problem, click one of the buttons, and then immediately click another button. You'd expect that after a delay, you would see both button's messages. But only the last button's message shows up. The first button's message gets lost. +Этот пример работает, но не совсем как было задумано. Кнопки не являются независимыми. Чтобы увидеть проблему, кликните на одну из кнопок и затем кликните на другую кнопку. Мы ожидаем увидеть два сообщения, которые привязаны к каждой кнопке. Но мы увидим только сообщение последней. Сообщение первой кнопки потерялось. -Why are the buttons interfering with each other? Find and fix the issue. +Почему кнопки конфликтуют между собой? Попробуйте найти и исправить проблему. -The last timeout ID variable is shared between all `DebouncedButton` components. This is why clicking one button resets another button's timeout. Can you store a separate timeout ID for each button? +Последний ID таймера используется во всех компонентах `DebouncedButton`. В этом причина того, что клик по одной кнопке сбрасывает таймер другой. Можно ли хранить ID таймера отдельно для каждой из кнопок? @@ -525,7 +525,7 @@ button { display: block; margin: 10px; } -A variable like `timeoutID` is shared between all components. This is why clicking on the second button resets the first button's pending timeout. To fix this, you can keep timeout in a ref. Each button will get its own ref, so they won't conflict with each other. Notice how clicking two buttons fast will show both messages. +Переменная `timeoutID` была использована во всех компонентах. Поэтому клик по второй кнопке сбрасывал таймер ожидания первой. Чтобы это исправить, следует хранить таймер в рефе. Каждая кнопка получит свой реф, и вместе кнопки будут работать корректно. Обратите внимание, что быстрый клик по двум кнопкам покажет оба сообщения. @@ -577,11 +577,11 @@ button { display: block; margin: 10px; } -#### Read the latest state {/*read-the-latest-state*/} +#### Прочитайте самое новое состояние {/*read-the-latest-state*/} -In this example, after you press "Send", there is a small delay before the message is shown. Type "hello", press Send, and then quickly edit the input again. Despite your edits, the alert would still show "hello" (which was the value of state [at the time](/learn/state-as-a-snapshot#state-over-time) the button was clicked). +В данном примере, после нажатия «Send» есть небольшая задержка прежде чем появится сообщение. Введите «hello», нажмите Send и потом снова отредактируйте поле ввода. Несмотря на редактирование, модальное окно все ещё показывает «hello» (эта строка была значением состояния [во время](/learn/state-as-a-snapshot#state-over-time), когда произошёл клик по кнопке). -Usually, this behavior is what you want in an app. However, there may be occasional cases where you want some asynchronous code to read the *latest* version of some state. Can you think of a way to make the alert show the *current* input text rather than what it was at the time of the click? +Как правило, именно такое поведение вам необходимо в вашем приложении. Тем не менее, могут возникнуть случаи, когда будет необходимость получить доступ к самой _последней_ версии состояния в каком-либо асинхронном коде. Можете ли вы найти решение, чтобы модальное окно показывало _текущий_ текст поля ввода вместо состояния, которое сохранилось во время клика? @@ -616,7 +616,7 @@ export default function Chat() { -State works [like a snapshot](/learn/state-as-a-snapshot), so you can't read the latest state from an asynchronous operation like a timeout. However, you can keep the latest input text in a ref. A ref is mutable, so you can read the `current` property at any time. Since the current text is also used for rendering, in this example, you will need *both* a state variable (for rendering), *and* a ref (to read it in the timeout). You will need to update the current ref value manually. +Состояние работает как [снимок](/learn/state-as-a-snapshot), поэтому вы не сможете получить доступ к его последней версии из асинхронного кода, например внутри таймера. Однако, вы можете хранить последнее значение поля ввода в рефе. Реф является мутируемым, поэтому свойство `current` доступно для чтения в любое время. Поскольку, в этом примере, введённый текст также используется для рендера, вам необходимо использовать и *состояние* переменной (для рендера), и *реф* (для чтения внутри таймера). Обновляйте текущий реф вручную. @@ -657,4 +657,4 @@ export default function Chat() { - + \ No newline at end of file diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index dc34eedad..0a5151daa 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -882,7 +882,7 @@ const options2 = { serverUrl: 'https://localhost:1234', roomId: 'music' }; // These are two different objects! console.log(Object.is(options1, options2)); // false -```` +``` **Object and function dependencies can make your Effect re-synchronize more often than you need.** @@ -968,7 +968,7 @@ const roomId2 = 'music'; // These two strings are the same! console.log(Object.is(roomId1, roomId2)); // true -```` +``` Thanks to this fix, the chat no longer re-connects if you edit the input: diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index 84bf904cd..cb5ae5c75 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -1,27 +1,27 @@ --- -title: Render and Commit +title: Рендер и фиксация --- -Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior. +Прежде чем ваши компоненты появятся на экране, они должны быть отрисованы React. Понимая этапы этого процесса, вам будет проще судить о том, как исполняется ваш код, и объяснить его поведение -* What rendering means in React -* When and why React renders a component -* The steps involved in displaying a component on screen -* Why rendering does not always produce a DOM update +* Что означает рендеринг в React. +* Когда и почему React рендерит компонент. +* Этапы отображения компонента на экране. +* Почему рендеринг не всегда приводит к обновлению DOM. -Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps: +Представьте, что ваши компоненты — это повара на кухне, которые составляют вкусные блюда из ингредиентов. Тогда React — это официант, который передает запросы клиентов, а затем подает им их блюда. Этот процесс запроса и подачи пользовательского интерфейса состоит из трех этапов: -1. **Triggering** a render (delivering the guest's order to the kitchen) -2. **Rendering** the component (preparing the order in the kitchen) -3. **Committing** to the DOM (placing the order on the table) +1. **Триггер** рендеринга (передача заказа гостя на кухню) +2. **Рендеринг** компонента (приготовление заказа на кухне) +3. **Фиксация** в DOM (подача блюда на стол) @@ -29,16 +29,16 @@ Imagine that your components are cooks in the kitchen, assembling tasty dishes f -## Step 1: Trigger a render {/*step-1-trigger-a-render*/} +## Часть 1: Триггер рендера {/*step-1-trigger-a-render*/} -There are two reasons for a component to render: +Рендер компонента происходит по двум причинам: -1. It's the component's **initial render.** -2. The component's (or one of its ancestors') **state has been updated.** +1. Это его **начальный рендеринг.** +2. Его **состояние** (или состояние его родителя) **был обновлён.** -### Initial render {/*initial-render*/} +### Начальный рендер {/*initial-render*/} -When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it's done by calling [`createRoot`](/reference/react-dom/client/createRoot) with the target DOM node, and then calling its `render` method with your component: +Когда ваше приложение запускается, вам необходимо запустить начальный рендеринг. Фреймворки и песочницы иногда скрывают этот код, но это делается вызовом функции [`createRoot`](/reference/react-dom/client/createRoot) с целевым DOM-узлом, а затем вызовом его метода `render` c вашим компонентом: @@ -63,11 +63,11 @@ export default function Image() { -Try commenting out the `root.render()` call and see the component disappear! +Попробуйте закомментировать вызов `root.render()` и увидите, как компонент исчезнет! -### Re-renders when state updates {/*re-renders-when-state-updates*/} +### Ре-рендер, когда состояние обновляется {/*re-renders-when-state-updates*/} -Once the component has been initially rendered, you can trigger further renders by updating its state with the [`set` function.](/reference/react/useState#setstate) Updating your component's state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.) +После того как компонент был первоначально отрендерен, вы можете инициировать последующие рендеры, обновляя его состояние с помощью функции [`set`](/reference/react/useState#setstate) Обновление состояние компонента автоматически ставит его в очередь на рендер. (Вы можете представить это как посетитель ресторана, который после первого заказа заказывает чай, десерт и всевозможные вещи, в зависимости от состояния жажды или голода). @@ -75,16 +75,16 @@ Once the component has been initially rendered, you can trigger further renders -## Step 2: React renders your components {/*step-2-react-renders-your-components*/} +## Часть 2: React рендерит ваш компонент {/*step-2-react-renders-your-components*/} -After you trigger a render, React calls your components to figure out what to display on screen. **"Rendering" is React calling your components.** +После запуска рендера React вызывает ваши компоненты, чтобы определить, что отобразить на экране. **«Рендеринг» — это обращение React к вашим компонентам*. -* **On initial render,** React will call the root component. -* **For subsequent renders,** React will call the function component whose state update triggered the render. +* **На начальном рендере,** React вызовет корневой компонент. +* **Для последующих ре-рендеров** React вызовет функцию компонента, где обновился стейт и выполнит его ре-рендер. -This process is recursive: if the updated component returns some other component, React will render _that_ component next, and if that component also returns something, it will render _that_ component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen. +Этот процесс рекурсивен: если обновленный компонент возвращает какой-то другой компонент, React будет рендерить _этот_ компонент следующим, и если этот компонент тоже что-то возвращает, он будет рендерить _этот_ компонент следующим, и так далее. Этот процесс будет продолжаться до тех пор, пока не останется вложенных компонентов и React не будет точно знать, что должно быть отображено на экране. -In the following example, React will call `Gallery()` and `Image()` several times: +В следующем примере React вызовет `Gallery()` и `Image()` несколько раз: @@ -124,36 +124,36 @@ img { margin: 0 10px 10px 0; } -* **During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `
    `, `

    `, and three `` tags. -* **During a re-render,** React will calculate which of their properties, if any, have changed since the previous render. It won't do anything with that information until the next step, the commit phase. +* **На начальном рендере,** React [создаст DOM ноды](https://developer.mozilla.org/docs/Web/API/Document/createElement) для `
    `, `

    `, и трёзх `` тегов. +* **Во время повторного ре-рендеринга,** React вычислит, какие из их свойств, если таковые имеются, изменились с момента предыдущего рендеринга. Он ничего не будет делать с этой информацией до следующего шага, фазы фиксации. -Rendering must always be a [pure calculation](/learn/keeping-components-pure): +Рендеринг всегда должен быть [чистым вычислением.](/learn/keeping-components-pure): -* **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!) -* **It minds its own business.** It should not change any objects or variables that existed before rendering. (One order should not change anyone else's order.) +* **Одни и те же входные данные, один и тот же результат.** При одинаковых входящих данных компонент всегда должен возвращать один и тот же JSX. (Когда кто-то заказывает салат с помидорами, то он не должен получить салат с луком!) +* **Занимается только своей задачей.** Не изменять объекты или переменные, существовавшие до рендеринга. (Один заказ не должен влиять на другой заказ). -Otherwise, you can encounter confusing bugs and unpredictable behavior as your codebase grows in complexity. When developing in "Strict Mode", React calls each component's function twice, which can help surface mistakes caused by impure functions. +В противном случае вы можете столкнуться с непонятными ошибками и непредсказуемым поведением по мере роста сложности вашей кодовой базы. При разработке в "строгом режиме" React вызывает функцию каждого компонента дважды, что может помочь выявить ошибки, вызванные нечистыми функциями. -#### Optimizing performance {/*optimizing-performance*/} +#### Оптимизируем производительность {/*optimizing-performance*/} -The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the [Performance](https://reactjs.org/docs/optimizing-performance.html) section. **Don't optimize prematurely!** +Поведение по умолчанию — рендеринг всех компонентов, вложенных в обновленный компонент, — не является оптимальным с точки зрения производительности, если обновляемый компонент находится очень высоко в дереве. Если вы столкнулись с проблемой производительности, есть несколько способов ее решения, описанных в разделе [Производительность](https://reactjs.org/docs/optimizing-performance.html). **Не оптимизируйте преждевременно!** -## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/} +## Часть 3: React фиксирует изменения в DOM {/*step-3-react-commits-changes-to-the-dom*/} -After rendering (calling) your components, React will modify the DOM. +После рендеринга (вызова) ваших компонентов React модифицирует DOM. -* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen. -* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output. +* **На начальном рендере,** React использует [`appendChild()`](https://developer.mozilla.org/ru/docs/Web/API/Node/appendChild) DOM API, чтобы вставить все DOM ноды, которые он создал на экране. +* **Для ре-рендеров,** React будет применять минимально необходимые операции (вычисляемые во время рендеринга!), чтобы DOM соответствовал последнему выводу рендеринга. -**React only changes the DOM nodes if there's a difference between renders.** For example, here is a component that re-renders with different props passed from its parent every second. Notice how you can add some text into the ``, updating its `value`, but the text doesn't disappear when the component re-renders: +**React изменяет узлы DOM только если есть разница между рендерами.** Например, вот компонент, который рендерится с разными пропсами, передаваемыми от родителя каждую секунду. Обратите внимание, как вы можете добавить некоторый текст в ``, обновляя его `значение`, но текст не исчезает при повторном рендеринге компонента: @@ -193,21 +193,21 @@ export default function App() { -This works because during this last step, React only updates the content of `

    ` with the new `time`. It sees that the `` appears in the JSX in the same place as last time, so React doesn't touch the ``—or its `value`! -## Epilogue: Browser paint {/*epilogue-browser-paint*/} +Это работает, потому что в предыдущий раз React обновил значение `

    ` с новым `time`. Он видит, что `` появляется в том же месте JSX, поэтому React не трогает ``— или его `value`! +## Заключительная часть: Браузерная отрисовка {/*epilogue-browser-paint*/} -After rendering is done and React updated the DOM, the browser will repaint the screen. Although this process is known as "browser rendering", we'll refer to it as "painting" to avoid confusion throughout the docs. +После того как рендеринг завершен и React обновил DOM, браузер перерисовывает экран. Хотя этот процесс известен как «браузерный рендеринг», мы будем называть его «рисованием», чтобы избежать путаницы в документации. -* Any screen update in a React app happens in three steps: - 1. Trigger - 2. Render - 3. Commit -* You can use Strict Mode to find mistakes in your components -* React does not touch the DOM if the rendering result is the same as last time +* Любое обновление экрана в приложении React происходит в три этапа: + 1. Триггер + 2. Рендеринг + 3. Фиксация +* Вы можете использовать строгий режим для поиска ошибок в ваших компонентах. +* React не трогает DOM, если результат рендеринга такой же, как и в прошлый раз. diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index 45b60240b..99e09d624 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -1,74 +1,74 @@ --- -title: Rendering Lists +title: Рендер списков --- -You will often want to display multiple similar components from a collection of data. You can use the [JavaScript array methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#) to manipulate an array of data. On this page, you'll use [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) and [`map()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) with React to filter and transform your array of data into an array of components. +Часто возникает необходимость отображения ряда схожих компонентов на основе набора данных. Для этого можно воспользоваться [методами массивов JavaScript](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array) для манипулирования массивом данных. На этой странице вы будете использовать [`filter()`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) и [`map()`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/map) с React для фильтрации и преобразования массива данных в массив компонентов. -* How to render components from an array using JavaScript's `map()` -* How to render only specific components using JavaScript's `filter()` -* When and why to use React keys +* Как рендерить компоненты из массива, используя `map()` +* Как рендерить только определенные компоненты, используя `filter()` +* Когда и зачем использовать React-ключи -## Rendering data from arrays {/*rendering-data-from-arrays*/} +## Рендер данных из массивов {/*rendering-data-from-arrays*/} -Say that you have a list of content. +Предположим, у вас есть список контента. ```js
      -
    • Creola Katherine Johnson: mathematician
      • -
    • Mario José Molina-Pasquel Henríquez: chemist
      • -
    • Mohammad Abdus Salam: physicist
      • -
    • Percy Lavon Julian: chemist
      • -
    • Subrahmanyan Chandrasekhar: astrophysicist
      • +
    • Креола Кэтрин Джонсон (Creola Katherine Johnson): математик
      • +
    • Марио Молина (Mario José Molina-Pasquel Henríquez): химик
      • +
    • Мухаммад Абдус Салам (Mohammad Abdus Salam): физик
      • +
    • Перси Джулиан (Percy Lavon Julian): химик
      • +
    • Субраманьян Чандрасекар (Subrahmanyan Chandrasekhar): астрофизик
    ``` -The only difference among those list items is their contents, their data. You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to render lists of components from them. +Единственная разница между этими элементами списка - их содержимое, их данные. При построении интерфейсов часто нужно показывать несколько экземпляров одного и того же компонента, используя различные данные: от списков комментариев до галерей профилей. В таких ситуациях вы можете хранить эти данные в объектах и массивах JavaScript и использовать методы, такие как [`map()`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/map) и [`filter()`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), чтобы рендерить списки компонентов с данными из них. -Here’s a short example of how to generate a list of items from an array: +Вот короткий пример того, как сгенерировать список элементов из массива: -1. **Move** the data into an array: +1. **Переместите** данные в массив: ```js const people = [ - 'Creola Katherine Johnson: mathematician', - 'Mario José Molina-Pasquel Henríquez: chemist', - 'Mohammad Abdus Salam: physicist', - 'Percy Lavon Julian: chemist', - 'Subrahmanyan Chandrasekhar: astrophysicist' + 'Креола Кэтрин Джонсон (Creola Katherine Johnson): математик', + 'Марио Молина (Mario José Molina-Pasquel Henríquez): химик', + 'Мухаммад Абдус Салам (Mohammad Abdus Salam): физик', + 'Перси Джулиан (Percy Lavon Julian): химик', + 'Субраманьян Чандрасекар (Subrahmanyan Chandrasekhar): астрофизик' ]; ``` -2. **Map** the `people` members into a new array of JSX nodes, `listItems`: +2. **Преобразуйте** элементы массива `people` в новый массив JSX-узлов, `listItems`, используя метод `map()`: ```js const listItems = people.map(person =>
  • {person}
    • ); ``` -3. **Return** `listItems` from your component wrapped in a `
      `: +3. **Верните** `listItems` из вашего компонента, обернув их в тег `
        `: ```js return
          {listItems}
        ; ``` -Here is the result: +Вот что должно получиться в итоге: ```js const people = [ - 'Creola Katherine Johnson: mathematician', - 'Mario José Molina-Pasquel Henríquez: chemist', - 'Mohammad Abdus Salam: physicist', - 'Percy Lavon Julian: chemist', - 'Subrahmanyan Chandrasekhar: astrophysicist' + 'Креола Кэтрин Джонсон (Creola Katherine Johnson): математик', + 'Марио Молина (Mario José Molina-Pasquel Henríquez): химик', + 'Мухаммад Абдус Салам (Mohammad Abdus Salam): физик', + 'Перси Джулиан (Percy Lavon Julian): химик', + 'Субраманьян Чандрасекар (Subrahmanyan Chandrasekhar): астрофизик' ]; export default function List() { @@ -85,7 +85,7 @@ li { margin-bottom: 10px; } -Notice the sandbox above displays a console error: +Обратите внимание, что в консоли песочницы отображается ошибка: @@ -93,47 +93,47 @@ Warning: Each child in a list should have a unique "key" prop. -You'll learn how to fix this error later on this page. Before we get to that, let's add some structure to your data. +Вы узнаете о том, как исправить эту ошибку позже на этой странице. Прежде чем перейти к этому, давайте добавим некоторую структуру к данным. -## Filtering arrays of items {/*filtering-arrays-of-items*/} +## Фильтрация массивов элементов {/*filtering-arrays-of-items*/} -This data can be structured even more. +Структуру этих данных можно улучшить. ```js const people = [{ id: 0, - name: 'Creola Katherine Johnson', - profession: 'mathematician', + name: 'Креола Кэтрин Джонсон (Creola Katherine Johnson)', + profession: 'математик', }, { id: 1, - name: 'Mario José Molina-Pasquel Henríquez', - profession: 'chemist', + name: 'Марио Молина (Mario José Molina-Pasquel Henríquez)', + profession: 'химик', }, { id: 2, - name: 'Mohammad Abdus Salam', - profession: 'physicist', + name: 'Мухаммад Абдус Салам (Mohammad Abdus Salam)', + profession: 'физик', }, { - name: 'Percy Lavon Julian', - profession: 'chemist', + name: 'Перси Джулиан (Percy Lavon Julian)', + profession: 'химик', }, { - name: 'Subrahmanyan Chandrasekhar', - profession: 'astrophysicist', + name: 'Субраманьян Чандрасекар (Subrahmanyan Chandrasekhar)', + profession: 'астрофизик', }]; ``` -Let's say you want a way to only show people whose profession is `'chemist'`. You can use JavaScript's `filter()` method to return just those people. This method takes an array of items, passes them through a “test” (a function that returns `true` or `false`), and returns a new array of only those items that passed the test (returned `true`). +Допустим, вам нужен способ отображать только людей, чья профессия `'химик'`. Вы можете использовать метод JavaScript `filter()` чтобы вернуть только этих людей. Этот метод принимает массив элементов, пропускает их через «тест» (функция, которая возвращает `true` или `false`) и возвращает новый массив только из тех элементов, которые прошли тест (вернули `true`). -You only want the items where `profession` is `'chemist'`. The "test" function for this looks like `(person) => person.profession === 'chemist'`. Here's how to put it together: +В нашем случае мы хотим отобразить только те элементы, где `profession` является `'химик'`. «Тест» для этого выглядит так: `(person) => person.profession === 'химик'`. Вот как собрать все воедино: -1. **Create** a new array of just “chemist” people, `chemists`, by calling `filter()` on the `people` filtering by `person.profession === 'chemist'`: +1. **Создайте** новый массив только из людей с профессией `'chemist'`, вызвав `filter()` на `people` для фильтрации по `person.profession === 'химик'`: ```js const chemists = people.filter(person => - person.profession === 'chemist' + person.profession === 'химик' ); ``` -2. Now **map** over `chemists`: +2. Теперь **преобразуйте** элементы массива `chemists`: ```js {1,13} const listItems = chemists.map(person => @@ -144,14 +144,14 @@ const listItems = chemists.map(person => />

        {person.name}: - {' ' + person.profession + ' '} - known for {person.accomplishment} + {' ' + person.profession}. + Достижение: {person.accomplishment}

        ); ``` -3. Lastly, **return** the `listItems` from your component: +3. Наконец, **верните** `listItems` из вашего компонента: ```js return
          {listItems}
        ; @@ -165,7 +165,7 @@ import { getImageUrl } from './utils.js'; export default function List() { const chemists = people.filter(person => - person.profession === 'chemist' + person.profession === 'химик' ); const listItems = chemists.map(person =>
      • @@ -175,8 +175,8 @@ export default function List() { />

        {person.name}: - {' ' + person.profession + ' '} - known for {person.accomplishment} + {' ' + person.profession}. + Достижение: {person.accomplishment}

        • ); @@ -187,33 +187,33 @@ export default function List() { ```js data.js export const people = [{ id: 0, - name: 'Creola Katherine Johnson', - profession: 'mathematician', - accomplishment: 'spaceflight calculations', + name: 'Креола Кэтрин Джонсон (Creola Katherine Johnson)', + profession: 'математик', + accomplishment: 'расчёты для космических полетов', imageId: 'MK3eW3A' }, { id: 1, - name: 'Mario José Molina-Pasquel Henríquez', - profession: 'chemist', - accomplishment: 'discovery of Arctic ozone hole', + name: 'Марио Молина (Mario José Molina-Pasquel Henríquez)', + profession: 'химик', + accomplishment: 'обнаружение дыр в озоновом слое', imageId: 'mynHUSa' }, { id: 2, - name: 'Mohammad Abdus Salam', - profession: 'physicist', - accomplishment: 'electromagnetism theory', + name: 'Мухаммад Абдус Салам (Mohammad Abdus Salam)', + profession: 'физик', + accomplishment: 'открытие теории электромагнетизма', imageId: 'bE7W1ji' }, { id: 3, - name: 'Percy Lavon Julian', - profession: 'chemist', - accomplishment: 'pioneering cortisone drugs, steroids and birth control pills', + name: 'Перси Джулиан (Percy Lavon Julian)', + profession: 'химик', + accomplishment: 'изобретение препаратов с кортизоном, стероидов и противозачаточных таблеток', imageId: 'IOjWm71' }, { id: 4, - name: 'Subrahmanyan Chandrasekhar', - profession: 'astrophysicist', - accomplishment: 'white dwarf star mass calculations', + name: 'Субраманьян Чандрасекар (Subrahmanyan Chandrasekhar)', + profession: 'астрофизик', + accomplishment: 'расчёт массы белого карлика', imageId: 'lrWQx8l' }]; ``` @@ -244,29 +244,30 @@ img { width: 100px; height: 100px; border-radius: 50%; } -Arrow functions implicitly return the expression right after `=>`, so you didn't need a `return` statement: +Стрелочные функции неявно возвращают результат выражения сразу после `=>`, поэтому использовать ключевое слово `return` не нужно: ```js const listItems = chemists.map(person => -
      • ...
        • // Implicit return! +
      • ...
        • // Неявный возврат! ); ``` -However, **you must write `return` explicitly if your `=>` is followed by a `{` curly brace!** +Однако, **вы должны явно вызвать `return`, если после `=>` следует фигурная скобка!** + ```js -const listItems = chemists.map(person => { // Curly brace +const listItems = chemists.map(person => { // Фигурная скобка return
      • ...
        • ; }); ``` -Arrow functions containing `=> {` are said to have a ["block body".](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body) They let you write more than a single line of code, but you *have to* write a `return` statement yourself. If you forget it, nothing gets returned! +Стрелочные функции, содержащие `=> {` считаются функциями с ["блочной формой".](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions#%D1%82%D0%B5%D0%BB%D0%BE_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%B8) Они позволяют писать более одной строки кода, но при этом *необходимо* явно вызвать `return`. Если вы забудете это сделать, функция ничего не вернет!         -## Keeping list items in order with `key` {/*keeping-list-items-in-order-with-key*/} +## Сохранение порядка элементов списка с помощью `key` {/*keeping-list-items-in-order-with-key*/} -Notice that all the sandboxes above show an error in the console: +Заметьте, что все песочницы выше показывают ошибку в консоли: @@ -274,7 +275,7 @@ Warning: Each child in a list should have a unique "key" prop. -You need to give each array item a `key` -- a string or a number that uniquely identifies it among other items in that array: +Чтобы решить эту ошибку необходимо присвоить каждому элементу массива ключ (`key`) -- строку или число, которое уникально отличает данный элемент среди других элементов этого массива: ```js
      • ...
        • @@ -282,13 +283,13 @@ You need to give each array item a `key` -- a string or a number that uniquely i -JSX elements directly inside a `map()` call always need keys! +JSX-элементы, созданные внутри `map()` всегда должны иметь ключи! -Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen `key` helps React infer what exactly has happened, and make the correct updates to the DOM tree. +Ключи позволяют React узнать к какому элементу массива соответствует каждый компонент, чтобы позже сопоставить их. Это важно, если элементы массива могут перемещаться (например, из-за сортировки), добавляться или удаляться. Хорошо выбранный ключ помогает React понять, какое именно изменение произошло, и правильно обновить DOM дерево. -Rather than generating keys on the fly, you should include them in your data: +Вместо генерации ключей на лету, вы должны включать их в свои данные: @@ -305,8 +306,8 @@ export default function List() { />

        {person.name} - {' ' + person.profession + ' '} - known for {person.accomplishment} + {' ' + person.profession}. + Достижение: {person.accomplishment}

        ); @@ -316,34 +317,34 @@ export default function List() { ```js data.js active export const people = [{ - id: 0, // Used in JSX as a key - name: 'Creola Katherine Johnson', - profession: 'mathematician', - accomplishment: 'spaceflight calculations', + id: 0, // Используется в JSX в качестве ключа + name: 'Креола Кэтрин Джонсон (Creola Katherine Johnson)', + profession: 'математик', + accomplishment: 'расчёты для космических полетов', imageId: 'MK3eW3A' }, { - id: 1, // Used in JSX as a key - name: 'Mario José Molina-Pasquel Henríquez', - profession: 'chemist', - accomplishment: 'discovery of Arctic ozone hole', + id: 1, // Используется в JSX в качестве ключа + name: 'Марио Молина (Mario José Molina-Pasquel Henríquez)', + profession: 'химик', + accomplishment: 'обнаружение дыр в озоновом слое', imageId: 'mynHUSa' }, { - id: 2, // Used in JSX as a key - name: 'Mohammad Abdus Salam', - profession: 'physicist', - accomplishment: 'electromagnetism theory', + id: 2, // Используется в JSX в качестве ключа + name: 'Мухаммад Абдус Салам (Mohammad Abdus Salam)', + profession: 'физик', + accomplishment: 'открытие теории электромагнетизма', imageId: 'bE7W1ji' }, { - id: 3, // Used in JSX as a key - name: 'Percy Lavon Julian', - profession: 'chemist', - accomplishment: 'pioneering cortisone drugs, steroids and birth control pills', + id: 3, // Используется в JSX в качестве ключа + name: 'Перси Джулиан (Percy Lavon Julian)', + profession: 'химик', + accomplishment: 'изобретение препаратов с кортизоном, стероидов и противозачаточных таблеток', imageId: 'IOjWm71' }, { - id: 4, // Used in JSX as a key - name: 'Subrahmanyan Chandrasekhar', - profession: 'astrophysicist', - accomplishment: 'white dwarf star mass calculations', + id: 4, // Используется в JSX в качестве ключа + name: 'Субраманьян Чандрасекар (Subrahmanyan Chandrasekhar)', + profession: 'астрофизик', + accomplishment: 'расчёт массы белого карлика', imageId: 'lrWQx8l' }]; ``` @@ -374,11 +375,11 @@ img { width: 100px; height: 100px; border-radius: 50%; } -#### Displaying several DOM nodes for each list item {/*displaying-several-dom-nodes-for-each-list-item*/} +#### Отображение нескольких DOM-узлов для каждого элемента списка {/*displaying-several-dom-nodes-for-each-list-item*/} -What do you do when each item needs to render not one, but several DOM nodes? +Как поступить, если каждый элемент должен отображать не один, а несколько DOM-узлов? -The short [`<>...` Fragment](/reference/react/Fragment) syntax won't let you pass a key, so you need to either group them into a single `
        `, or use the slightly longer and [more explicit `` syntax:](/reference/react/Fragment#rendering-a-list-of-fragments) +Краткий синтаксис [`<>...` фрагмента](/reference/react/Fragment) не позволяет передавать ключ, поэтому нужно либо объединить их в один `
        `, либо использовать чуть более длинный и [более явный ``:](/reference/react/Fragment#rendering-a-list-of-fragments) ```js import { Fragment } from 'react'; @@ -393,46 +394,47 @@ const listItems = people.map(person => ); ``` -Fragments disappear from the DOM, so this will produce a flat list of `

        `, `

        `, `

        `, `

        `, and so on. +Фрагменты исчезают из DOM, поэтому это приведет к плоскому списку элементов `

        `, `

        `, `

        `, `

        `, и т.д. -### Where to get your `key` {/*where-to-get-your-key*/} +### Откуда взять ключ {/*where-to-get-your-key*/} + +Разные источники данных предоставляют разные источники для ключей: -Different sources of data provide different sources of keys: +* **Данные из базы данных:** Если ваши данные приходят с базы данных, то вы можете использовать ключи/ID с базы данных, которые по своей природе уникальны. -* **Data from a database:** If your data is coming from a database, you can use the database keys/IDs, which are unique by nature. -* **Locally generated data:** If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) or a package like [`uuid`](https://www.npmjs.com/package/uuid) when creating items. +* **Локальные данные:** Если ваши данные генерируются и хранятся локально (к примеру, заметки в приложении для ведений заметок), используйте инкрементный счетчик, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) или пакет [`uuid`](https://www.npmjs.com/package/uuid) при создании элементов. -### Rules of keys {/*rules-of-keys*/} +### Правила ключей {/*rules-of-keys*/} -* **Keys must be unique among siblings.** However, it’s okay to use the same keys for JSX nodes in _different_ arrays. -* **Keys must not change** or that defeats their purpose! Don't generate them while rendering. +* **Ключи должны быть уникальны среди своих соседних элементов.** Однако, можно использовать одинаковые ключи для JSX-узлов в _разных_ массивах. +* **Ключи не должны меняться**, так как это лишает их смысла! Не генерируйте их во время рендеринга. -### Why does React need keys? {/*why-does-react-need-keys*/} +### Почему React нужны ключи? {/*why-does-react-need-keys*/} -Imagine that files on your desktop didn't have names. Instead, you'd refer to them by their order -- the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on. +Представьте что у файлов на вашем рабочем столе не было бы имен. Взамен, вы бы ссылались на них по их порядку -- первый файл, второй файл, и т.д. Возможно к этому и можно привыкнуть, но когда вы удалите какой-либо файл, порядок изменится и все станет запутанным. Второй файл станет первым, третий файл станет вторым, и т. д. -File names in a folder and JSX keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the _position_ changes due to reordering, the `key` lets React identify the item throughout its lifetime. +Названия файлов в папке и JSX ключи в массиве имеют схожую цель. Они позволяют нам отличать элементы от их других элементов в массиве. А хорошо выбранный ключ предоставляет больше информации, чем позиция в массиве. Даже если _позиция_ изменится из-за смены порядка, `key` позволит React идентифицировать элемент на протяжении всего существования элемента. -You might be tempted to use an item's index in the array as its key. In fact, that's what React will use if you don't specify a `key` at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs. +Возможно вам захочется использовать индекс элемента в массиве в качестве ключа. В действительности, это то, что React будет использовать, если вы не укажете `key`. Но порядок, в котором вы рендерите элементы, может поменяться со временем, если какой-либо элемент будет вставлен, удален или если массив будет переупорядочен. Индекс в качестве ключа часто приводит к коварным и сбивающим с толку ошибкам. -Similarly, do not generate keys on the fly, e.g. with `key={Math.random()}`. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data. +Аналогично, не генерируйте ключи на лету, например, с помощью `key={Math.random()}`. Это приведет к тому, что ключи никогда не будут совпадать между рендерами, что приведет к пересозданию всех ваших компонентов и DOM при каждом рендере. Это не только медленно, но также приведет к потере любых данных введённых пользователем внутри элементов списка. Вместо этого используйте стабильный ID, основанный на данных. -Note that your components won't receive `key` as a prop. It's only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: ``. +Заметьте, что ваши компоненты не получат `key` в качестве пропа. Он используется только как подсказка для React. Если ваш компонент нуждается в ID, вы должны передать его как отдельный проп: ``.. -On this page you learned: +На этой странице вы узнали: -* How to move data out of components and into data structures like arrays and objects. -* How to generate sets of similar components with JavaScript's `map()`. -* How to create arrays of filtered items with JavaScript's `filter()`. -* Why and how to set `key` on each component in a collection so React can keep track of each of them even if their position or data changes. +* Как перенести данные из компонентов в структуры данных, такие как массивы и объекты. +* Как создавать коллекции схожих компонентов с помощью JavaScript `map()`. +* Как создавать массивы отфильтрованных элементов с помощью JavaScript `filter()`. +* Зачем и как присваивать ключ каждому компоненту в коллекции, чтобы React мог отслеживать изменения каждого из них. @@ -440,11 +442,11 @@ On this page you learned: -#### Splitting a list in two {/*splitting-a-list-in-two*/} +#### Разделение списка на два {/*splitting-a-list-in-two*/} -This example shows a list of all people. +Этот пример показывает список всех людей в `people`. -Change it to show two separate lists one after another: **Chemists** and **Everyone Else.** Like previously, you can determine whether a person is a chemist by checking if `person.profession === 'chemist'`. +Поменяйте код так, чтобы он показывал два списка один за другим: **Химики** и **Все остальные**. Как и раньше, вы можете определить, является ли человек химиком, проверив `person.profession === 'химик'`. @@ -461,14 +463,14 @@ export default function List() { />

        {person.name}: - {' ' + person.profession + ' '} - known for {person.accomplishment} + {' ' + person.profession}. + Достижение: {person.accomplishment}

        ); return (
        -

        Scientists

        +

        Ученые

          {listItems}
        ); @@ -478,33 +480,33 @@ export default function List() { ```js data.js export const people = [{ id: 0, - name: 'Creola Katherine Johnson', - profession: 'mathematician', - accomplishment: 'spaceflight calculations', + name: 'Креола Кэтрин Джонсон (Creola Katherine Johnson)', + profession: 'математик', + accomplishment: 'расчёты для космических полетов', imageId: 'MK3eW3A' }, { id: 1, - name: 'Mario José Molina-Pasquel Henríquez', - profession: 'chemist', - accomplishment: 'discovery of Arctic ozone hole', + name: 'Марио Молина (Mario José Molina-Pasquel Henríquez)', + profession: 'химик', + accomplishment: 'обнаружение дыр в озоновом слое', imageId: 'mynHUSa' }, { id: 2, - name: 'Mohammad Abdus Salam', - profession: 'physicist', - accomplishment: 'electromagnetism theory', + name: 'Мухаммад Абдус Салам (Mohammad Abdus Salam)', + profession: 'физик', + accomplishment: 'открытие теории электромагнетизма', imageId: 'bE7W1ji' }, { id: 3, - name: 'Percy Lavon Julian', - profession: 'chemist', - accomplishment: 'pioneering cortisone drugs, steroids and birth control pills', + name: 'Перси Джулиан (Percy Lavon Julian)', + profession: 'химик', + accomplishment: 'изобретение препаратов с кортизоном, стероидов и противозачаточных таблеток', imageId: 'IOjWm71' }, { id: 4, - name: 'Subrahmanyan Chandrasekhar', - profession: 'astrophysicist', - accomplishment: 'white dwarf star mass calculations', + name: 'Субраманьян Чандрасекар (Subrahmanyan Chandrasekhar)', + profession: 'астрофизик', + accomplishment: 'расчёт массы белого карлика', imageId: 'lrWQx8l' }]; ``` @@ -535,7 +537,7 @@ img { width: 100px; height: 100px; border-radius: 50%; } -You could use `filter()` twice, creating two separate arrays, and then `map` over both of them: +Вы можете использовать `filter()` дважды, создав два отдельных массива, а затем использовать `map()` на обоих: @@ -545,15 +547,15 @@ import { getImageUrl } from './utils.js'; export default function List() { const chemists = people.filter(person => - person.profession === 'chemist' + person.profession === 'химик' ); const everyoneElse = people.filter(person => - person.profession !== 'chemist' + person.profession !== 'химик' ); return (
        -

        Scientists

        -

        Chemists

        +

        Ученые

        +

        Химики

          {chemists.map(person =>
        • @@ -563,13 +565,13 @@ export default function List() { />

          {person.name}: - {' ' + person.profession + ' '} - known for {person.accomplishment} + {' ' + person.profession}. + Достижение: {person.accomplishment}

          • )}
        -

        Everyone Else

        +

        Все остальные

          {everyoneElse.map(person =>
        • @@ -579,8 +581,8 @@ export default function List() { />

          {person.name}: - {' ' + person.profession + ' '} - known for {person.accomplishment} + {' ' + person.profession}. + Достижение: {person.accomplishment}

          • )} @@ -593,33 +595,33 @@ export default function List() { ```js data.js export const people = [{ id: 0, - name: 'Creola Katherine Johnson', - profession: 'mathematician', - accomplishment: 'spaceflight calculations', + name: 'Креола Кэтрин Джонсон (Creola Katherine Johnson)', + profession: 'математик', + accomplishment: 'расчёты для космических полетов', imageId: 'MK3eW3A' }, { id: 1, - name: 'Mario José Molina-Pasquel Henríquez', - profession: 'chemist', - accomplishment: 'discovery of Arctic ozone hole', + name: 'Марио Молина (Mario José Molina-Pasquel Henríquez)', + profession: 'химик', + accomplishment: 'обнаружение дыр в озоновом слое', imageId: 'mynHUSa' }, { id: 2, - name: 'Mohammad Abdus Salam', - profession: 'physicist', - accomplishment: 'electromagnetism theory', + name: 'Мухаммад Абдус Салам (Mohammad Abdus Salam)', + profession: 'физик', + accomplishment: 'открытие теории электромагнетизма', imageId: 'bE7W1ji' }, { id: 3, - name: 'Percy Lavon Julian', - profession: 'chemist', - accomplishment: 'pioneering cortisone drugs, steroids and birth control pills', + name: 'Перси Джулиан (Percy Lavon Julian)', + profession: 'химик', + accomplishment: 'изобретение препаратов с кортизоном, стероидов и противозачаточных таблеток', imageId: 'IOjWm71' }, { id: 4, - name: 'Subrahmanyan Chandrasekhar', - profession: 'astrophysicist', - accomplishment: 'white dwarf star mass calculations', + name: 'Субраманьян Чандрасекар (Subrahmanyan Chandrasekhar)', + profession: 'астрофизик', + accomplishment: 'расчёт массы белого карлика', imageId: 'lrWQx8l' }]; ``` @@ -648,9 +650,9 @@ img { width: 100px; height: 100px; border-radius: 50%; } -In this solution, the `map` calls are placed directly inline into the parent `
            ` elements, but you could introduce variables for them if you find that more readable. +В данном решении, вызовы `map` помещены непосредственно в родительские элементы `
              `, но вы можете вынести их в отдельные переменные, если cчитаете это более читабельным. -There is still a bit duplication between the rendered lists. You can go further and extract the repetitive parts into a `` component: +Между отображаемыми списками все еще существует небольшое дублирование. Вы можете пойти дальше и извлечь повторяющиеся части в компонент ``: @@ -671,8 +673,8 @@ function ListSection({ title, people }) { />

              {person.name}: - {' ' + person.profession + ' '} - known for {person.accomplishment} + {' ' + person.profession}. + Достижение: {person.accomplishment}

              )} @@ -683,20 +685,20 @@ function ListSection({ title, people }) { export default function List() { const chemists = people.filter(person => - person.profession === 'chemist' + person.profession === 'химик' ); const everyoneElse = people.filter(person => - person.profession !== 'chemist' + person.profession !== 'химик' ); return (

              Scientists

              @@ -707,33 +709,33 @@ export default function List() { ```js data.js export const people = [{ id: 0, - name: 'Creola Katherine Johnson', - profession: 'mathematician', - accomplishment: 'spaceflight calculations', + name: 'Креола Кэтрин Джонсон (Creola Katherine Johnson)', + profession: 'математик', + accomplishment: 'расчёты для космических полетов', imageId: 'MK3eW3A' }, { id: 1, - name: 'Mario José Molina-Pasquel Henríquez', - profession: 'chemist', - accomplishment: 'discovery of Arctic ozone hole', + name: 'Марио Молина (Mario José Molina-Pasquel Henríquez)', + profession: 'химик', + accomplishment: 'обнаружение дыр в озоновом слое', imageId: 'mynHUSa' }, { id: 2, - name: 'Mohammad Abdus Salam', - profession: 'physicist', - accomplishment: 'electromagnetism theory', + name: 'Мухаммад Абдус Салам (Mohammad Abdus Salam)', + profession: 'физик', + accomplishment: 'открытие теории электромагнетизма', imageId: 'bE7W1ji' }, { id: 3, - name: 'Percy Lavon Julian', - profession: 'chemist', - accomplishment: 'pioneering cortisone drugs, steroids and birth control pills', + name: 'Перси Джулиан (Percy Lavon Julian)', + profession: 'химик', + accomplishment: 'изобретение препаратов с кортизоном, стероидов и противозачаточных таблеток', imageId: 'IOjWm71' }, { id: 4, - name: 'Subrahmanyan Chandrasekhar', - profession: 'astrophysicist', - accomplishment: 'white dwarf star mass calculations', + name: 'Субраманьян Чандрасекар (Subrahmanyan Chandrasekhar)', + profession: 'астрофизик', + accomplishment: 'расчёт массы белого карлика', imageId: 'lrWQx8l' }]; ``` @@ -762,9 +764,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }               -A very attentive reader might notice that with two `filter` calls, we check each person's profession twice. Checking a property is very fast, so in this example it's fine. If your logic was more expensive than that, you could replace the `filter` calls with a loop that manually constructs the arrays and checks each person once. +Очень внимательный читатель мог бы заметить, что при двух вызовах `filter` мы дважды проверяем профессию каждого человека. Проверка свойства происходит очень быстро, поэтому в данном примере это нормально. Если бы ваша логика была более затратна, вы могли бы заменить вызовы `filter` на цикл, который вручную создает массивы и проверяет каждого человека один раз. -In fact, if `people` never change, you could move this code out of your component. From React's perspective, all that matters is that you give it an array of JSX nodes in the end. It doesn't care how you produce that array: +К тому же, если `people` никогда не меняется, вы можете вынести этот код из вашего компонента. С точки зрения React, единственное что имеет значение, это то, что вы предоставляете массив JSX-узлов в конце. React не важно, как вы создаете этот массив: @@ -775,7 +777,7 @@ import { getImageUrl } from './utils.js'; let chemists = []; let everyoneElse = []; people.forEach(person => { - if (person.profession === 'chemist') { + if (person.profession === 'химик') { chemists.push(person); } else { everyoneElse.push(person); @@ -795,8 +797,8 @@ function ListSection({ title, people }) { />

              {person.name}: - {' ' + person.profession + ' '} - known for {person.accomplishment} + {' ' + person.profession}. + Достижение: {person.accomplishment}

              )} @@ -810,11 +812,11 @@ export default function List() {

              Scientists

              @@ -825,33 +827,33 @@ export default function List() { ```js data.js export const people = [{ id: 0, - name: 'Creola Katherine Johnson', - profession: 'mathematician', - accomplishment: 'spaceflight calculations', + name: 'Креола Кэтрин Джонсон (Creola Katherine Johnson)', + profession: 'математик', + accomplishment: 'расчёты для космических полетов', imageId: 'MK3eW3A' }, { id: 1, - name: 'Mario José Molina-Pasquel Henríquez', - profession: 'chemist', - accomplishment: 'discovery of Arctic ozone hole', + name: 'Марио Молина (Mario José Molina-Pasquel Henríquez)', + profession: 'химик', + accomplishment: 'обнаружение дыр в озоновом слое', imageId: 'mynHUSa' }, { id: 2, - name: 'Mohammad Abdus Salam', - profession: 'physicist', - accomplishment: 'electromagnetism theory', + name: 'Мухаммад Абдус Салам (Mohammad Abdus Salam)', + profession: 'физик', + accomplishment: 'открытие теории электромагнетизма', imageId: 'bE7W1ji' }, { id: 3, - name: 'Percy Lavon Julian', - profession: 'chemist', - accomplishment: 'pioneering cortisone drugs, steroids and birth control pills', + name: 'Перси Джулиан (Percy Lavon Julian)', + profession: 'химик', + accomplishment: 'изобретение препаратов с кортизоном, стероидов и противозачаточных таблеток', imageId: 'IOjWm71' }, { id: 4, - name: 'Subrahmanyan Chandrasekhar', - profession: 'astrophysicist', - accomplishment: 'white dwarf star mass calculations', + name: 'Субраманьян Чандрасекар (Subrahmanyan Chandrasekhar)', + profession: 'астрофизик', + accomplishment: 'расчёт массы белого карлика', imageId: 'lrWQx8l' }]; ``` @@ -882,13 +884,13 @@ img { width: 100px; height: 100px; border-radius: 50%; } -#### Nested lists in one component {/*nested-lists-in-one-component*/} +#### Вложенные списки в одном компоненте {/*nested-lists-in-one-component*/} -Make a list of recipes from this array! For each recipe in the array, display its name as an `

              ` and list its ingredients in a `
                `. +Создайте список рецептов из данного массива! Для каждого рецепта в массиве отобразите название внутри `

                ` и перечислите ингредиенты в `
                  `. -This will require nesting two different `map` calls. +Для этого потребуется вложение двух разных вызовов `map`. @@ -900,7 +902,7 @@ import { recipes } from './data.js'; export default function RecipeList() { return (
                  -

                  Recipes

                  +

                  Рецепты

                  ); } @@ -909,16 +911,16 @@ export default function RecipeList() { ```js data.js export const recipes = [{ id: 'greek-salad', - name: 'Greek Salad', - ingredients: ['tomatoes', 'cucumber', 'onion', 'olives', 'feta'] + name: 'Греческий салат', + ingredients: ['помидоры', 'огурец', 'лук', 'оливки', 'сыр фета'] }, { id: 'hawaiian-pizza', - name: 'Hawaiian Pizza', - ingredients: ['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple'] + name: 'Гавайская пицца', + ingredients: ['тесто для пиццы', 'соус для пиццы', 'моцарелла', 'ветчина', 'ананас'] }, { id: 'hummus', - name: 'Hummus', - ingredients: ['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini'] + name: 'Хумус', + ingredients: ['нут', 'оливковое масло', 'зубчики чеснока', 'лимон', 'тахини'] }]; ``` @@ -926,7 +928,7 @@ export const recipes = [{ -Here is one way you could go about it: +Вот один из способов, как вы можете это сделать: @@ -936,7 +938,7 @@ import { recipes } from './data.js'; export default function RecipeList() { return (
                  -

                  Recipes

                  +

                  Рецепты

                  {recipes.map(recipe =>

                  {recipe.name}

                  @@ -957,28 +959,28 @@ export default function RecipeList() { ```js data.js export const recipes = [{ id: 'greek-salad', - name: 'Greek Salad', - ingredients: ['tomatoes', 'cucumber', 'onion', 'olives', 'feta'] + name: 'Греческий салат', + ingredients: ['помидоры', 'огурец', 'лук', 'оливки', 'сыр фета'] }, { id: 'hawaiian-pizza', - name: 'Hawaiian Pizza', - ingredients: ['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple'] + name: 'Гавайская пицца', + ingredients: ['тесто для пиццы', 'соус для пиццы', 'моцарелла', 'ветчина', 'ананас'] }, { id: 'hummus', - name: 'Hummus', - ingredients: ['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini'] + name: 'Хумус', + ingredients: ['нут', 'оливковое масло', 'зубчики чеснока', 'лимон', 'тахини'] }]; ``` -Each of the `recipes` already includes an `id` field, so that's what the outer loop uses for its `key`. There is no ID you could use to loop over ingredients. However, it's reasonable to assume that the same ingredient won't be listed twice within the same recipe, so its name can serve as a `key`. Alternatively, you could change the data structure to add IDs, or use index as a `key` (with the caveat that you can't safely reorder ingredients). +Каждый из рецептов уже содержит поле `id`, поэтому это и используется внешним циклом в качестве ключа. Нет ID, который можно было бы использовать для перебора ингредиентов. Однако разумно предположить, что один и тот же ингредиент не будет перечислен дважды в одном рецепте, поэтому его имя может служить в качестве ключа. Как вариант, вы можете изменить структуру данных, чтобы добавить ID, или же использовать индекс в качестве ключа (с оговоркой, что вы не можете безопасно изменять порядок ингредиентов). -#### Extracting a list item component {/*extracting-a-list-item-component*/} +#### Извлечение компонента элемента списка {/*extracting-a-list-item-component*/} -This `RecipeList` component contains two nested `map` calls. To simplify it, extract a `Recipe` component from it which will accept `id`, `name`, and `ingredients` props. Where do you place the outer `key` and why? +Компонент `RecipeList` содержит два вложенных вызова `map`. Чтобы упростить его, извлеките компонент `Recipe`, который будет принимать пропсы `id`, `name` и `ingredients`. Где вы разместите внешний `key` и почему? @@ -988,7 +990,7 @@ import { recipes } from './data.js'; export default function RecipeList() { return (
                  -

                  Recipes

                  +

                  Рецепты

                  {recipes.map(recipe =>

                  {recipe.name}

                  @@ -1009,16 +1011,16 @@ export default function RecipeList() { ```js data.js export const recipes = [{ id: 'greek-salad', - name: 'Greek Salad', - ingredients: ['tomatoes', 'cucumber', 'onion', 'olives', 'feta'] + name: 'Греческий салат', + ingredients: ['помидоры', 'огурец', 'лук', 'оливки', 'сыр фета'] }, { id: 'hawaiian-pizza', - name: 'Hawaiian Pizza', - ingredients: ['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple'] + name: 'Гавайская пицца', + ingredients: ['тесто для пиццы', 'соус для пиццы', 'моцарелла', 'ветчина', 'ананас'] }, { id: 'hummus', - name: 'Hummus', - ingredients: ['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini'] + name: 'Хумус', + ingredients: ['нут', 'оливковое масло', 'зубчики чеснока', 'лимон', 'тахини'] }]; ``` @@ -1026,7 +1028,7 @@ export const recipes = [{ -You can copy-paste the JSX from the outer `map` into a new `Recipe` component and return that JSX. Then you can change `recipe.name` to `name`, `recipe.id` to `id`, and so on, and pass them as props to the `Recipe`: +Вы можете скопировать и вставить JSX из внешнего вызова map в новый компонент `Recipe` и вернуть этот JSX. Затем вы можете изменить `recipe.name` на `name`, `recipe.id` на `id` и т.д., и передать их в виде пропсов компоненту `Recipe`: @@ -1051,7 +1053,7 @@ function Recipe({ id, name, ingredients }) { export default function RecipeList() { return (
                  -

                  Recipes

                  +

                  Рецепты

                  {recipes.map(recipe => )} @@ -1063,51 +1065,51 @@ export default function RecipeList() { ```js data.js export const recipes = [{ id: 'greek-salad', - name: 'Greek Salad', - ingredients: ['tomatoes', 'cucumber', 'onion', 'olives', 'feta'] + name: 'Греческий салат', + ingredients: ['помидоры', 'огурец', 'лук', 'оливки', 'сыр фета'] }, { id: 'hawaiian-pizza', - name: 'Hawaiian Pizza', - ingredients: ['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple'] + name: 'Гавайская пицца', + ingredients: ['тесто для пиццы', 'соус для пиццы', 'моцарелла', 'ветчина', 'ананас'] }, { id: 'hummus', - name: 'Hummus', - ingredients: ['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini'] + name: 'Хумус', + ingredients: ['нут', 'оливковое масло', 'зубчики чеснока', 'лимон', 'тахини'] }]; ``` -Here, `` is a syntax shortcut saying "pass all properties of the `recipe` object as props to the `Recipe` component". You could also write each prop explicitly: ``. +Здесь `` -- это сокращенный синтаксис, означающий "передайте все свойства объекта `recipe` как пропсы в компонент `Recipe`". Вы также можете явно задать каждый проп: ``. -**Note that the `key` is specified on the `` itself rather than on the root `
                  ` returned from `Recipe`.** This is because this `key` is needed directly within the context of the surrounding array. Previously, you had an array of `
                  `s so each of them needed a `key`, but now you have an array of ``s. In other words, when you extract a component, don't forget to leave the `key` outside the JSX you copy and paste. +**Обратите внимание, что `key` указывается на самом компоненте ``, а не на корневом `
                  `, возвращаемом из `Recipe`.** Всё потому, что этот `key` необходим непосредственно в контексте окружающего массива. Ранее у вас был массив `
                  `, поэтому каждому из них требовался ключ, но теперь у вас есть массив ``. Другими словами, когда вы извлекаете компонент, не забудьте оставить ключ за пределами JSX, который вы копируете и вставляете. -#### List with a separator {/*list-with-a-separator*/} +#### Список с разделителем {/*list-with-a-separator*/} -This example renders a famous haiku by Katsushika Hokusai, with each line wrapped in a `

                  ` tag. Your job is to insert an `

                  ` separator between each paragraph. Your resulting structure should look like this: +Данный пример рендерит известное хокку Кацусики Хокусая, каждая строка обернута в тег `

                  `. Ваша задача -- вставить разделитель `

                  ` между каждым параграфом. Ваша структура должна выглядеть так: ```js
                  -

                  I write, erase, rewrite

                  +

                  Я пишу, стираю, переписываю,

                  -

                  Erase again, and then

                  +

                  Снова стереть, а затем

                  -

                  A poppy blooms.

                  +

                  Цветет мак.

                  ``` -A haiku only contains three lines, but your solution should work with any number of lines. Note that `
                  ` elements only appear *between* the `

                  ` elements, not in the beginning or the end! +Хокку содержит только три строки, но ваше решение должно работать с любым количеством строк. Обратите внимание, что элементы `

                  ` должны быть *между* элементами `

                  `, а не в начале или в конце! ```js const poem = { lines: [ - 'I write, erase, rewrite', - 'Erase again, and then', - 'A poppy blooms.' + 'Я пишу, стираю, переписываю,', + 'Снова стереть, а затем', + 'Цветет мак.' ] }; @@ -1141,33 +1143,33 @@ hr { -(This is a rare case where index as a key is acceptable because a poem's lines will never reorder.) +(Это один из редких случаев когда можно использовать индекс в качестве ключа, потому что строки стихотворения никогда не будут переупорядочиваться.) -You'll either need to convert `map` to a manual loop, or use a fragment. +Вам понадобится либо поменять `map` на обычный цикл, либо использовать фрагмент. -You can write a manual loop, inserting `

                  ` and `

                  ...

                  ` into the output array as you go: +Вы можете использовать обычный цикл, вставляя `
                  ` и `

                  ...

                  ` в массив для вывода по мере выполнения: ```js const poem = { lines: [ - 'I write, erase, rewrite', - 'Erase again, and then', - 'A poppy blooms.' + 'Я пишу, стираю, переписываю,', + 'Снова стереть, а затем', + 'Цветет мак.' ] }; export default function Poem() { let output = []; - // Fill the output array + // Заполнение массива для вывода poem.lines.forEach((line, i) => { output.push(
                  @@ -1178,7 +1180,7 @@ export default function Poem() {

                  ); }); - // Remove the first
                  + // Убираем первый
                  output.shift(); return ( @@ -1206,9 +1208,9 @@ hr {                   -Using the original line index as a `key` doesn't work anymore because each separator and paragraph are now in the same array. However, you can give each of them a distinct key using a suffix, e.g. `key={i + '-text'}`. +Использование исходного индекса строки в качестве ключа больше не работает, потому что теперь каждый разделитель и абзац находятся в одном и том же массиве. Однако вы можете присвоить каждому из них уникальный ключ с использованием суффикса, например, `key={i + '-text'}`. -Alternatively, you could render a collection of fragments which contain `
                  ` and `

                  ...

                  `. However, the `<>...` shorthand syntax doesn't support passing keys, so you'd have to write `` explicitly: +В качестве альтернативы, вы можете отрендерить коллекцию фрагментов, содержащих `
                  ` и `

                  ...

                  `. Однако сокращенный синтаксис `<>...` не поддерживает передачу ключей, поэтому вам придется явно использовать ``: @@ -1217,9 +1219,9 @@ import { Fragment } from 'react'; const poem = { lines: [ - 'I write, erase, rewrite', - 'Erase again, and then', - 'A poppy blooms.' + 'Я пишу, стираю, переписываю,', + 'Снова стереть, а затем', + 'Цветет мак.' ] }; @@ -1254,7 +1256,7 @@ hr { -Remember, fragments (often written as `<> `) let you group JSX nodes without adding extra `
                  `s! +Запомните, фрагменты (часто записываемые как `<> `) позволяют группировать JSX-узлы без добавления дополнительных `
                  `! diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md index 782b6c0f1..4450c4613 100644 --- a/src/content/learn/responding-to-events.md +++ b/src/content/learn/responding-to-events.md @@ -313,6 +313,12 @@ button { margin-right: 10px; } Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toolbar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later. + + + +Make sure that you use the appropriate HTML tags for your event handlers. For example, to handle clicks, use [`

                }> + Загрузка...

              }>
              No matches for "{query}"

              ; + return

              По запросу "{query}" ничего не найдено

              ; } return (
                @@ -730,11 +730,11 @@ input { margin: 10px; } --- -### Deferring re-rendering for a part of the UI {/*deferring-re-rendering-for-a-part-of-the-ui*/} +### Откладывание повторного рендеринга для части UI {/*deferring-re-rendering-for-a-part-of-the-ui*/} -You can also apply `useDeferredValue` as a performance optimization. It is useful when a part of your UI is slow to re-render, there's no easy way to optimize it, and you want to prevent it from blocking the rest of the UI. +`useDeferredValue` -- это в том числе инструмент оптимизации. Его можно применить в ситуации, когда какая-то часть вашего UI требует вычислительно долгого рендеринга, с которым очень трудно что-то сделать, но при этом вы не хотите из-за этого постоянно блокировать рендеринг остального UI. -Imagine you have a text field and a component (like a chart or a long list) that re-renders on every keystroke: +Представьте, что в вашем приложении некий сложный компонент (график, либо очень длинный список) каждый раз заново рендерится по каждому нажатию клавиши в поле ввода: ```js function App() { @@ -748,7 +748,7 @@ function App() { } ``` -First, optimize `SlowList` to skip re-rendering when its props are the same. To do this, [wrap it in `memo`:](/reference/react/memo#skipping-re-rendering-when-props-are-unchanged) +Для начала, вы можете [обернуть `SlowList` в `memo`](/reference/react/memo#skipping-re-rendering-when-props-are-unchanged), чтобы рендеринг `SlowList` не повторялся, если его пропсы не меняются. ```js {1,3} const SlowList = memo(function SlowList({ text }) { @@ -756,9 +756,9 @@ const SlowList = memo(function SlowList({ text }) { }); ``` -However, this only helps if the `SlowList` props are *the same* as during the previous render. The problem you're facing now is that it's slow when they're *different,* and when you actually need to show different visual output. +Но этого не достаточно. Ведь так рендеринг ускорится, только если всегда передавать в `SlowList` *одни и те же* значения пропсов. Проблема в том, что рендеринг всё ещё медленный, если передавать *другие* значения пропсов, требующие другой визуализации. -Concretely, the main performance problem is that whenever you type into the input, the `SlowList` receives new props, and re-rendering its entire tree makes the typing feel janky. In this case, `useDeferredValue` lets you prioritize updating the input (which must be fast) over updating the result list (which is allowed to be slower): +Конкретно в этом примере, `SlowList` будет на каждый ввод символа получать новые пропсы и своим рендерингом блокировать остальной интерфейс. Из-за чего ввод будет слишком заметно "заедать". В такой ситуации с помощью `useDeferredValue` можно сделать обновления поля ввода всегда более приоритетными (отзывчивее), чем обновления списка (которые в любом случае медленные): ```js {3,7} function App() { @@ -773,13 +773,13 @@ function App() { } ``` -This does not make re-rendering of the `SlowList` faster. However, it tells React that re-rendering the list can be deprioritized so that it doesn't block the keystrokes. The list will "lag behind" the input and then "catch up". Like before, React will attempt to update the list as soon as possible, but will not block the user from typing. +Собственно сам рендеринг `SlowList` не станет от этого быстрее. Однако теперь React понимает, что не нужно блокировать обработку нажатий рендерингом списка. Визуально список будет как бы "отставать" от ввода, а затем его "догонять". Конечно, как и до оптимизации, React будет стараться обновлять список как можно раньше, но уже не в ущерб возможности печатать. - + -#### Deferred re-rendering of the list {/*deferred-re-rendering-of-the-list*/} +#### Отложенный рендеринг списка {/*deferred-re-rendering-of-the-list*/} -In this example, each item in the `SlowList` component is **artificially slowed down** so that you can see how `useDeferredValue` lets you keep the input responsive. Type into the input and notice that typing feels snappy while the list "lags behind" it. +В этом примере каждый элемент в компоненте `SlowList` **искусственно замедлен**, чтобы продемонстрировать, как `useDeferredValue` позволяет сохранить отзывчивость поля ввода. Попробуйте попечатать в поле ввода -- оцените свои ощущения от того, как мгновенно оно реагирует на ввод, хотя список при этом заметно отстаёт. @@ -803,7 +803,7 @@ export default function App() { import { memo } from 'react'; const SlowList = memo(function SlowList({ text }) { - // Log once. The actual slowdown is inside SlowItem. + // Собственно замедление происходит в SlowItem. console.log('[ARTIFICIALLY SLOW] Rendering 250 '); let items = []; @@ -820,12 +820,12 @@ const SlowList = memo(function SlowList({ text }) { function SlowItem({ text }) { let startTime = performance.now(); while (performance.now() - startTime < 1) { - // Do nothing for 1 ms per item to emulate extremely slow code + // Крутимся в цикле одну миллисекунду, эмулируя очень медленный рендеринг } return (
              • - Text: {text} + Текст: {text}
                • ) } @@ -853,11 +853,11 @@ export default SlowList; -#### Unoptimized re-rendering of the list {/*unoptimized-re-rendering-of-the-list*/} +#### Неоптимизированный рендеринг списка {/*unoptimized-re-rendering-of-the-list*/} -In this example, each item in the `SlowList` component is **artificially slowed down**, but there is no `useDeferredValue`. +В этом примере каждый элемент в компоненте `SlowList` **искусственно замедлен**, но `useDeferredValue` уже не используется. -Notice how typing into the input feels very janky. This is because without `useDeferredValue`, each keystroke forces the entire list to re-render immediately in a non-interruptible way. +Обратите внимание, как поле ввода заедает при каждом нажатии. Так происходит потому, что без `useDeferredValue` каждое нажатие клавиши требует немедленно заново отрендерить список. Причём без возможности прерывать рендеринг. @@ -880,7 +880,7 @@ export default function App() { import { memo } from 'react'; const SlowList = memo(function SlowList({ text }) { - // Log once. The actual slowdown is inside SlowItem. + // Собственно замедление происходит в SlowItem. console.log('[ARTIFICIALLY SLOW] Rendering 250 '); let items = []; @@ -897,12 +897,12 @@ const SlowList = memo(function SlowList({ text }) { function SlowItem({ text }) { let startTime = performance.now(); while (performance.now() - startTime < 1) { - // Do nothing for 1 ms per item to emulate extremely slow code + // Крутимся в цикле одну миллисекунду, эмулируя очень медленный рендеринг } return (
              • - Text: {text} + Текст: {text}
                • ) } @@ -934,25 +934,25 @@ export default SlowList; -This optimization requires `SlowList` to be wrapped in [`memo`.](/reference/react/memo) This is because whenever the `text` changes, React needs to be able to re-render the parent component quickly. During that re-render, `deferredText` still has its previous value, so `SlowList` is able to skip re-rendering (its props have not changed). Without [`memo`,](/reference/react/memo) it would have to re-render anyway, defeating the point of the optimization. +Для такой оптимизации `SlowList` должен обязательно быть обёрнут в [`memo`.](/reference/react/memo) Цель оптимизации ведь в том, чтобы при каждом изменении `text` React рендерил родительский компонент (`App`) как можно быстрей. Во время этого рендеринга в `deferredText` будет такое же значение, как и в прошлый рендеринг -- а значит пропсы `SlowList` не изменились, и нет нужды заново рендерить список. Но без [`memo`](/reference/react/memo) список всё равно будет рендерится ещё раз -- что делает саму оптимизацию бессмысленной. -#### How is deferring a value different from debouncing and throttling? {/*how-is-deferring-a-value-different-from-debouncing-and-throttling*/} +#### Чем отложенное обновление отличается от дебаунсинга и тротлинга? {/*how-is-deferring-a-value-different-from-debouncing-and-throttling*/} -There are two common optimization techniques you might have used before in this scenario: +Возможно, вы в похожей ситуации применили бы один из двух распространённых приёмов: -- *Debouncing* means you'd wait for the user to stop typing (e.g. for a second) before updating the list. -- *Throttling* means you'd update the list every once in a while (e.g. at most once a second). +- *Дебаунсинг (debouncing)*, при котором приложение сначала бы дожидалось, когда пользователь перестанет печатать (уже секунду не печатал, например), и потом обновляло список. +- *Тротлинг (throttling)*, при котором, как бы быстро пользователь ни печатал, приложение обновляло бы список не чаще одного раза за какой-то период (раз в секунду, например). -While these techniques are helpful in some cases, `useDeferredValue` is better suited to optimizing rendering because it is deeply integrated with React itself and adapts to the user's device. +Хотя эти методы полезны в некоторых случаях, `useDeferredValue` лучше подходит для оптимизации рендеринга, поскольку он тесно взаимодействует с React и может подстроиться под возможности устройства пользователя. -Unlike debouncing or throttling, it doesn't require choosing any fixed delay. If the user's device is fast (e.g. powerful laptop), the deferred re-render would happen almost immediately and wouldn't be noticeable. If the user's device is slow, the list would "lag behind" the input proportionally to how slow the device is. +Можно не привязываться к какой-то фиксированной задержке. У пользователей с быстрым, мощным устройством фоновый рендеринг будет выполняться быстро и без заметной задержки. А у пользователей со слабым устройством список будет "отставать" ровно на столько, на сколько позволяет устройство. -Also, unlike with debouncing or throttling, deferred re-renders done by `useDeferredValue` are interruptible by default. This means that if React is in the middle of re-rendering a large list, but the user makes another keystroke, React will abandon that re-render, handle the keystroke, and then start rendering in background again. By contrast, debouncing and throttling still produce a janky experience because they're *blocking:* they merely postpone the moment when rendering blocks the keystroke. +Кроме того, в отличие от дебаунсинга и тротлинга, отложенный с помощью `useDeferredValue` рендеринг можно прервать. Это значит, что если, например, пользователь введёт очередной символ, пока в фоне рендерится большой сложный список, React прервёт этот рендеринг, обработает ввод, и затем снова запустит рендеринг в фоне. При этом с дебаунсингом или тротлингом в такой же ситуации интерфейс всё ещё будет тормозить и заедать -- ведь эти приёмы не устраняют собственно *блокировку* ввода: с ними она случается просто либо позже, либо реже. -If the work you're optimizing doesn't happen during rendering, debouncing and throttling are still useful. For example, they can let you fire fewer network requests. You can also use these techniques together. +Когда нужно оптимизировать что-то помимо рендеринга, дебаунсинг и тротлинг могут наоборот быть очень полезны. Например, они помогут уменьшить количество запросов в сеть. А ещё их можно совмещать с описанными здесь техниками. diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index bc76bdfbe..8d04f205c 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -44,7 +44,7 @@ function ChatRoom({ roomId }) { #### Parameters {/*parameters*/} -* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. When your component is first 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. After your component is removed from the DOM, React will run your cleanup function one last time. +* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. When 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. After your component is removed from the DOM, React will run your cleanup function. * **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. If you omit this argument, your Effect will re-run after every re-render of the component. [See the difference between passing an array of dependencies, an empty array, and no dependencies at all.](#examples-dependencies) @@ -531,7 +531,7 @@ function ChatRoom({ roomId }) { serverUrl: serverUrl }); // ... -```` +``` There are also many excellent custom Hooks for every purpose available in the React ecosystem. @@ -1089,7 +1089,7 @@ function ChatRoom({ roomId }) { } ``` -**To remove a dependency, you need to ["prove" to the linter *doesn't need* to be a dependency.](/learn/removing-effect-dependencies#removing-unnecessary-dependencies)** For example, you can move `serverUrl` out of your component to prove that it's not reactive and won't change on re-renders: +**To remove a dependency, you need to ["prove" to the linter that it *doesn't need* to be a dependency.](/learn/removing-effect-dependencies#removing-unnecessary-dependencies)** For example, you can move `serverUrl` out of your component to prove that it's not reactive and won't change on re-renders: ```js {1,8} const serverUrl = 'https://localhost:1234'; // Not a reactive value anymore diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 4ea029f27..18e74936e 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -4,7 +4,7 @@ title: useId -`useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes. +Хук `useId` позволяет создавать уникальные идентификаторы, которые затем можно использовать, например, в атрибутах доступности. ```js const id = useId() @@ -16,11 +16,11 @@ const id = useId() --- -## Reference {/*reference*/} +## Справочник {/*reference*/} ### `useId()` {/*useid*/} -Call `useId` at the top level of your component to generate a unique ID: +Чтобы создать уникальный идентификатор, вызовите `useId` на верхнем уровне своего компонента: ```js import { useId } from 'react'; @@ -30,35 +30,35 @@ function PasswordField() { // ... ``` -[See more examples below.](#usage) +[См. другие примеры ниже.](#usage) -#### Parameters {/*parameters*/} +#### Параметры {/*parameters*/} -`useId` does not take any parameters. +`useId` не принимает параметров. -#### Returns {/*returns*/} +#### Возвращаемое значение {/*returns*/} -`useId` returns a unique ID string associated with this particular `useId` call in this particular component. +`useId` возвращает уникальный идентификатор, привязанный к данному конкретному вызову `useId` в данном конкретном компоненте. -#### Caveats {/*caveats*/} +#### Замечания {/*caveats*/} -* `useId` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it. +* `useId` -- это хук, поэтому его нужно вызывать только **на верхнем уровне вашего компонента** или хука. Его нельзя вызывать внутри циклов и условий. Если это всё же для чего-то нужно, выделите этот вызов в отдельный компонент, который затем можно рендерить по условию или в цикле. -* `useId` **should not be used to generate keys** in a list. [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key) +* `useId` **не должен использоваться для создания ключей** в списках. [Ключи должны выбираться на основе данных.](/learn/rendering-lists#where-to-get-your-key) --- -## Usage {/*usage*/} +## Применение {/*usage*/} -**Do not call `useId` to generate keys in a list.** [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key) +**Не используйте `useId` для создания ключей** в списках. [Ключи должны выбираться на основе данных.](/learn/rendering-lists#where-to-get-your-key) -### Generating unique IDs for accessibility attributes {/*generating-unique-ids-for-accessibility-attributes*/} +### Создание уникальных идентификаторов для атрибутов доступности {/*generating-unique-ids-for-accessibility-attributes*/} -Call `useId` at the top level of your component to generate a unique ID: +Чтобы получить уникальный идентификатор, вызовите `useId` на верхнем уровне своего компонента: ```js [[1, 4, "passwordHintId"]] import { useId } from 'react'; @@ -68,7 +68,7 @@ function PasswordField() { // ... ``` -You can then pass the generated ID to different attributes: +После чего вы можете указывать этот сгенерированный идентификатор в различных атрибутах: ```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]] <> @@ -77,26 +77,26 @@ You can then pass the generated ID to different at ``` -**Let's walk through an example to see when this is useful.** +**Разберём на примере, когда это может быть полезно.** -[HTML accessibility attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) like [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) let you specify that two tags are related to each other. For example, you can specify that an element (like an input) is described by another element (like a paragraph). +[HTML-атрибуты доступности](https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA), такие как [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby), позволяют обозначать смысловую связь между тегами. Например, можно указать, что некоторый элемент разметки (абзац) содержит краткое описание другого элемента (поля ввода). -In regular HTML, you would write it like this: +В обычном HTML вы могли бы описать это так: ```html {5,8}

                - The password should contain at least 18 characters + Пароль должен содержать не менее 18 символов

                ``` -However, hardcoding IDs like this is not a good practice in React. A component may be rendered more than once on the page--but IDs have to be unique! Instead of hardcoding an ID, generate a unique ID with `useId`: +Однако в React подобным образом фиксировать идентификаторы в коде -- не лучшая практика. Один и тот же компонент может использоваться в нескольких разных местах -- но ведь в каждом случае идентификаторы должны быть уникальны! Поэтому вместо фиксированного идентификатора лучше сгенерировать уникальный с помощью `useId`: ```js {4,11,14} import { useId } from 'react'; @@ -106,21 +106,21 @@ function PasswordField() { return ( <>

                - The password should contain at least 18 characters + Пароль должен содержать не менее 18 символов

                ); } ``` -Now, even if `PasswordField` appears multiple times on the screen, the generated IDs won't clash. +В итоге, сгенерированные идентификаторы не будут конфликтовать, даже если использовать `PasswordField` на экране в нескольких местах. @@ -132,14 +132,14 @@ function PasswordField() { return ( <>

                - The password should contain at least 18 characters + Пароль должен содержать не менее 18 символов

                ); @@ -148,9 +148,9 @@ function PasswordField() { export default function App() { return ( <> -

                Choose password

                +

                Выберите пароль

                -

                Confirm password

                +

                Подтвердите пароль

                ); @@ -163,33 +163,33 @@ input { margin: 5px; }                 -[Watch this video](https://www.youtube.com/watch?v=0dNzNcuEuOo) to see the difference in the user experience with assistive technologies. +[Посмотрите видео-демонстрацию](https://www.youtube.com/watch?v=0dNzNcuEuOo) о том, как всё это влияет на опыт использования вспомогательных технологий. -With [server rendering](/reference/react-dom/server), **`useId` requires an identical component tree on the server and the client**. If the trees you render on the server and the client don't match exactly, the generated IDs won't match. +При использовании вместе с [серверным рендерингом](/reference/react-dom/server) **`useId` требует, чтобы деревья компонентов на сервере и на клиенте получались идентичными**. Если отрендеренные на сервере и на клиенте деревья не совпадут, то сгенерироованные на сервере идентификаторы не совпадут со сгенерированными на клиенте. -#### Why is useId better than an incrementing counter? {/*why-is-useid-better-than-an-incrementing-counter*/} +#### Чем `useId` лучше обычного инкрементируемого счётчика? {/*why-is-useid-better-than-an-incrementing-counter*/} -You might be wondering why `useId` is better than incrementing a global variable like `nextId++`. +Возможно, вы задаётесь вопросом, почему для получения нового идентификатора лучше использовать `useId`, а не увеличивать постоянно некий глобальный счётчик -- `nextId++`. -The primary benefit of `useId` is that React ensures that it works with [server rendering.](/reference/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/reference/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML. +Главное преимущество `useId` в том, что React гарантирует его корректную работу с [серверным рендерингом](/reference/react-dom/server). В процессе серверного рендеринга ваши компоненты создают HTML, к которому затем на клиенте при [гидратации](/reference/react-dom/client/hydrateRoot) подключаются ваши обработчики событий. Чтобы гидратация сработала правильно, клиентский вывод должен совпасть с полученным от сервера HTML. -This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client. +Однако крайне трудно быть уверенным, что они совпадут, если пользоваться обычным инкрементируемым счётчиком. Ведь порядок гидратации компонентов на клиенте может не совпадать с порядком, в котором HTML составлялся на сервере. Используя же `useId`, вы гарантируете, что созданные идентификаторы на сервере и на клиенте будут совпадать, и гидратация выполнится правильно. -Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order. +Внутри React `useId` вычисляется на основе "пути из цепочки родителей" того компонента, который вызывает `useId`. А если отрендеренные на сервере и на клиенте деревья компонентов совпадают, то и полный "путь из цепочки родителей" для каждого компонента будет совпадать, в каком бы порядке они не рендерились. --- -### Generating IDs for several related elements {/*generating-ids-for-several-related-elements*/} +### Создание идентификаторов для нескольких элементов {/*generating-ids-for-several-related-elements*/} -If you need to give IDs to multiple related elements, you can call `useId` to generate a shared prefix for them: +Если вам нужны разные идентификаторы для нескольких элементов, и эти элементы как-то связаны по смыслу, то с помощью `useId` вы можете создать один общий для всех префикс: @@ -200,10 +200,10 @@ export default function Form() { const id = useId(); return ( - +
                - + ); @@ -216,20 +216,20 @@ input { margin: 5px; }                 -This lets you avoid calling `useId` for every single element that needs a unique ID. +Так можно обойтись без лишних вызовов `useId` на каждый элемент, которому понадобился идентификатор. --- -### Specifying a shared prefix for all generated IDs {/*specifying-a-shared-prefix-for-all-generated-ids*/} +### Задание общего префикса для всех идентификаторов вообще {/*specifying-a-shared-prefix-for-all-generated-ids*/} -If you render multiple independent React applications on a single page, pass `identifierPrefix` as an option to your [`createRoot`](/reference/react-dom/client/createRoot#parameters) or [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) calls. This ensures that the IDs generated by the two different apps never clash because every identifier generated with `useId` will start with the distinct prefix you've specified. +Если вы отображаете несколько независимых React-приложений на одной странице, то в вызовах [`createRoot`](/reference/react-dom/client/createRoot#parameters) и [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) вы можете указать опцию `identifierPrefix`. Поскольку все полученные из `useId` идентификаторы будут с префиксом, указанным в этой опции, то так можно гарантировать, что сгенерированные разными приложениями идентификаторы никогда не пересекутся. ```html index.html - My app + Моё приложение
                @@ -246,14 +246,14 @@ function PasswordField() { return ( <>

                - The password should contain at least 18 characters + Пароль должен содержать не менее 18 символов

                ); @@ -262,7 +262,7 @@ function PasswordField() { export default function App() { return ( <> -

                Choose password

                +

                Выберите пароль

                ); diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md index 5c92db2e6..175b4476f 100644 --- a/src/content/reference/react/useInsertionEffect.md +++ b/src/content/reference/react/useInsertionEffect.md @@ -44,7 +44,7 @@ function useCSS(rule) { #### Parameters {/*parameters*/} -* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is first 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 one last time. +* `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. * **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. diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index fdbc50b3e..5af3ec5a6 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -26,7 +26,7 @@ useLayoutEffect(setup, dependencies?) ### `useLayoutEffect(setup, dependencies?)` {/*useinsertioneffect*/} -Call `useLayoutEffect` perform the layout measurements before the browser repaints the screen: +Call `useLayoutEffect` to perform the layout measurements before the browser repaints the screen: ```js import { useState, useRef, useLayoutEffect } from 'react'; @@ -47,7 +47,7 @@ function Tooltip() { #### Parameters {/*parameters*/} -* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is first 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 one last time. +* `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. * **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. If you omit this argument, your Effect will re-run after every re-render of the component. @@ -737,7 +737,3 @@ However, if you're running into this problem, you have a few different options: - Alternatively, you can render a component with `useLayoutEffect` only after hydration. Keep a boolean `isMounted` state that's initialized to `false`, and set it to `true` inside a `useEffect` call. Your rendering logic can then be like `return isMounted ? : `. On the server and during the hydration, the user will see `FallbackContent` which should not call `useLayoutEffect`. Then React will replace it with `RealContent` which runs on the client only and can include `useLayoutEffect` calls. - If you synchronize your component with an external data store and rely on `useLayoutEffect` for different reasons than measuring layout, consider [`useSyncExternalStore`](/reference/react/useSyncExternalStore) instead which [supports server rendering.](/reference/react/useSyncExternalStore#adding-support-for-server-rendering) - - - - diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index 543c11125..ac8dd4554 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -4,7 +4,7 @@ title: useMemo -`useMemo` is a React Hook that lets you cache the result of a calculation between re-renders. +`useMemo` – хук в React, позволяющий кешировать результаты вычислений между ререндерами. ```js const cachedValue = useMemo(calculateValue, dependencies) @@ -16,11 +16,11 @@ const cachedValue = useMemo(calculateValue, dependencies) --- -## Reference {/*reference*/} +## Справочник {/*reference*/} ### `useMemo(calculateValue, dependencies)` {/*usememo*/} -Call `useMemo` at the top level of your component to cache a calculation between re-renders: +Чтобы закешировать результат вычислений между ререндерами, достаточно вызвать `useMemo` на верхнем уровне внутри компонента: ```js import { useMemo } from 'react'; @@ -34,39 +34,39 @@ function TodoList({ todos, tab }) { } ``` -[See more examples below.](#usage) +[Больше примеров ниже.](#usage) -#### Parameters {/*parameters*/} +#### Параметры {/*parameters*/} -* `calculateValue`: The function calculating the value that you want to cache. It should be pure, should take no arguments, and should return a value of any type. React will call your function during the initial render. On next renders, React will return the same value again if the `dependencies` have not changed since the last render. Otherwise, it will call `calculateValue`, return its result, and store it so it can be reused later. +* `calculateValue`: Функция, возвращающая значение, которое нужно закешировать. Она должна быть чистой и не должна принимать никаких аргументов. React обязательно вызовет её при первом рендере, а при последующих будет возвращать готовое значение. В том случае если какое-то значение из массива зависимостей `dependencies` изменилось, React заново вызовет `calculateValue`, получит новое значение и сохранит его для будущего переиспользования. -* `dependencies`: The list of all reactive values referenced inside of the `calculateValue` 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. +* `dependencies`: Массив всех реактивных значений, которые используются внутри функции `calculateValue`. Реактивные значения включают в себя пропсы, состояние и все переменные и функции, объявленные внутри компонента. Если вы настроили свой [линтер для работы с React](/learn/editor-setup#linting), он проверит, все ли реактивные компоненты были указаны как зависимости. Массив зависимостей должен иметь конечное число элементов и быть описан как `[dep1, dep2, dep3]`. React будет сравнивать каждую такую зависимость с её предыдущим значением при помощи [`Object.is`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is). -#### Returns {/*returns*/} +#### Возвращаемое значение {/*returns*/} -On the initial render, `useMemo` returns the result of calling `calculateValue` with no arguments. +При первом рендере `useMemo` возвращает результат вызова функции `calculateValue`. -During next renders, it will either return an already stored value from the last render (if the dependencies haven't changed), or call `calculateValue` again, and return the result that `calculateValue` has returned. +При всех последующих рендерах `useMemo` либо будет возвращать значение, сохранённое при предыдущем рендере (если ничто в массиве зависимостей не изменилось), либо заново вызовет функцию `calculateValue` и вернёт возвращаемое ею значение. -#### Caveats {/*caveats*/} +#### Предостережения {/*caveats*/} -* `useMemo` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it. -* In Strict Mode, React will **call your calculation function twice** in order to [help you find accidental impurities.](#my-calculation-runs-twice-on-every-re-render) This is development-only behavior and does not affect production. If your calculation function is pure (as it should be), this should not affect your logic. The result from one of the calls will be ignored. -* React **will not throw away the cached value unless there is a specific reason to do that.** For example, in development, React throws away the cache when you edit the file of your component. Both in development and in production, React will throw away the cache if your component suspends during the initial mount. In the future, React may add more features that take advantage of throwing away the cache--for example, if React adds built-in support for virtualized lists in the future, it would make sense to throw away the cache for items that scroll out of the virtualized table viewport. This should be fine if you rely on `useMemo` solely as a performance optimization. Otherwise, a [state variable](/reference/react/useState#avoiding-recreating-the-initial-state) or a [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) may be more appropriate. +* Поскольку `useMemo` это хук, то вызывать его можно только **на верхнем уровне внутри вашего компонента** или кастомного хука. Хуки нельзя вызывать внутри циклов или условий. Однако, если вам необходимо такое поведение, то можно извлечь новый компонент и переместить вызов хука в него. +* В строгом режиме React дважды вызовет передаваемую в `useMemo` функцию, чтобы проверить, [является ли она чистой](#my-calculation-runs-twice-on-every-re-render). Такое поведение существует только в режиме разработки и никак не проявляется в продакшене. Если эта функция чистая (какой она и должна быть), это никак не скажется на работе приложения. Результат одного из запусков будет просто проигнорирован. +* React **не отбрасывает закешированное значение, если на то нет веских причин**. Например, в режиме разработки React отбросит кеш, если файл компонента был изменён. В обоих режимах, разработки и продакшене, React отбросит кеш, если компонент [«задержится»](/reference/react/Suspense) во время первоначального монтирования. Помимо того, в дальнейшем в React могут быть добавлены новые возможности, которые смогут отбрасывать кеш. Например, если в будущем в React появится встроенная поддержка виртуализированных списков, будет иметь смысл отбрасывать кеш для тех элементов, которые выходят за область видимости. Полагаться на `useMemo` стоит только как на средство для оптимизации производительности. В противном случае, использование [состояния](/reference/react/useState#avoiding-recreating-the-initial-state) или [рефа](/reference/react/useRef#avoiding-recreating-the-ref-contents) может быть более подходящим вариантом. -Caching return values like this is also known as [*memoization*,](https://en.wikipedia.org/wiki/Memoization) which is why this Hook is called `useMemo`. +Подобное кеширование возвращаемых значений называют [*мемоизацией*](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F), поэтому данный хук был назван `useMemo`. --- -## Usage {/*usage*/} +## Использование {/*usage*/} -### Skipping expensive recalculations {/*skipping-expensive-recalculations*/} +### Пропуск ресурсоёмких вычислений {/*skipping-expensive-recalculations*/} -To cache a calculation between re-renders, wrap it in a `useMemo` call at the top level of your component: +Чтобы закешировать вычисления между ререндерами, достаточно обернуть их в `useMemo` на верхнем уровне внутри компонента: ```js [[3, 4, "visibleTodos"], [1, 4, "() => filterTodos(todos, tab)"], [2, 4, "[todos, tab]"]] import { useMemo } from 'react'; @@ -77,20 +77,20 @@ function TodoList({ todos, tab, theme }) { } ``` -You need to pass two things to `useMemo`: +`useMemo` ожидает два аргумента: -1. A calculation function that takes no arguments, like `() =>`, and returns what you wanted to calculate. -2. A list of dependencies including every value within your component that's used inside your calculation. +1. Вычислительную функцию, не принимающую никаких аргументов и возвращающую некоторое значение. +2. Массив зависимостей, включающий в себя все значения, находящиеся внутри компонента и использующиеся при вычислении. -On the initial render, the value you'll get from `useMemo` will be the result of calling your calculation. +При первом рендере значение, получаемое из `useMemo`, будет результатом вызова вычислительной функции. -On every subsequent render, React will compare the dependencies with the dependencies you passed during the last render. If none of the dependencies have changed (compared with [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), `useMemo` will return the value you already calculated before. Otherwise, React will re-run your calculation and return the new value. +При всех последующих рендерах React будет сравнивать текущие зависимости с зависимостями из предыдущего рендера, используя [`Object.is`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Если никакие из зависимостей не изменились, `useMemo` вернёт вычисленное прежде значение. В противном случае, React заново запустит вычислительную функцию и вернёт новое значение. -In other words, `useMemo` caches a calculation result between re-renders until its dependencies change. +Иными словами, `useMemo` кеширует значение между ререндерами до тех пор, пока никакое значение из массива зависимостей не изменится. -**Let's walk through an example to see when this is useful.** +**Посмотрим на примере, когда это может быть полезно.** -By default, React will re-run the entire body of your component every time that it re-renders. For example, if this `TodoList` updates its state or receives new props from its parent, the `filterTodos` function will re-run: +По умолчанию при ререндере React заново перезапускает всё тело компонента. Например, если `TodoList` обновит своё состояние или получит новый пропс, функция `filterTodos` перезапустится: ```js {2} function TodoList({ todos, tab, theme }) { @@ -99,21 +99,21 @@ function TodoList({ todos, tab, theme }) { } ``` -Usually, this isn't a problem because most calculations are very fast. However, if you're filtering or transforming a large array, or doing some expensive computation, you might want to skip doing it again if data hasn't changed. If both `todos` and `tab` are the same as they were during the last render, wrapping the calculation in `useMemo` like earlier lets you reuse `visibleTodos` you've already calculated before. +Обычно это не такая большая проблема, поскольку большинство вычислений довольно быстрые. Однако если приходится фильтровать или преобразовывать большой массив данных, или совершать какие-то иные ресурсоёмкие вычисления, то имеет смысл их пропускать (если входные данные никак не изменились). Оборачивание вычислительной функции в `useMemo` позволит переиспользовать вычисленные ранее `visibleTodos` (если ни `todos`, ни `tab` никак не изменились с предыдущего рендера). -This type of caching is called *[memoization.](https://en.wikipedia.org/wiki/Memoization)* +Такой тип кеширования называют *[мемоизацией](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F)*. -**You should only rely on `useMemo` as a performance optimization.** If your code doesn't work without it, find the underlying problem and fix it first. Then you may add `useMemo` to improve performance. +**На хук `useMemo` стоит полагаться лишь как на средство для оптимизации производительности.** Если ваш код не работает без него, сперва стоит найти и исправить ошибку, и только затем думать об использовании `useMemo`. -#### How to tell if a calculation is expensive? {/*how-to-tell-if-a-calculation-is-expensive*/} +#### Как понять, ресурсоёмкие ли вычисления? {/*how-to-tell-if-a-calculation-is-expensive*/} -In general, unless you're creating or looping over thousands of objects, it's probably not expensive. If you want to get more confidence, you can add a console log to measure the time spent in a piece of code: +Если вы не создаёте или не проходите в цикле тысячи объектов, то вычисления, скорее всего, не ресурсоёмкие. Для измерения времени, затраченного на выполнение некоторого куска кода, можно воспользоваться следующими методами консоли: ```js {1,3} console.time('filter array'); @@ -121,59 +121,59 @@ const visibleTodos = filterTodos(todos, tab); console.timeEnd('filter array'); ``` -Perform the interaction you're measuring (for example, typing into the input). You will then see logs like `filter array: 0.15ms` in your console. If the overall logged time adds up to a significant amount (say, `1ms` or more), it might make sense to memoize that calculation. As an experiment, you can then wrap the calculation in `useMemo` to verify whether the total logged time has decreased for that interaction or not: +После выполнения функции `filterTodos` в консоли появятся логи типа `filter array: 0.15ms`. Если вычисление занимает довольно существенное количество времени (скажем, `1ms` или больше), то имеет смысл его мемоизировать. Для этого можно обернуть его в `useMemo` и проверить, уменьшилось ли общее время выполнения или нет: ```js console.time('filter array'); const visibleTodos = useMemo(() => { - return filterTodos(todos, tab); // Skipped if todos and tab haven't changed + return filterTodos(todos, tab); // Вычисление будет пропущено, если todos и tab не изменились }, [todos, tab]); console.timeEnd('filter array'); ``` -`useMemo` won't make the *first* render faster. It only helps you skip unnecessary work on updates. +`useMemo` не делает *первый* рендер быстрее. Он лишь позволяет пропускать ненужные вычисления при последующих ререндерах. -Keep in mind that your machine is probably faster than your users' so it's a good idea to test the performance with an artificial slowdown. For example, Chrome offers a [CPU Throttling](https://developer.chrome.com/blog/new-in-devtools-61/#throttling) option for this. +Стоит помнить, что ваша машина, скорее всего, мощнее, чем у ваших пользователей. Поэтому хорошей практикой будет измерять производительность, искусственно замедлив ваш компьютер. Например, в Chrome для этих целей существует [CPU Throttling](https://developer.chrome.com/blog/new-in-devtools-61/#throttling). -Also note that measuring performance in development will not give you the most accurate results. (For example, when [Strict Mode](/reference/react/StrictMode) is on, you will see each component render twice rather than once.) To get the most accurate timings, build your app for production and test it on a device like your users have. +Необходимо также учитывать, что измерение производительности в режиме разработки даёт не самые точные результаты. Например, при включённом [строгом режиме](/reference/react/StrictMode), React будет рендерить каждый компонент дважды. Чтобы получить наиболее точные результаты, тестирование нужно проводить в продакшен-режиме и на устройстве, подобном тому, которое используют ваши пользователи. -#### Should you add useMemo everywhere? {/*should-you-add-usememo-everywhere*/} +#### Везде ли стоит использовать useMemo? {/*should-you-add-usememo-everywhere*/} -If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful. +В приложениях, подобных этому сайту, где большинство взаимодействий «грубые» (например, изменение страницы или целого раздела), мемоизация может быть излишня. С другой стороны, если ваше приложение больше похоже на графический редактор, где происходит много мелких взаимодействий (например, передвижение фигур), мемоизация может иметь смысл. -Optimizing with `useMemo` is only valuable in a few cases: +Прибегать к оптимизации при помощи `useMemo` стоит лишь в некоторых случаях: -- The calculation you're putting in `useMemo` is noticeably slow, and its dependencies rarely change. -- You pass it as a prop to a component wrapped in [`memo`.](/reference/react/memo) You want to skip re-rendering if the value hasn't changed. Memoization lets your component re-render only when dependencies aren't the same. -- The value you're passing is later used as a dependency of some Hook. For example, maybe another `useMemo` calculation value depends on it. Or maybe you are depending on this value from [`useEffect.`](/reference/react/useEffect) +- Если вычисление, помещаемое в `useMemo`, является ощутимо медленным и его зависимости редко изменяются. +- Если результат вычисления передаётся как проп дочернему компоненту, обёрнутому в [`memo`](/reference/react/memo). Мемоизация позволит пропускать его ререндеры, пока зависимости остаются прежними. +- Если вычисляемое значение в дальнейшем используется как зависимость другого хука. Например, если другой `useMemo` в своих вычислениях зависит от него. Или если это значение используется в [`useEffect`](/reference/react/useEffect). -There is no benefit to wrapping a calculation in `useMemo` in other cases. There is no significant harm to doing that either, so some teams choose to not think about individual cases, and memoize as much as possible. The downside of this approach is that code becomes less readable. Also, not all memoization is effective: a single value that's "always new" is enough to break memoization for an entire component. +В иных случаях особого смысла оборачивать вычисления в `useMemo` нет. Хотя в этом и нет ничего плохого: некоторые команды предпочитают не думать о каждом конкретном случае, а стараются мемоизировать как можно больше. Недостатком такого подхода может быть менее читаемый код. Кроме того, не любая мемоизация эффективна: одного значения, которое каждый раз новое, достаточно, чтобы сломать мемоизацию всего компонента. -**In practice, you can make a lot of memoization unnecessary by following a few principles:** +**Излишней мемоизации можно избежать, следуя таким принципам:** -1. When a component visually wraps other components, let it [accept JSX as children.](/learn/passing-props-to-a-component#passing-jsx-as-children) This way, when the wrapper component updates its own state, React knows that its children don't need to re-render. -1. Prefer local state and don't [lift state up](/learn/sharing-state-between-components) any further than necessary. For example, don't keep transient state like forms and whether an item is hovered at the top of your tree or in a global state library. -1. Keep your [rendering logic pure.](/learn/keeping-components-pure) If re-rendering a component causes a problem or produces some noticeable visual artifact, it's a bug in your component! Fix the bug instead of adding memoization. -1. Avoid [unnecessary Effects that update state.](/learn/you-might-not-need-an-effect) Most performance problems in React apps are caused by chains of updates originating from Effects that cause your components to render over and over. -1. Try to [remove unnecessary dependencies from your Effects.](/learn/removing-effect-dependencies) For example, instead of memoization, it's often simpler to move some object or a function inside an Effect or outside the component. +1. Когда один компонент визуально оборачивает другие компоненты, ему можно передать весь этот [JSX в виде дочерних компонентов](/learn/passing-props-to-a-component#passing-jsx-as-children). В таком случае, когда родительский компонент обновляет своё состояние, React будет знать, что дочерние компоненты не нуждаются в ререндере. +1. Предпочитайте локальное состояние и не [поднимайте его выше](/learn/sharing-state-between-components), чем это действительно необходимо. Не храните переходные состояния типа форм или проверок на hover в библиотеке для управления глобальным состоянием или на самом верху вашего дерева компонентов. +1. Держите ваши компоненты [чистыми](/learn/keeping-components-pure). Если ререндер компонента приводит к проблемам или производит какие-то визуальные артефакты – это баг! Исправьте его, а не прибегайте к мемоизации. +1. Избейгате лишних [Эффектов, которые обновляют состояние](/learn/you-might-not-need-an-effect). В React-приложениях большинство проблем с производительностью вызваны цепочками обновлений, которые создаются в Эффектах и вынуждают компоненты ререндериться снова и снова. +1. Постарайтесь [убрать лишние зависимости в Эффектах](/learn/removing-effect-dependencies). Иногда проще перенести функцию или объект внутрь функции Эффекта, или вынести их за пределы компонента, чем прибегать к мемоизации. -If a specific interaction still feels laggy, [use the React Developer Tools profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) to see which components would benefit the most from memoization, and add memoization where needed. These principles make your components easier to debug and understand, so it's good to follow them in any case. In the long term, we're researching [doing granular memoization automatically](https://www.youtube.com/watch?v=lGEMwh32soc) to solve this once and for all. +Если какие-то взаимодействия всё ещё ощущаются медленными, можно [воспользоваться профилировщиком из React DevTools](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html), чтобы посмотреть, каким компонентам больше всего нужна мемоизация, и затем добавить её там, где это необходимо. Эти принципы сделают ваши компоненты более простыми для отладки и понимания – поэтому ими не стоит пренебрегать. - + -#### Skipping recalculation with `useMemo` {/*skipping-recalculation-with-usememo*/} +#### Пропуск повторных вычислений при помощи `useMemo` {/*skipping-recalculation-with-usememo*/} -In this example, the `filterTodos` implementation is **artificially slowed down** so that you can see what happens when some JavaScript function you're calling during rendering is genuinely slow. Try switching the tabs and toggling the theme. +В данном примере функция `filterTodos` **искусственно замедлена**, чтобы показать, что случается в том случае, если вызываемая во время рендера функция действительно медленная. Попробуйте попереключаться между вкладками и попереключать тему. -Switching the tabs feels slow because it forces the slowed down `filterTodos` to re-execute. That's expected because the `tab` has changed, and so the entire calculation *needs* to re-run. (If you're curious why it runs twice, it's explained [here.](#my-calculation-runs-twice-on-every-re-render)) +Переключение вкладок ощущается таким медленным потому, что оно вынуждает перезапускаться замедленную функцию `filterTodos` каждый раз, когда изменяется значение `tab`. (Если интересно, почему она запускается дважды, объяснение можно найти [здесь](#my-calculation-runs-twice-on-every-re-render).) -Toggle the theme. **Thanks to `useMemo`, it's fast despite the artificial slowdown!** The slow `filterTodos` call was skipped because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render. +Переключите тему. **Благодаря `useMemo` это происходит быстро (несмотря на искусственное замедление).** Медленный вызов `filterTodos` был пропущен, потому что и `todos`, и `tab` (которые вы передаете как зависимости для `useMemo`) не изменились с момента последнего рендера. @@ -190,13 +190,13 @@ export default function App() { return ( <>
                -

                Note: filterTodos is artificially slowed down!

                +

                Примечание: filterTodos искусственно замедлена!

                  {visibleTodos.map(todo => (
                • @@ -260,10 +260,10 @@ export function createTodos() { } export function filterTodos(todos, tab) { - console.log('[ARTIFICIALLY SLOW] Filtering ' + todos.length + ' todos for "' + tab + '" tab.'); + console.log('[ЗАМЕДЛЕННО] Фильтрация ' + todos.length + ' todos для вкладки "' + tab + '"'); let startTime = performance.now(); while (performance.now() - startTime < 500) { - // Do nothing for 500 ms to emulate extremely slow code + // Ничего не делать 500 миллисекунд, чтобы сымитировать медленный код } return todos.filter(todo => { @@ -299,11 +299,11 @@ label { -#### Always recalculating a value {/*always-recalculating-a-value*/} +#### Повторное вычисление значения {/*always-recalculating-a-value*/} -In this example, the `filterTodos` implementation is also **artificially slowed down** so that you can see what happens when some JavaScript function you're calling during rendering is genuinely slow. Try switching the tabs and toggling the theme. +В данном примере функция `filterTodos` также замедлена, чтобы показать, что случается в том случае, если вызываемая во время рендера функция действительно медленная. Попробуйте попереключаться между вкладками и попереключать тему. -Unlike in the previous example, toggling the theme is also slow now! This is because **there is no `useMemo` call in this version,** so the artificially slowed down `filterTodos` gets called on every re-render. It is called even if only `theme` has changed. +Поскольку **в этом примере отсутствует вызов `useMemo`**, то искусственно замедленная функция `filterTodos` вызывается при каждом ререндере (даже в том случае, если изменилось только значение `theme`). @@ -320,13 +320,13 @@ export default function App() { return ( <>
                    -

                    Note: filterTodos is artificially slowed down!

                    +

                    Примечание: filterTodos искусственно замедлена!

                    {visibleTodos.map(todo => (
                  • {todo.completed ? @@ -386,10 +386,10 @@ export function createTodos() { } export function filterTodos(todos, tab) { - console.log('[ARTIFICIALLY SLOW] Filtering ' + todos.length + ' todos for "' + tab + '" tab.'); + console.log('[ЗАМЕДЛЕННО] Фильтрация ' + todos.length + ' todos для вкладки "' + tab + '"'); let startTime = performance.now(); while (performance.now() - startTime < 500) { - // Do nothing for 500 ms to emulate extremely slow code + // Ничего не делать 500 миллисекунд, чтобы сымитировать медленный код } return todos.filter(todo => { @@ -423,7 +423,7 @@ label { -However, here is the same code **with the artificial slowdown removed.** Does the lack of `useMemo` feel noticeable or not? +Ниже приведён код **без искусственного замедления**. Заметно ли отсутствие `useMemo`? @@ -440,13 +440,13 @@ export default function App() { return ( <>
                    { if (tab === 'all') { @@ -538,9 +538,9 @@ label {                     -Quite often, code without memoization works fine. If your interactions are fast enough, you might not need memoization. +Часто код и без мемоизации работает хорошо. Нет необходимости использовать мемоизацию, если вычисления не ресурсоёмкие. -You can try increasing the number of todo items in `utils.js` and see how the behavior changes. This particular calculation wasn't very expensive to begin with, but if the number of todos grows significantly, most of the overhead will be in re-rendering rather than in the filtering. Keep reading below to see how you can optimize re-rendering with `useMemo`. +Можете попробовать увеличить количество todo в `utils.js` и посмотреть, как это скажется на скорости работы приложения. Изначально эти вычисления не очень ресурсоёмкое, однако если существенно увеличить количество todo, то дополнительная нагрузка будет вызвана скорее ререндером, чем фильтрацией. Ниже рассмотрим способы оптимизации ререндеров при помощи `useMemo`. @@ -548,9 +548,9 @@ You can try increasing the number of todo items in `utils.js` and see how the be --- -### Skipping re-rendering of components {/*skipping-re-rendering-of-components*/} +### Пропуск ререндеров дочерних компонентов {/*skipping-re-rendering-of-components*/} -In some cases, `useMemo` can also help you optimize performance of re-rendering child components. To illustrate this, let's say this `TodoList` component passes the `visibleTodos` as a prop to the child `List` component: +В некоторых случаях `useMemo` можно использовать для оптимизации ререндеров дочерних компонентов. Допустим, что `TodoList` передаёт как проп `visibleTodos` дочернему компоненту `List`: ```js {5} export default function TodoList({ todos, tab, theme }) { @@ -563,9 +563,9 @@ export default function TodoList({ todos, tab, theme }) { } ``` -You've noticed that toggling the `theme` prop freezes the app for a moment, but if you remove `` from your JSX, it feels fast. This tells you that it's worth trying to optimize the `List` component. +В этом случае при изменении `theme` приложение будет на какое-то время подтормаживать. Однако если из разметки удалить ``, то всё будет работать быстро. -**By default, when a component re-renders, React re-renders all of its children recursively.** This is why, when `TodoList` re-renders with a different `theme`, the `List` component *also* re-renders. This is fine for components that don't require much calculation to re-render. But if you've verified that a re-render is slow, you can tell `List` to skip re-rendering when its props are the same as on last render by wrapping it in [`memo`:](/reference/react/memo) +**По умолчанию при ререндере некоторого компонента React рекурсивно ререндерит и всех его потомков.** По этой причине, когда `TodoList` ререндерится с другим значением `theme`, дочерний компонент `List` ререндерится *вместе* с ним. Это не страшно для компонентов, которые не производят никаких ресурсоёмких вычислений. Однако если ререндер заметно медленный (как с компонентом `List`), то имеет смысл обернуть его в [`memo`](/reference/react/memo). Это позволит избежать ререндеров, если пропсы с предыдущего рендера никак не изменились: ```js {3,5} import { memo } from 'react'; @@ -575,47 +575,46 @@ const List = memo(function List({ items }) { }); ``` -**With this change, `List` will skip re-rendering if all of its props are the *same* as on the last render.** This is where caching the calculation becomes important! Imagine that you calculated `visibleTodos` without `useMemo`: +**Теперь компонент `List` не будет ререндериться, если его пропсы с предыдущего рендера никак не изменились**. Однако представим, что `visibleTodos` вычисляется без `useMemo`: ```js {2-3,6-7} export default function TodoList({ todos, tab, theme }) { - // Every time the theme changes, this will be a different array... + // При каждом изменении theme функция filterTodos создаёт новый массив... const visibleTodos = filterTodos(todos, tab); return (
                    - {/* ... so List's props will never be the same, and it will re-render every time */} + {/* ... поэтому компонент List всегда будет получать новые пропсы и ререндериться каждый раз */}
                    ); } ``` -**In the above example, the `filterTodos` function always creates a *different* array,** similar to how the `{}` object literal always creates a new object. Normally, this wouldn't be a problem, but it means that `List` props will never be the same, and your [`memo`](/reference/react/memo) optimization won't work. This is where `useMemo` comes in handy: +**В примере ниже функция `filterTodos` всегда создаёт новый массив**, подобно тому как объектный литерал `{}` всегда создаёт новый объект. Это значит, что компонент `List` всегда будет получать новые пропсы, и оптимизация при помощи [`memo`](/reference/react/memo) не работает. Здесь на помощь приходит `useMemo`: ```js {2-3,5,9-10} export default function TodoList({ todos, tab, theme }) { - // Tell React to cache your calculation between re-renders... + // Просим React закешировать вычисления между ререндерами... const visibleTodos = useMemo( () => filterTodos(todos, tab), - [todos, tab] // ...so as long as these dependencies don't change... + [todos, tab] // ...и пока эти зависимости не изменяются... ); return (
                    - {/* ...List will receive the same props and can skip re-rendering */} + {/* ...List будет получать одинаковые пропсы и пропускать ререндеры */}
                    ); } ``` - -**By wrapping the `visibleTodos` calculation in `useMemo`, you ensure that it has the *same* value between the re-renders** (until dependencies change). You don't *have to* wrap a calculation in `useMemo` unless you do it for some specific reason. In this example, the reason is that you pass it to a component wrapped in [`memo`,](/reference/react/memo) and this lets it skip re-rendering. There are a few other reasons to add `useMemo` which are described further on this page. +В примере выше `visibleTodos` всегда будет иметь *одно и то же* значение, пока массив зависимостей остаётся неизменным. Следует помнить, что нет необходимости использовать `useMemo` без веской на то причины. Однако здесь это оправданно, поскольку `visibleTodos` передаётся как пропс в компонент, обёрнутый в [`memo`](/reference/react/memo), что позволяет пропускать лишние ререндеры. Существует ещё несколько причин, когда использование `useMemo` оправданно, – о них речь пойдёт ниже. -#### Memoizing individual JSX nodes {/*memoizing-individual-jsx-nodes*/} +#### Мемоизация отдельных JSX-узлов {/*memoizing-individual-jsx-nodes*/} -Instead of wrapping `List` in [`memo`](/reference/react/memo), you could wrap the `` JSX node itself in `useMemo`: +Вместо того чтобы оборачивать `List` в [`memo`](/reference/react/memo), можно обернуть сам JSX-узел `` в `useMemo`: ```js {3,6} export default function TodoList({ todos, tab, theme }) { @@ -629,25 +628,25 @@ export default function TodoList({ todos, tab, theme }) { } ``` -The behavior would be the same. If the `visibleTodos` haven't changed, `List` won't be re-rendered. +Поведение будет таким же. Компонент `List` не будет ререндериться, пока значение `visibleTodos` остаётся неизменным. -A JSX node like `` is an object like `{ type: List, props: { items: visibleTodos } }`. Creating this object is very cheap, but React doesn't know whether its contents is the same as last time or not. This is why by default, React will re-render the `List` component. +JSX-узел `` является простым объектом типа `{ type: List, props: { items: visibleTodos } }`. Создать такой объект очень дёшево, однако React не знает, осталось ли его содержимое прежним или нет. Поэтому по умолчанию React всегда будет ререндерить компонент `List`. -However, if React sees the same exact JSX as during the previous render, it won't try to re-render your component. This is because JSX nodes are [immutable.](https://en.wikipedia.org/wiki/Immutable_object) A JSX node object could not have changed over time, so React knows it's safe to skip a re-render. However, for this to work, the node has to *actually be the same object*, not merely look the same in code. This is what `useMemo` does in this example. +При этом, если React видит тот же JSX, который был при предыдущем рендере, он не будет ререндерить компонент. Это происходит потому что JSX-узлы [иммутабельны](https://ru.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%D1%8B%D0%B9_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82). Такие объекты узлов не могут быть изменены с течением времени, поэтому React знает, что пропустить ререндер безопасно. Однако чтобы это работало, узел должен быть *буквально тем же объектом*, а не только *выглядеть* таким же в коде. Это именно то, что делает `useMemo` в данном примере. -Manually wrapping JSX nodes into `useMemo` is not convenient. For example, you can't do this conditionally. This is usually why you would wrap components with [`memo`](/reference/react/memo) instead of wrapping JSX nodes. +Оборачивать JSX-узлы в `useMemo` не всегда удобно. Например, это нельзя делать по условию. По этой причине компоненты чаще оборачивают в [`memo`](/reference/react/memo). - + -#### Skipping re-rendering with `useMemo` and `memo` {/*skipping-re-rendering-with-usememo-and-memo*/} +#### Пропуск ререндеров при помощи `useMemo` и `memo` {/*skipping-re-rendering-with-usememo-and-memo*/} -In this example, the `List` component is **artificially slowed down** so that you can see what happens when a React component you're rendering is genuinely slow. Try switching the tabs and toggling the theme. +В данном примере компонент `List` **искусственно замедлен**, чтобы показать, что случается в том случае, если React-компонент действительно медленный. Попробуйте переключить вкладки и переключить тему. -Switching the tabs feels slow because it forces the slowed down `List` to re-render. That's expected because the `tab` has changed, and so you need to reflect the user's new choice on the screen. +Переключение между вкладками ощущается таким медленным, потому что оно вынуждает замедленный компонент `List` ререндериться. Такое поведение ожидаемо, поскольку проп `tab` изменился, и новые данные необходимо отобразить на экране. -Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleItems` array has not changed since the last render. The `visibleItems` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render. +Затем попробуйте переключить тему. **Благодаря `useMemo` в связке с [`memo`](/reference/react/memo) это происходит быстро, несмотря на искусственное замедление.** Поскольку ни `todos`, ни `tab`, указанные как зависимости в `useMemo`, не изменились с предыдущего рендера, то массив `visibleTodos` остался прежним, и компонент `List` пропустил ререндер. @@ -664,13 +663,13 @@ export default function App() { return ( <>
                    -

                    Note: List is artificially slowed down!

                    +

                    Примечание: компонент List искусственно замедлен!

              ); @@ -715,10 +714,10 @@ export default function TodoList({ todos, theme, tab }) { import { memo } from 'react'; const List = memo(function List({ items }) { - console.log('[ARTIFICIALLY SLOW] Rendering with ' + items.length + ' items'); + console.log('[ЗАМЕДЛЕННО] Рендер компонента с ' + items.length + ' элементами'); let startTime = performance.now(); while (performance.now() - startTime < 500) { - // Do nothing for 500 ms to emulate extremely slow code + // Ничего не делать 500 миллисекунд, чтобы сымитировать медленный код } return ( @@ -785,11 +784,11 @@ label { -#### Always re-rendering a component {/*always-re-rendering-a-component*/} +#### Повторный ререндер компонента {/*always-re-rendering-a-component*/} -In this example, the `List` implementation is also **artificially slowed down** so that you can see what happens when some React component you're rendering is genuinely slow. Try switching the tabs and toggling the theme. +В данном примере компонент `List` также искусственно замедлен, чтобы показать, что случается в том случае, если React-компонент действительно медленный. Попробуйте попереключаться между вкладками и попереключать тему. -Unlike in the previous example, toggling the theme is also slow now! This is because **there is no `useMemo` call in this version,** so the `visibleTodos` is always a different array, and the slowed down `List` component can't skip re-rendering. +В отличие от предыдущего примера, здесь отсутствует `useMemo`. По этой причине `visibleTodos` всегда будет новым массивом, и компонент `List` не сможет пропустить ререндер. @@ -806,13 +805,13 @@ export default function App() { return ( <>
              -

              Note: List is artificially slowed down!

              +

              Примечание: компонент List искусственно замедлен!

        ); @@ -853,10 +852,10 @@ export default function TodoList({ todos, theme, tab }) { import { memo } from 'react'; const List = memo(function List({ items }) { - console.log('[ARTIFICIALLY SLOW] Rendering with ' + items.length + ' items'); + console.log('[ЗАМЕДЛЕННО] Рендер компонента с ' + items.length + ' элементами'); let startTime = performance.now(); while (performance.now() - startTime < 500) { - // Do nothing for 500 ms to emulate extremely slow code + // Ничего не делать 500 миллисекунд, чтобы сымитировать медленный код } return ( @@ -921,7 +920,7 @@ label { -However, here is the same code **with the artificial slowdown removed.** Does the lack of `useMemo` feel noticeable or not? +Ниже приведён код **без искусственного замедления**. Заметно ли отсутствие `memo` и `useMemo`? @@ -938,13 +937,13 @@ export default function App() { return ( <>
        -Quite often, code without memoization works fine. If your interactions are fast enough, you don't need memoization. +Часто код и без мемоизации работает хорошо. Нет необходимости использовать мемоизацию, если вычисления не ресурсоёмкие. -Keep in mind that you need to run React in production mode, disable [React Developer Tools](/learn/react-developer-tools), and use devices similar to the ones your app's users have in order to get a realistic sense of what's actually slowing down your app. +Чтобы получить наиболее реалистичные данные относительно того, что может замедлять ваше приложение, React стоит запускать в продакшен-режиме, с отключёнными [React DevTools](/learn/react-developer-tools) и на устройстве, подобном тому, которое используют ваши пользователи. @@ -1056,9 +1055,9 @@ Keep in mind that you need to run React in production mode, disable [React Devel --- -### Memoizing a dependency of another Hook {/*memoizing-a-dependency-of-another-hook*/} +### Мемоизация зависимостей других хуков {/*memoizing-a-dependency-of-another-hook*/} -Suppose you have a calculation that depends on an object created directly in the component body: +Предположим, что у нас есть вычисления, зависящие от объекта, создаваемого внутри компонента: ```js {2} function Dropdown({ allItems, text }) { @@ -1066,44 +1065,44 @@ function Dropdown({ allItems, text }) { const visibleItems = useMemo(() => { return searchItems(allItems, searchOptions); - }, [allItems, searchOptions]); // 🚩 Caution: Dependency on an object created in the component body + }, [allItems, searchOptions]); // 🚩 Обратите внимание: зависимость от объекта, создаваемого внутри компонента // ... ``` -Depending on an object like this defeats the point of memoization. When a component re-renders, all of the code directly inside the component body runs again. **The lines of code creating the `searchOptions` object will also run on every re-render.** Since `searchOptions` is a dependency of your `useMemo` call, and it's different every time, React knows the dependencies are different, and recalculate `searchItems` every time. +Подобная зависимость сводит на нет все преимущества мемоизации. При ререндере компонента весь его внутренний код перезапускается, **включая создание объекта `searchOptions`**. И поскольку этот объект является зависимостью `useMemo`, React каждый раз будет заново вычислять значение `visibleItems`. -To fix this, you could memoize the `searchOptions` object *itself* before passing it as a dependency: +Чтобы исправить такое поведение, можно мемоизировать сам объект `searchOptions` перед тем как передавать его в виде зависимости: ```js {2-4} function Dropdown({ allItems, text }) { const searchOptions = useMemo(() => { return { matchMode: 'whole-word', text }; - }, [text]); // ✅ Only changes when text changes + }, [text]); // ✅ Вызывается только при изменении text const visibleItems = useMemo(() => { return searchItems(allItems, searchOptions); - }, [allItems, searchOptions]); // ✅ Only changes when allItems or searchOptions changes + }, [allItems, searchOptions]); // ✅ Вызывается только при изменении allItems или searchOptions // ... ``` -In the example above, if the `text` did not change, the `searchOptions` object also won't change. However, an even better fix is to move the `searchOptions` object declaration *inside* of the `useMemo` calculation function: +В примере выше `searchOptions` будет изменяться только при изменении `text`. При этом можно сделать ещё лучше – переместить объект `searchOptions` *внутрь* вычислительной функции `useMemo`: ```js {3} function Dropdown({ allItems, text }) { const visibleItems = useMemo(() => { const searchOptions = { matchMode: 'whole-word', text }; return searchItems(allItems, searchOptions); - }, [allItems, text]); // ✅ Only changes when allItems or text changes + }, [allItems, text]); // ✅ Вызывается только при изменении allItems или text // ... ``` -Now your calculation depends on `text` directly (which is a string and can't "accidentally" become different). +Теперь вычисления зависят напрямую от значения `text`, которое является строчным и не может измениться «незаметно». --- -### Memoizing a function {/*memoizing-a-function*/} +### Мемоизация функций {/*memoizing-a-function*/} -Suppose the `Form` component is wrapped in [`memo`.](/reference/react/memo) You want to pass a function to it as a prop: +Предположим, что компонент `Form` обёрнут в [`memo`](/reference/react/memo) и получает как проп функцию: ```js {2-7} export default function ProductPage({ productId, referrer }) { @@ -1118,9 +1117,9 @@ export default function ProductPage({ productId, referrer }) { } ``` -Just as `{}` creates a different object, function declarations like `function() {}` and expressions like `() => {}` produce a *different* function on every re-render. By itself, creating a new function is not a problem. This is not something to avoid! However, if the `Form` component is memoized, presumably you want to skip re-rendering it when no props have changed. A prop that is *always* different would defeat the point of memoization. +Подобно тому как объектный литерал `{}` создаёт новый объект, определение функции через `function() {}` или `() => {}` создаёт новую функцию при каждом ререндере. Само по себе создание функций не является проблемой (и этого, конечно, не стоит избегать). Однако поскольку компонент `Form` мемоизирован, стоит подумать о пропуске лишних ререндеров, если его пропсы остаются неизменными. -To memoize a function with `useMemo`, your calculation function would have to return another function: +Чтобы мемоизировать функцию, можно вернуть её из вычислительной функции `useMemo`: ```js {2-3,8-9} export default function Page({ productId, referrer }) { @@ -1137,7 +1136,7 @@ export default function Page({ productId, referrer }) { } ``` -This looks clunky! **Memoizing functions is common enough that React has a built-in Hook specifically for that. Wrap your functions into [`useCallback`](/reference/react/useCallback) instead of `useMemo`** to avoid having to write an extra nested function: +**Поскольку мемоизация функций – довольно распространённая задача, в React есть встроенный хук специально для этих целей**. Вместо `useMemo` можно обернуть функцию в [`useCallback`](/reference/react/useCallback) и избежать написания дополнительной вложенной функции: ```js {2,7} export default function Page({ productId, referrer }) { @@ -1152,88 +1151,87 @@ export default function Page({ productId, referrer }) { } ``` -The two examples above are completely equivalent. The only benefit to `useCallback` is that it lets you avoid writing an extra nested function inside. It doesn't do anything else. [Read more about `useCallback`.](/reference/react/useCallback) +Два примера выше абсолютно идентичны. Единственное преимущество использования хука `useCallback` в том, что он позволяет избежать написания дополнительной вложенной функции. Ознакомиться подробнее с хуком `useCallback` можно [здесь](/reference/react/useCallback). --- -## Troubleshooting {/*troubleshooting*/} +## Диагностика неполадок {/*troubleshooting*/} -### My calculation runs twice on every re-render {/*my-calculation-runs-twice-on-every-re-render*/} +### Вычисления запускаются дважды при каждом ререндере {/*my-calculation-runs-twice-on-every-re-render*/} -In [Strict Mode](/reference/react/StrictMode), React will call some of your functions twice instead of once: +В [строгом режиме](/reference/react/StrictMode) React запускает некоторые функции дважды: ```js {2,5,6} function TodoList({ todos, tab }) { - // This component function will run twice for every render. + // Функция компонента будет запускаться дважды при каждом рендере const visibleTodos = useMemo(() => { - // This calculation will run twice if any of the dependencies change. + // Эти вычисления также запустятся дважды, если любая из зависимостей изменится return filterTodos(todos, tab); }, [todos, tab]); // ... ``` -This is expected and shouldn't break your code. +Такое поведение ожидаемо, и не должно сломать ваш код. -This **development-only** behavior helps you [keep components pure.](/learn/keeping-components-pure) React uses the result of one of the calls, and ignores the result of the other call. As long as your component and calculation functions are pure, this shouldn't affect your logic. However, if they are accidentally impure, this helps you notice and fix the mistake. +Оно существует только в режиме разработки и помогает разработчику [хранить компоненты чистыми](/learn/keeping-components-pure). React будет использовать данные лишь одного из вызовов и проигнорирует все остальные. Это не должно негативно сказаться на работе приложения, если компонент и вычислительная функция чистые. Однако если в коде существуют функции с [побочными эффектами](https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%B1%D0%BE%D1%87%D0%BD%D1%8B%D0%B9_%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)), это поможет их обнаружить. -For example, this impure calculation function mutates an array you received as a prop: +Например, в коде ниже вычислительная функция мутирует массив, полученный из пропсов: ```js {2-3} const visibleTodos = useMemo(() => { - // 🚩 Mistake: mutating a prop + // 🚩 Ошибка: мутация пропса todos.push({ id: 'last', text: 'Go for a walk!' }); const filtered = filterTodos(todos, tab); return filtered; }, [todos, tab]); ``` -React calls your function twice, so you'd notice the todo is added twice. Your calculation shouldn't change any existing objects, but it's okay to change any *new* objects you created during the calculation. For example, if the `filterTodos` function always returns a *different* array, you can mutate *that* array instead: +Благодаря тому что React вызовет эту функцию дважды, разработчик заметит, что один и тот же todo был добавлен два раза. Изменять новые объекты, созданные внутри вычислений – нормально, но никакие существующие объекты изменяться *не должны*. Так, например, если функция `filterTodos` всегда возвращает *новый* массив, то мутировать его перед возвращением можно: ```js {3,4} const visibleTodos = useMemo(() => { const filtered = filterTodos(todos, tab); - // ✅ Correct: mutating an object you created during the calculation + // ✅ Мутация объекта, созданного в процессе вычислений filtered.push({ id: 'last', text: 'Go for a walk!' }); return filtered; }, [todos, tab]); ``` -Read [keeping components pure](/learn/keeping-components-pure) to learn more about purity. +Больше о сохранении компонентов чистым можно прочитать [здесь](/learn/keeping-components-pure). -Also, check out the guides on [updating objects](/learn/updating-objects-in-state) and [updating arrays](/learn/updating-arrays-in-state) without mutation. +Помимо того, можно ознакомиться с руководствами по обновлению [объектов](/learn/updating-objects-in-state) и [массивов](/learn/updating-arrays-in-state) без мутаций. --- -### My `useMemo` call is supposed to return an object, but returns undefined {/*my-usememo-call-is-supposed-to-return-an-object-but-returns-undefined*/} - -This code doesn't work: +### `useMemo` должен возвращать объект, а возвращает undefined {/*my-usememo-call-is-supposed-to-return-an-object-but-returns-undefined*/} +Этот код не работает: ```js {1-2,5} - // 🔴 You can't return an object from an arrow function with () => { + // 🔴 Такой записью вернуть объект из стрелочной функции нельзя: const searchOptions = useMemo(() => { matchMode: 'whole-word', text: text }, [text]); ``` -In JavaScript, `() => {` starts the arrow function body, so the `{` brace is not a part of your object. This is why it doesn't return an object, and leads to mistakes. You could fix it by adding parentheses like `({` and `})`: +В языке JavaScript запись `() => {` открывает тело стрелочной функции и скобка `{` не является частью объекта. По этой причине функция не возвращает объект, что и приводит к ошибке. Это можно исправить, добавив круглые скобки: `({` и `})`: ```js {1-2,5} - // This works, but is easy for someone to break again + // Этот код работает, однако его легко заново сломать const searchOptions = useMemo(() => ({ matchMode: 'whole-word', text: text }), [text]); ``` -However, this is still confusing and too easy for someone to break by removing the parentheses. +Подобная запись может сбивать с толку, и этот код можно заново сломать, случайно удалив скобки. -To avoid this mistake, write a `return` statement explicitly: +Чтобы этого избежать, можно явно написать `return`: ```js {1-3,6-7} - // ✅ This works and is explicit + // ✅ Этот код работает и при этом он описан явно const searchOptions = useMemo(() => { return { matchMode: 'whole-word', @@ -1244,57 +1242,57 @@ To avoid this mistake, write a `return` statement explicitly: --- -### Every time my component renders, the calculation in `useMemo` re-runs {/*every-time-my-component-renders-the-calculation-in-usememo-re-runs*/} +### Вычисления в `useMemo` запускаются при каждом рендере {/*every-time-my-component-renders-the-calculation-in-usememo-re-runs*/} -Make sure you've specified the dependency array as a second argument! +Убедитесь, что в `useMemo` был передан массив зависимостей. -If you forget the dependency array, `useMemo` will re-run the calculation every time: +Если не указан массив зависимостей, то `useMemo` будет перезапускаться каждый раз: ```js {2-3} function TodoList({ todos, tab }) { - // 🔴 Recalculates every time: no dependency array + // 🔴 Нет массива зависимостей – перезапускается каждый раз const visibleTodos = useMemo(() => filterTodos(todos, tab)); // ... ``` -This is the corrected version passing the dependency array as a second argument: +Исправленная версия с массивом зависимостей выглядит так: ```js {2-3} function TodoList({ todos, tab }) { - // ✅ Does not recalculate unnecessarily + // ✅ Не перезапускается без надобности const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); // ... ``` -If this doesn't help, then the problem is that at least one of your dependencies is different from the previous render. You can debug this problem by manually logging your dependencies to the console: +Если это не помогло, то проблема может быть в том, что какая-то зависимось получает новое значение при каждом рендере. Эту проблему можно отладить, выведя массив зависимостей в консоль: ```js const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); console.log([todos, tab]); ``` -You can then right-click on the arrays from different re-renders in the console and select "Store as a global variable" for both of them. Assuming the first one got saved as `temp1` and the second one got saved as `temp2`, you can then use the browser console to check whether each dependency in both arrays is the same: +Затем в консоли можно нажать по массивам правой кнопкой мыши и для обоих выбрать опцию «Сохранить как глобальную переменную». Первый сохраним как `temp1`, а второй – как `temp2`. Здесь же можно проверить, все ли зависимости в массивах одинаковые: ```js -Object.is(temp1[0], temp2[0]); // Is the first dependency the same between the arrays? -Object.is(temp1[1], temp2[1]); // Is the second dependency the same between the arrays? -Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ... +Object.is(temp1[0], temp2[0]); // Одинаковы ли первые значения? +Object.is(temp1[1], temp2[1]); // Одинаковы ли вторые значения? +Object.is(temp1[2], temp2[2]); // ... и так для всех зависимостей ... ``` -When you find which dependency breaks memoization, either find a way to remove it, or [memoize it as well.](#memoizing-a-dependency-of-another-hook) +После того как необходимая зависимость была найдена, можно попробовать убрать её или попытаться [мемоизировать](#memoizing-a-dependency-of-another-hook). --- -### I need to call `useMemo` for each list item in a loop, but it's not allowed {/*i-need-to-call-usememo-for-each-list-item-in-a-loop-but-its-not-allowed*/} +### Нужно вызвать `useMemo` для каждого элемента в цикле, но это запрещено {/*i-need-to-call-usememo-for-each-list-item-in-a-loop-but-its-not-allowed*/} -Suppose the `Chart` component is wrapped in [`memo`](/reference/react/memo). You want to skip re-rendering every `Chart` in the list when the `ReportList` component re-renders. However, you can't call `useMemo` in a loop: +Предположим, что компонент `Chart` обёрнут в [`memo`](/reference/react/memo). Необходимо пропустить ререндеры для каждого из них, если родительский компонент `ReportList` ререндерится. Однако вызывать `useMemo` в циклах запрещено: ```js {5-11} function ReportList({ items }) { return (
        {items.map(item => { - // 🔴 You can't call useMemo in a loop like this: + // 🔴 Нельзя вызвать `useMemo` внутри цикла const data = useMemo(() => calculateReport(item), [item]); return (
        @@ -1307,7 +1305,7 @@ function ReportList({ items }) { } ``` -Instead, extract a component for each item and memoize data for individual items: +Вместо этого можно извлечь новый компонент и мемоизировать данные внутри него: ```js {5,12-18} function ReportList({ items }) { @@ -1321,7 +1319,7 @@ function ReportList({ items }) { } function Report({ item }) { - // ✅ Call useMemo at the top level: + // ✅ Вызов useMemo на верхнем уровне компонента const data = useMemo(() => calculateReport(item), [item]); return (
        @@ -1331,7 +1329,7 @@ function Report({ item }) { } ``` -Alternatively, you could remove `useMemo` and instead wrap `Report` itself in [`memo`.](/reference/react/memo) If the `item` prop does not change, `Report` will skip re-rendering, so `Chart` will skip re-rendering too: +В качестве альтернативного варианта можно убрать `useMemo`, и вместо него обернуть сам `Report` в [`memo`](/reference/react/memo). В этом случае если проп `item` не изменится, то `Report` пропустит ререндер вместе со своим дочерним компонентом `Chart`: ```js {5,6,12} function ReportList({ items }) { diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md index bdec1ec8d..4af7e9535 100644 --- a/src/content/reference/react/useRef.md +++ b/src/content/reference/react/useRef.md @@ -228,7 +228,7 @@ function MyComponent() { If you *have to* read [or write](/reference/react/useState#storing-information-from-previous-renders) something during rendering, [use state](/reference/react/useState) instead. -When you break these rules, your component might still work, but most of the newer features we're adding to React will rely on these expectations. Read more about [keeping your components pure.](/learn/keeping-components-pure#where-you-can-cause-side-effects) +When you break these rules, your component might still work, but most of the newer features we're adding to React will rely on these expectations. Read more about [keeping your components pure.](/learn/keeping-components-pure#where-you-_can_-cause-side-effects) diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index d6258e4a2..2141181b0 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -11,6 +11,13 @@ "path": "/blog", "skipBreadcrumb": true, "routes": [ + { + "title": "React Canaries: Enabling Incremental Feature Rollout Outside Meta", + "titleForHomepage": "React Canaries: Incremental Feature Rollout", + "icon": "blog", + "date": "May 3, 2023", + "path": "/blog/2023/05/03/react-canaries" + }, { "title": "React Labs: What We've Been Working On – March 2023", "titleForHomepage": "React Labs: March 2023", diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index 89d5cffca..4683548e3 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -25,7 +25,7 @@ "path": "/learn/installation", "routes": [ { - "title": "Start a New React Project", + "title": "Начать новый React-проект", "path": "/learn/start-a-new-react-project" }, { @@ -186,7 +186,7 @@ }, { "title": "Removing Effect Dependencies", - "path": "/learn/removing-effect-dependencies" + "path": "/learn/removing-effect-dependencies" }, { "title": "Reusing Logic with Custom Hooks", diff --git a/src/sidebarReference.json b/src/sidebarReference.json index f009cca0e..5809e8fb6 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -120,6 +120,20 @@ } ] }, + { + "title": "Directives", + "path": "/reference/react/directives", + "routes": [ + { + "title": "'use client'", + "path": "/reference/react/use-client" + }, + { + "title": "'use server'", + "path": "/reference/react/use-server" + } + ] + }, { "hasSectionHeader": true, "sectionHeader": "react-dom@18.2.0" diff --git a/yarn.lock b/yarn.lock index 5aa76ffbe..d6e0c82c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -896,10 +896,10 @@ unist-util-visit "^4.0.0" vfile "^5.0.0" -"@next/env@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/env/-/env-12.3.2-canary.7.tgz#98cf3ed5e7d6af93965c708799ac02cb46ca3831" - integrity sha512-uk5yDvh8ra8PlIczZBTZKyt5Rf6a6mH2tGB3hwRAXD5hVLd74LzBQza2aYMEcDlRafAknsbL0dnqI3CkFYat9w== +"@next/env@13.4.1": + version "13.4.1" + resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.1.tgz#57322da2630b6bb6d7204577b0a18f6f9324db0c" + integrity sha512-eD6WCBMFjLFooLM19SIhSkWBHtaFrZFfg2Cxnyl3vS3DAdFRfnx5TY2RxlkuKXdIRCC0ySbtK9JXXt8qLCqzZg== "@next/eslint-plugin-next@12.0.3": version "12.0.3" @@ -908,70 +908,50 @@ dependencies: glob "7.1.7" -"@next/swc-android-arm-eabi@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.2-canary.7.tgz#21811767685d8a58756bbfff23a4e61c8da65a15" - integrity sha512-pusM/ylasGBweiwhINtqWCgy5bOjLmIctFD0etpmh9+DqCg09yu58hJ1Dn/UTW8EbB1nkTP1z3dEoMKLh4fV2A== - -"@next/swc-android-arm64@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.3.2-canary.7.tgz#278e709c31ac5aceebd5e7f66efb81dae40ccab6" - integrity sha512-x11T0ocPE9xrnqMeDzUMepN3P8CHIN8iiLgiFkbTbKTbSciuH3juOvKggJO9APZRG5Ch5eePWcCy2gHedAbhnA== - -"@next/swc-darwin-arm64@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.2-canary.7.tgz#7858ecf88a4e252ef6b66c59e38449a79647e362" - integrity sha512-tcO9hDaMfcbiaZp1B+HZcLzGGs36dnmjQ0YXyn6C88HEUoKyxanYleVHtTmWHlgsxxjZdDd/RzOze1ycWs2oXw== - -"@next/swc-darwin-x64@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.2-canary.7.tgz#9225324b6de548ce7fd21c31d4725910c5b7d136" - integrity sha512-WjAyU67zj69nRM2GNAnBLvghq4EHTyDzMO02GjG6yexVhDvkE0OFlvh0BQLI3DIOz+B3RjJRcW3OoHi8XzW9UA== - -"@next/swc-freebsd-x64@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.2-canary.7.tgz#cf3374f2c3ddf370ed27cac84258760b282b6981" - integrity sha512-cQrdPCMhP1Mc+pIt16FlC5BVgcXzLXRlm7qZ7wBRKG6r/IIIn/qNRFgQQcB3iyvfNZo7lURLKcfsxNmMGclldQ== - -"@next/swc-linux-arm-gnueabihf@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.2-canary.7.tgz#b8e82ec743ceadfce25b7e74dfb447913b603c44" - integrity sha512-LEL+dUe10FhQHyXq9Mul5pOJwKDtrAylh9chktWf8eFr14j/YrfPbkLHv1+tCK8brDV3afVJMl0IpoCo75Yfyg== - -"@next/swc-linux-arm64-gnu@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.2-canary.7.tgz#1711f46f004553f3c8ab7546b49e65f88abbbfd6" - integrity sha512-mbDqHk3C76UGIzkOv+G5NslKiSYIXyWQwbkuty0+0wLVJttWjWi2dMN7DFJQPMNvBefU9/vxVJdUnGVGEZfUXw== - -"@next/swc-linux-arm64-musl@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.2-canary.7.tgz#e20b71ce215280bc2cadcf94f9755fdf3ffc0b24" - integrity sha512-gJ3VQHuqb3ABiOKPxfWAJQdO4mp3yNnWIAPN8n52F7Zu38udbHXvcbIylWfQW/Qah+RRf7P7y2txH2kC07QOPA== - -"@next/swc-linux-x64-gnu@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.2-canary.7.tgz#176cf50080f121537877dbdfb7d667be19333a8c" - integrity sha512-/PBLiC+JfMJIzwMCQaSQgnLoIOjdSjTA9zarj2Kk1eCLjH8/VnsfBWtmP7TdbgIRYnZ8QKb4HXSOq94ZQS/fkw== - -"@next/swc-linux-x64-musl@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.2-canary.7.tgz#96b858043d76b87f90b7da43afe13c5942dbceea" - integrity sha512-Bf3goHoUd0SB58sVTMva0ByoLM+aEhm5YJRqsi7SsOAu9EAQwYfWgY2Hx60ah5i1N4ihYK0xjs8kwlfdDVOuow== - -"@next/swc-win32-arm64-msvc@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.2-canary.7.tgz#dd1a36d4afbecc623e71426897cea683a3a75666" - integrity sha512-aPRQ4dY5MuLgHCVdY+/Grgg4oX38pG4S0sT8mpatK3oIdjhj3961cj33QpPAy6dhhCs8m0/eCWYmM9KKlAAUsg== - -"@next/swc-win32-ia32-msvc@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.2-canary.7.tgz#a7455ea57f88345a92c0067e82aa1b7aa5728088" - integrity sha512-hr+TBDICVezyn0HDK4QootalbcuLj9F8qUzZZAw3gHz16rUDpqpnlRjw3RC99AzkKL7qMsdR/+SwnBlBY7ZK7Q== - -"@next/swc-win32-x64-msvc@12.3.2-canary.7": - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.2-canary.7.tgz#4e0d6d567c254e2cf00738f876ddafe5b611ee03" - integrity sha512-1n29b6meb54h/Mw/1xPoJB682nWbtEsUQo7rFJ6G44Nj3fYFXe+XOWQxWu6Sl8yvdBXcZRhRCHuAZGqYtmqorQ== +"@next/swc-darwin-arm64@13.4.1": + version "13.4.1" + resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.1.tgz#3748040d2dd0d89d3cdcc897f96aeda5130eed8f" + integrity sha512-eF8ARHtYfnoYtDa6xFHriUKA/Mfj/cCbmKb3NofeKhMccs65G6/loZ15a6wYCCx4rPAd6x4t1WmVYtri7EdeBg== + +"@next/swc-darwin-x64@13.4.1": + version "13.4.1" + resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.1.tgz#c59fc270005f17e04eb7eab4fd68793d0e3409a4" + integrity sha512-7cmDgF9tGWTgn5Gw+vP17miJbH4wcraMHDCOHTYWkO/VeKT73dUWG23TNRLfgtCNSPgH4V5B4uLHoZTanx9bAw== + +"@next/swc-linux-arm64-gnu@13.4.1": + version "13.4.1" + resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.1.tgz#1aef371bcef5d832d7f7e3aec3e68cfb98282393" + integrity sha512-qwJqmCri2ie8aTtE5gjTSr8S6O8B67KCYgVZhv9gKH44yvc/zXbAY8u23QGULsYOyh1islWE5sWfQNLOj9iryg== + +"@next/swc-linux-arm64-musl@13.4.1": + version "13.4.1" + resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.1.tgz#2522927cb0af6918405a49f5a1d1687d6847f3ec" + integrity sha512-qcC54tWNGDv/VVIFkazxhqH1Bnagjfs4enzELVRlUOoJPD2BGJTPI7z08pQPbbgxLtRiu8gl2mXvpB8WlOkMeA== + +"@next/swc-linux-x64-gnu@13.4.1": + version "13.4.1" + resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.1.tgz#5ec9418a35510048a5ceb79ed300463e1a9b312d" + integrity sha512-9TeWFlpLsBosZ+tsm/rWBaMwt5It9tPH8m3nawZqFUUrZyGRfGcI67js774vtx0k3rL9qbyY6+3pw9BCVpaYUA== + +"@next/swc-linux-x64-musl@13.4.1": + version "13.4.1" + resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.1.tgz#3478b9c89b75c1d0e7def9f35a9a77cb15d1a115" + integrity sha512-sNDGaWmSqTS4QRUzw61wl4mVPeSqNIr1OOjLlQTRuyInxMxtqImRqdvzDvFTlDfdeUMU/DZhWGYoHrXLlZXe6A== + +"@next/swc-win32-arm64-msvc@13.4.1": + version "13.4.1" + resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.1.tgz#efe53d48ff51d2485eabb910ab7caee78425fc01" + integrity sha512-+CXZC7u1iXdLRudecoUYbhbsXpglYv8KFYsFxKBPn7kg+bk7eJo738wAA4jXIl8grTF2mPdmO93JOQym+BlYGA== + +"@next/swc-win32-ia32-msvc@13.4.1": + version "13.4.1" + resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.1.tgz#952cdf1c53df46a90d5151d99310195d2c384e55" + integrity sha512-vIoXVVc7UYO68VwVMDKwJC2+HqAZQtCYiVlApyKEeIPIQpz2gpufzGxk1z3/gwrJt/kJ5CDZjlhYDCzd3hdz+g== + +"@next/swc-win32-x64-msvc@13.4.1": + version "13.4.1" + resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.1.tgz#447b7dcee5f5d4824cdff331a4ec34b13d0b449d" + integrity sha512-n8V5ImLQZibKTu10UUdI3nIeTLkliEXe628qxqW9v8My3BAH2a7H0SaCqkV2OgqFnn8sG1wxKYw9/SNJ632kSA== "@nodelib/fs.scandir@2.1.5": version "2.1.5" @@ -1022,10 +1002,10 @@ resolved "https://registry.yarnpkg.com/@stitches/core/-/core-1.2.8.tgz#dce3b8fdc764fbc6dbea30c83b73bfb52cf96173" integrity sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg== -"@swc/helpers@0.4.11": - version "0.4.11" - resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de" - integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw== +"@swc/helpers@0.5.1": + version "0.5.1" + resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.1.tgz#e9031491aa3f26bfcc974a67f48bd456c8a5357a" + integrity sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg== dependencies: tslib "^2.4.0" @@ -1684,6 +1664,13 @@ browserslist@^4.20.2: node-releases "^2.0.6" update-browserslist-db "^1.0.5" +busboy@1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893" + integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA== + dependencies: + streamsearch "^1.1.0" + bytes@3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5" @@ -1852,6 +1839,11 @@ cli-truncate@^3.1.0: slice-ansi "^5.0.0" string-width "^5.0.0" +client-only@0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" + integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== + codesandbox-import-util-types@^1.3.7: version "1.3.7" resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-1.3.7.tgz#7a6097e248a75424d13b06b74368cd76bd2b3e10" @@ -4488,31 +4480,28 @@ next-tick@^1.1.0: resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb" integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ== -next@12.3.2-canary.7: - version "12.3.2-canary.7" - resolved "https://registry.yarnpkg.com/next/-/next-12.3.2-canary.7.tgz#c739348174a3d7d97a638aa409376a96577a31d8" - integrity sha512-zUosveWzpeRVy7j4ANoJ4gu0TBrkLYwPlIUEXrqqs/zLpHMu+tanxA1R1ts2d7h/2dSmeVZgGcHiVcHj5uspEA== +next@^13.4.1: + version "13.4.1" + resolved "https://registry.yarnpkg.com/next/-/next-13.4.1.tgz#8d23f94c81b3f9cc8b34165ad528457e5befd726" + integrity sha512-JBw2kAIyhKDpjhEWvNVoFeIzNp9xNxg8wrthDOtMctfn3EpqGCmW0FSviNyGgOSOSn6zDaX48pmvbdf6X2W9xA== dependencies: - "@next/env" "12.3.2-canary.7" - "@swc/helpers" "0.4.11" + "@next/env" "13.4.1" + "@swc/helpers" "0.5.1" + busboy "1.6.0" caniuse-lite "^1.0.30001406" postcss "8.4.14" - styled-jsx "5.0.7" - use-sync-external-store "1.2.0" + styled-jsx "5.1.1" + zod "3.21.4" optionalDependencies: - "@next/swc-android-arm-eabi" "12.3.2-canary.7" - "@next/swc-android-arm64" "12.3.2-canary.7" - "@next/swc-darwin-arm64" "12.3.2-canary.7" - "@next/swc-darwin-x64" "12.3.2-canary.7" - "@next/swc-freebsd-x64" "12.3.2-canary.7" - "@next/swc-linux-arm-gnueabihf" "12.3.2-canary.7" - "@next/swc-linux-arm64-gnu" "12.3.2-canary.7" - "@next/swc-linux-arm64-musl" "12.3.2-canary.7" - "@next/swc-linux-x64-gnu" "12.3.2-canary.7" - "@next/swc-linux-x64-musl" "12.3.2-canary.7" - "@next/swc-win32-arm64-msvc" "12.3.2-canary.7" - "@next/swc-win32-ia32-msvc" "12.3.2-canary.7" - "@next/swc-win32-x64-msvc" "12.3.2-canary.7" + "@next/swc-darwin-arm64" "13.4.1" + "@next/swc-darwin-x64" "13.4.1" + "@next/swc-linux-arm64-gnu" "13.4.1" + "@next/swc-linux-arm64-musl" "13.4.1" + "@next/swc-linux-x64-gnu" "13.4.1" + "@next/swc-linux-x64-musl" "13.4.1" + "@next/swc-win32-arm64-msvc" "13.4.1" + "@next/swc-win32-ia32-msvc" "13.4.1" + "@next/swc-win32-x64-msvc" "13.4.1" nice-try@^1.0.4: version "1.0.5" @@ -5357,13 +5346,13 @@ react-devtools-inline@4.4.0: dependencies: es6-symbol "^3" -react-dom@0.0.0-experimental-cb5084d1c-20220924: - version "0.0.0-experimental-cb5084d1c-20220924" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-cb5084d1c-20220924.tgz#7a8334c5cf4baeb5651ca76fc9eb92ebbaf223bf" - integrity sha512-0IHzPGHESn3uu8nI1w5596GX8bCGCE94DpaHkKSGWOlB6uhoVecU0fyOCkkNuB4cMc9WeOWiH2gsM100EWZDPQ== +react-dom@^0.0.0-experimental-16d053d59-20230506: + version "0.0.0-experimental-16d053d59-20230506" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-16d053d59-20230506.tgz#1870c355f1027262992b2226191810ba15eedab3" + integrity sha512-I4PIT9ZAdDgpbav9BxfzPv2p5otJz6BEbFEBvFwd1BnQJmtkKKApUU7RYdGKnwY2/r6hdfxPm2pne+NhiyBkzg== dependencies: loose-envify "^1.1.0" - scheduler "0.0.0-experimental-cb5084d1c-20220924" + scheduler "0.0.0-experimental-16d053d59-20230506" react-is@^16.13.1: version "16.13.1" @@ -5375,10 +5364,10 @@ react-is@^17.0.2: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -react@0.0.0-experimental-cb5084d1c-20220924: - version "0.0.0-experimental-cb5084d1c-20220924" - resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-cb5084d1c-20220924.tgz#ab661af674be824ae2989467506443b8bc4318d3" - integrity sha512-66AdfxkJrwCaCEKT0LQRd9J9GQ9T+yN7Wx9XT+tNxKycYQ0Exm+DZxOTedagWDlsFMXroyhrTWzgdC18R2PaOQ== +react@^0.0.0-experimental-16d053d59-20230506: + version "0.0.0-experimental-16d053d59-20230506" + resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-16d053d59-20230506.tgz#98a7a9d19ab1820f882111ce4fc4e23f3cb8aaad" + integrity sha512-8PdloFcanNcryJLohpr4rVQfB4oJvsL0Z+TzJ8B66RxauwF95QqUNorGsK1heESrtj4As0oHCmiZkoYzA4uW8w== dependencies: loose-envify "^1.1.0" @@ -5709,10 +5698,10 @@ safe-buffer@~5.1.1: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== -scheduler@0.0.0-experimental-cb5084d1c-20220924: - version "0.0.0-experimental-cb5084d1c-20220924" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-cb5084d1c-20220924.tgz#9986680e1fbf7e4ccfe7606fef5920939d3a1abe" - integrity sha512-SeszKCdhM5OHxNMStjpKIAaloARUMZqIpDZjkZeGuRsyr7YlAqvlsCXyee4ZQOOU1pbr7BIvQntKy5Hil+DQJA== +scheduler@0.0.0-experimental-16d053d59-20230506: + version "0.0.0-experimental-16d053d59-20230506" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-16d053d59-20230506.tgz#cb76957af2849452a5e40c82fb53168da255e32f" + integrity sha512-gGnyU4CkC/+msd1dOQW9zuquI3GoEziuS42soP0AvbTCvRkeU4qhR/mRRaU+/a7JK/OFeSSudcz7enkrkZdSPA== dependencies: loose-envify "^1.1.0" @@ -5941,6 +5930,11 @@ statuses@2.0.1: resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63" integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ== +streamsearch@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764" + integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg== + string-argv@^0.3.1: version "0.3.1" resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da" @@ -6066,10 +6060,12 @@ style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" -styled-jsx@5.0.7: - version "5.0.7" - resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.7.tgz#be44afc53771b983769ac654d355ca8d019dff48" - integrity sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA== +styled-jsx@5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f" + integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw== + dependencies: + client-only "0.0.1" supports-color@^5.3.0: version "5.5.0" @@ -6494,11 +6490,6 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" -use-sync-external-store@1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" - integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== - util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" @@ -6684,6 +6675,11 @@ yaml@^1.10.0, yaml@^1.10.2: resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b" integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== +zod@3.21.4: + version "3.21.4" + resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db" + integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw== + zwitch@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.2.tgz#91f8d0e901ffa3d66599756dde7f57b17c95dce1"