Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Update React Context Documentation #593

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions pages/docs/getting-started.en-US.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ Inside your React project directory, run the following:
</Tab>
</Tabs>


## Quick Start [#quick-start]

For normal RESTful APIs with JSON data, first you need to create a `fetcher` function, which is just a wrapper of the native `fetch`:
Expand Down Expand Up @@ -145,7 +144,7 @@ function Avatar ({ user }) {
Usually, we need to keep all the data fetching in the top level component and add props to every component deep down the tree.
The code will become harder to maintain if we add more data dependency to the page.

Although we can avoid passing props using [Context](https://reactjs.org/docs/context.html), there's still the dynamic content problem:
Although we can avoid passing props using [Context](https://react.dev/learn/passing-data-deeply-with-context), there's still the dynamic content problem:
components inside the page content can be dynamic, and the top level component might not know what data will be needed by its child components.

SWR solves the problem perfectly. With the `useUser` hook we just created, the code can be refactored to:
Expand Down
2 changes: 1 addition & 1 deletion pages/docs/getting-started.es-ES.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ Por lo general, necesitamos mantener todos los datos que se obtienen en el compo
añadir las props a cada componente dentro del árbol. El código será más difícil de mantener si añadimos más
dependencia de datos a la página.

Aunque podamos evitar pasar props usando [Context](https://reactjs.org/docs/context.html), sigue existiendo problema con el contenido dinámico:
Aunque podamos evitar pasar props usando [Context](https://react.dev/learn/passing-data-deeply-with-context), sigue existiendo problema con el contenido dinámico:
Los componentes dentro del contenido de la página pueden ser dinámicos, y componente de nivel superiror puede no saber qué datos necesitarán sus componentes hijos.

SWR resuelve el problema perfectamente, Con el hook `useUser` que acabamos de crear, el código puede ser refactorizado a:
Expand Down
2 changes: 1 addition & 1 deletion pages/docs/getting-started.fr-FR.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ function Avatar ({ user }) {
Normalement, on doit garder toutes les données dans le composant primaire et ajouter des props à chaque composant dans l'arborescence.
Le code devient plus difficile à maintenir si on ajoute plus de données à la page.

Bien que l'on puisse éviter de passer les données via les props en utilisant [Context](https://reactjs.org/docs/context.html), il y a toujours le problème du contenu dynamique :
Bien que l'on puisse éviter de passer les données via les props en utilisant [Context](https://react.dev/learn/passing-data-deeply-with-context), il y a toujours le problème du contenu dynamique :
Les composants à l'intérieur des pages peuvent être dynamiques, et le composant de niveau supérieur ne sait peut-être pas quelles données seront nécessaires par ses composants enfants.

SWR résout parfaitement le problème. Avec le hook `useUser` que nous venons de créer, le code peut être refactorisé en :
Expand Down
2 changes: 1 addition & 1 deletion pages/docs/getting-started.ja.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ function Avatar ({ user }) {
通常、すべてのデータをトップレベルのコンポーネントに保持し、ツリーの奥深くにあるすべてのコンポーネントに props を追加する必要があります。
ページにデータの依存関係を追加すると、コードの保守が難しくなります。

[Context](https://reactjs.org/docs/context.html) を使って props を渡すことは避けられますが、動的なコンテンツの問題は残ります:
[Context](https://react.dev/learn/passing-data-deeply-with-context) を使って props を渡すことは避けられますが、動的なコンテンツの問題は残ります:
ページコンテンツ内のコンポーネントは動的に変化する可能性があり、トップレベルのコンポーネントは、子コンポーネントがどのようなデータが必要かを知らないかもしれません。

SWR はその問題を完璧に解決してくれます。 先ほど作成した `useUser` フックを使って、コードをリファクタリングしましょう:
Expand Down
2 changes: 1 addition & 1 deletion pages/docs/getting-started.ko.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ function Avatar ({ user }) {
보통 최상위 레벨 컴포넌트에서 가져온 모든 데이터를 유지하고 트리 아래의 모든 자식 컴포넌트의 props로 추가해야 합니다.
페이지에 더 많은 데이터 의존성을 추가한다면 코드는 점점 유지하기가 힘들어집니다.

[Context](https://reactjs.org/docs/context.html)를 사용하여 props 전달을 피할 수 있습니다만 동적 콘텐츠 문제가 여전히 존재합니다:
[Context](https://react.dev/learn/passing-data-deeply-with-context)를 사용하여 props 전달을 피할 수 있습니다만 동적 콘텐츠 문제가 여전히 존재합니다:
페이지 콘텐츠 내 컴포넌트들은 동적일 수 있으며, 최상위 레벨 컴포넌트는 그 자식 컴포넌트가 필요로하는 데이터가 무엇인지 알 수 없을 수도 있습니다.

SWR은 이 문제를 완벽하게 해결합니다. 우리가 막 생성한 `useUser` hook을 사용해 다음과 같이 리팩토링할 수 있습니다.
Expand Down
2 changes: 1 addition & 1 deletion pages/docs/getting-started.pt-BR.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ function Avatar ({ user }) {
Normalmente, nós precisamos manter todos os dados de carregamento no componente principal e adicionar props para todos os componentes.
O código fica mais difícil de manter se adicionarmos mais dependências de dados à página.

Apesar que possamos evitar passar props para componentes filhos, isto é, usar [Context](https://reactjs.org/docs/context.html), ainda há o problema do conteúdo dinâmico:
Apesar que possamos evitar passar props para componentes filhos, isto é, usar [Context](https://react.dev/learn/passing-data-deeply-with-context), ainda há o problema do conteúdo dinâmico:
componentes dentro da página podem ser dinâmicos, e o componente principal pode não saber quais dados serão necessários por seus componentes filhos.

SWR resolve o problema perfeitamente. Com o hook `useUser`, o código pode ser refatorado para:
Expand Down
2 changes: 1 addition & 1 deletion pages/docs/getting-started.zh-CN.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ function Avatar({ user }) {

通常,我们需要将所有的数据请求都保存在顶级组件中,并为树深处的每个组件添加 props。如果我们给页面添加更多的数据依赖,代码将变得更加难以维护。

虽然我们可以使用 [Context](https://reactjs.org/docs/context.html) 来避免传递 props,但仍然存在动态内容问题:页面内容中的组件可以是动态的,顶级组件可能不知道其子组件将需要什么数据。
虽然我们可以使用 [Context](https://react.dev/learn/passing-data-deeply-with-context) 来避免传递 props,但仍然存在动态内容问题:页面内容中的组件可以是动态的,顶级组件可能不知道其子组件将需要什么数据。

SWR 完美地解决了这个问题。使用我们刚刚创建的 `useUser` hook,可以将代码重构为:

Expand Down