From 0874aa98170a712a67cfdd3c7a543711dfa93c6a Mon Sep 17 00:00:00 2001 From: hajar sadeghi Date: Fri, 21 Feb 2020 15:39:59 +0330 Subject: [PATCH 01/13] firt paragraph translated --- content/docs/context.md | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index c6882fe08..c5858dcde 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -4,26 +4,26 @@ title: Context permalink: docs/context.html --- -Context provides a way to pass data through the component tree without having to pass props down manually at every level. +Context راهی را برای انتقال داده از بین درخت کامپوننت بدون نیاز به انتقال دستیه props به پایین در هر سطح فراهم می‌کند. -In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree. +در یک اپلیکیشن معمول ری‌اکت, داده از طریق props از بالا به پایین (والدین به فرزند) منتقل می‌شود, اما این کار برای انواع خاصی از props ها (برای مثال: locale preference, تم رابط کاربری) که مورد نیاز بسیاری از کامپوننت ها در یک اپلیکیشن است می‌تواند سنگین باشد. Context راهی را برای به اشتراک گذاری مقادیری مانند این بدون نیاز به انتقال prop به صورت صریح از طریق هر سطح درخت فراهم می‌کند. -- [When to Use Context](#when-to-use-context) -- [Before You Use Context](#before-you-use-context) +- [چه موقع باید از Context استفاده کرد](#when-to-use-context) +- [قبل از اینکه از Context استفاده کنید](#before-you-use-context) - [API](#api) - [React.createContext](#reactcreatecontext) - [Context.Provider](#contextprovider) - [Class.contextType](#classcontexttype) - [Context.Consumer](#contextconsumer) - [Context.displayName](#contextdisplayname) -- [Examples](#examples) - - [Dynamic Context](#dynamic-context) - - [Updating Context from a Nested Component](#updating-context-from-a-nested-component) - - [Consuming Multiple Contexts](#consuming-multiple-contexts) -- [Caveats](#caveats) -- [Legacy API](#legacy-api) +- [مثال ها](#examples) + - [Context پویا](#dynamic-context) + - [به‌روز‌رسانی Context از یک کامپوننت تودرتو](#updating-context-from-a-nested-component) + - [مصرف چندین Context](#consuming-multiple-contexts) +- [هشدارها](#caveats) +- [API موروثی](#legacy-api) -## When to Use Context {#when-to-use-context} +## چه موقع باید از Context استفاده کرد {#when-to-use-context} Context is designed to share data that can be considered "global" for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a "theme" prop in order to style the Button component: @@ -33,7 +33,7 @@ Using context, we can avoid passing props through intermediate elements: `embed:context/motivation-solution.js` -## Before You Use Context {#before-you-use-context} +## قبل از اینکه از Context استفاده کنید {#before-you-use-context} Context is primarily used when some data needs to be accessible by *many* components at different nesting levels. Apply it sparingly because it makes component reuse more difficult. @@ -136,7 +136,7 @@ Changes are determined by comparing the new and old values using the same algori > Note > -> The way changes are determined can cause some issues when passing objects as `value`: see [Caveats](#caveats). +> The way changes are determined can cause some issues when passing objects as `value`: see [هشدارها](#caveats). ### `Class.contextType` {#classcontexttype} @@ -166,7 +166,7 @@ The `contextType` property on a class can be assigned a Context object created b > Note: > -> You can only subscribe to a single context using this API. If you need to read more than one see [Consuming Multiple Contexts](#consuming-multiple-contexts). +> You can only subscribe to a single context using this API. If you need to read more than one see [مصرف چندین Context](#consuming-multiple-contexts). > > If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use a **static** class field to initialize your `contextType`. @@ -211,9 +211,9 @@ MyContext.displayName = 'MyDisplayName'; // "MyDisplayName.Consumer" in DevTools ``` -## Examples {#examples} +## مثال ها {#examples} -### Dynamic Context {#dynamic-context} +### Context پویا {#dynamic-context} A more complex example with dynamic values for the theme: @@ -226,7 +226,7 @@ A more complex example with dynamic values for the theme: **app.js** `embed:context/theme-detailed-app.js` -### Updating Context from a Nested Component {#updating-context-from-a-nested-component} +### به‌روز‌رسانی Context از یک کامپوننت تودرتو {#updating-context-from-a-nested-component} It is often necessary to update the context from a component that is nested somewhere deeply in the component tree. In this case you can pass a function down through the context to allow consumers to update the context: @@ -258,7 +258,7 @@ To get around this, lift the value into the parent's state: `embed:context/reference-caveats-solution.js` -## Legacy API {#legacy-api} +## API موروثی {#legacy-api} > Note > From 25f8bcb3fafb9f747c0e35c4e459465b769816c2 Mon Sep 17 00:00:00 2001 From: hajar sadeghi Date: Tue, 24 Mar 2020 19:26:44 +0430 Subject: [PATCH 02/13] first draft is done, needs review --- content/docs/context.md | 105 +++++++++++++++++++++------------------- 1 file changed, 54 insertions(+), 51 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index c5858dcde..61e56b1bb 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -25,37 +25,37 @@ Context راهی را برای انتقال داده از بین درخت کام ## چه موقع باید از Context استفاده کرد {#when-to-use-context} -Context is designed to share data that can be considered "global" for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a "theme" prop in order to style the Button component: +Context برای به اشتراک گذاری داده ای طراحی شده است که می‌تواند برای یک درخت از ری‌اکت کامپوننت ها به صورت عمومی در نظر گرفته شود٬ مانند کاربر تایید شده‌ی فعلی٬ زمینه٬ یا زبان ترجیحی. برای مثال٬ در کد زیر ما یک prop به نام "theme" را به صورت دستی برای style دادن کامپوننت Button انتقال می‌دهیم: `embed:context/motivation-problem.js` -Using context, we can avoid passing props through intermediate elements: +با استفاده از context, ما می‌توانیم از انتقال props بین المنت‌های میانی اجتناب کنیم: `embed:context/motivation-solution.js` ## قبل از اینکه از Context استفاده کنید {#before-you-use-context} -Context is primarily used when some data needs to be accessible by *many* components at different nesting levels. Apply it sparingly because it makes component reuse more difficult. +Context در درجه اول زمانی استفاده می‌شود که برخی از داده‌ها باید توسط *بسیاری* از کامپوننت‌ها در سطح‌های مختلف تودرتویی در دسترس قرار بگیرند. از آن کم استفاده کنید چرا که استفاده مجدد کامپوننت را سخت‌تر می‌کند. -**If you only want to avoid passing some props through many levels, [component composition](/docs/composition-vs-inheritance.html) is often a simpler solution than context.** +**اگر فقط می‌خواهید که از انتقال برخی از داده‌ها از بین بسیاری از سطح‌ها اجتناب کنید, [ترکیب‌بندی کامپوننت](/docs/composition-vs-inheritance.html) اغلب راه‌حلی ساده‌تر از context می‌باشد.** -For example, consider a `Page` component that passes a `user` and `avatarSize` prop several levels down so that deeply nested `Link` and `Avatar` components can read it: +برای مثال٬ یک کامپوننت به نام `Page` را در نظر بگیرید که یک prop به نام `user` و `avatarSize` را چندین سطح به پایین منتقل می‌کند به طوری که کامپوننت‌های عمیقا تودرتو شده‌ی `Link` و `Avatar` بتوانند آن را بخوانند: ```js -// ... which renders ... +// ... که رندر می‌کند ... -// ... which renders ... +// ... که رندر می‌کند ... -// ... which renders ... +// ... که رندر می‌کند ... ``` -It might feel redundant to pass down the `user` and `avatarSize` props through many levels if in the end only the `Avatar` component really needs it. It's also annoying that whenever the `Avatar` component needs more props from the top, you have to add them at all the intermediate levels too. +انتقال propsهای `user` و `avatarSize` به پایین از بین بسیاری از سطح‌ها ممکن است زائد به نظر بیاید اگر در نهایت فقط کامپوننت `Avatar` است که به آن نیاز دارد. این نیز آزاردهنده است که هر زمانی که کامپوننت `Avatar` به تعداد بیشتری props از بالا احتیاج داشته باشد٬ شما باید آن‌ها را در تمامی سطح‌های میانی هم اضافه کنید. -One way to solve this issue **without context** is to [pass down the `Avatar` component itself](/docs/composition-vs-inheritance.html#containment) so that the intermediate components don't need to know about the `user` or `avatarSize` props: +یک راه حل برای این مسئله **بدون context** این است که [خود کامپوننت `Avatar` را به پایین انتقال دهیم](/docs/composition-vs-inheritance.html#containment) به طوری که کامپوننت‌های میانی نیازی به دانستن درمورد propsهای `user` یا `avatar` نداشته باشند: ```js function Page(props) { @@ -68,21 +68,23 @@ function Page(props) { return ; } -// Now, we have: +// اکنون, داریم: -// ... which renders ... +// ... که رندر می‌کند ... -// ... which renders ... +// ... که رندر می‌کند ... -// ... which renders ... +// ... که رندر می‌کند ... {props.userLink} ``` -With this change, only the top-most Page component needs to know about the `Link` and `Avatar` components' use of `user` and `avatarSize`. +با این تغییر٬ فقط بالاترین کامپوننت یعنی Page باید در مورد استفاده `user` و ‍`avatarsize` توسط کامپوننت‌های `Link` و `Avatar` بداند. -This *inversion of control* can make your code cleaner in many cases by reducing the amount of props you need to pass through your application and giving more control to the root components. However, this isn't the right choice in every case: moving more complexity higher in the tree makes those higher-level components more complicated and forces the lower-level components to be more flexible than you may want. +این *وارونگی کنترل* در بسیاری از موارد می‌تواند کد شما را از طریق کاهش تعداد propsهایی که باید در اپلیکیشن خود انتقال دهید تمیزتر کند و کنترل بیشتری به کامپوننت‌های پایه می‌دهد. +با این حال٬ این کار در هر موردی تصمیم درست نیست: انتقال پیچیدگی بیشتر به بالا در درخت باعث پیچیده‌تر شدن کامپوننت‌های سطح-بالا می‌شود و ممکن است کامپوننت‌های سطح-پایین را مجبور کند انعطاف‌پذیرتر از آنچه که می‌خواهید شوند. -You're not limited to a single child for a component. You may pass multiple children, or even have multiple separate "slots" for children, [as documented here](/docs/composition-vs-inheritance.html#containment): +شما برای یک کامپوننت محدود به یک فرزند نیستید. شما می‌توانید چندین فرزند٬ یا حتی چندین "slots" جداگانه برای فرزندان٬ [همانطور که در اینجا مستند شده است +](/docs/composition-vs-inheritance.html#containment)انتقال دهید: ```js function Page(props) { @@ -104,9 +106,9 @@ function Page(props) { } ``` -This pattern is sufficient for many cases when you need to decouple a child from its immediate parents. You can take it even further with [render props](/docs/render-props.html) if the child needs to communicate with the parent before rendering. +این الگو در بسیاری از مواردی که باید یک فرزند را از والدین نزدیک آن جدا کرد کافی است. در صورتی که فرزند نیاز به برقراری ارتباط با والدین قبل از رندر شدن را داشته باشد٬ شما می‌توانید این قضیه را با [رندر کردن propsها](/docs/render-props.html) ادامه دهید. -However, sometimes the same data needs to be accessible by many components in the tree, and at different nesting levels. Context lets you "broadcast" such data, and changes to it, to all components below. Common examples where using context might be simpler than the alternatives include managing the current locale, theme, or a data cache. +با این حال٬ گاهی‌اوقات یک داده‌ی یکسان باید توسط کامپوننت‌های زیادی در درخت٬ و سطح‌های تودرتوی مختلفی در دسترس قرار گیرد. Context اجازه پخش کردن همچین داده‌ای٬ و اجازه تغییر آن به تمام کامپوننت‌های زیرین را به شما می‌دهد. مثال‌های رایجی که استفاده از context ممکن است آسان‌تر از راه‌های جایگزین آن باشد شامل مدیریت locale فعلی٬ theme, یا داده حافظه نهان می‌باشد. ## API {#api} @@ -116,9 +118,9 @@ However, sometimes the same data needs to be accessible by many components in th const MyContext = React.createContext(defaultValue); ``` -Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching `Provider` above it in the tree. +کد بالا یک شیٔ context ایجاد می‌کند. وقتی ری‌اکت یک کامپوننتی را رندر می‌کند که به این شیء context subscribe می‌کند مقدار context فعلی را از نزدیک‌ترین `Provider` مطابق بالاتر از خود در درخت می‌خواند. -The `defaultValue` argument is **only** used when a component does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them. Note: passing `undefined` as a Provider value does not cause consuming components to use `defaultValue`. +آرگومان `defaultValue` **فقط** زمانی استفاده می‌شود که یک کامپوننت در بالاتر از خود در درخت یک Provider مطابق نداشته باشد. این مورد می‌تواند برای تست کردن کامپوننت‌ها در انزوا بدون wrap کردن آن‌ها مفید باشد. توجه داشته باشید: انتقال `undefined` به عنوان مقدار Provider باعث نمی‌شود که کامپوننت‌های فرض شده از `defaultValue` استفاده کنند. ### `Context.Provider` {#contextprovider} @@ -126,17 +128,17 @@ The `defaultValue` argument is **only** used when a component does not have a ma ``` -Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes. +هر شئ context ای با یک کامپوننت ری‌اکتی Provider همراه می‌شود که به کامپوننت‌های مصرف‌کننده آن این اجازه را می‌دهد که تغییرات context را به اشتراک بگذارند. -Accepts a `value` prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree. +یک prop به نام `value` را می‌پذیرد که به کامپوننت‌های مصرف‌کننده آن که نوادگان این Provider می‌باشند٬ انتقال یابد. یک Provider می‌تواند به چندین مصرف‌کننده متصل شود. Providerها می‌توانند به شکلی تودرتو شوند که valueها را در عمق درخت باطل کنند. -All consumers that are descendants of a Provider will re-render whenever the Provider's `value` prop changes. The propagation from Provider to its descendant consumers (including [`.contextType`](#classcontexttype) and [`useContext`](/docs/hooks-reference.html#usecontext)) is not subject to the `shouldComponentUpdate` method, so the consumer is updated even when an ancestor component skips an update. +هرزمانی که prop ‍‍‍‍`value` مربوط به Provider تغییر کند تمام مصرف‌کننده‌هایی که نوادگان یک Provider هستند دوباره رندر می‌شوند. Propagation از Provider تا نوادگان مصرف‌کننده آن (شامل [`.contextType`](#classcontexttype) و [`useContext`](/docs/hooks-reference.html#usecontext)) مشمول متد `shouldComponentUpdate` نیستند٬ بنابراین مصرف‌کننده آن حتی زمانی که جد کامپوننت یک به‌ روز‌رسانی را رد می‌کند٬ به روزرسانی می‌شود. -Changes are determined by comparing the new and old values using the same algorithm as [`Object.is`](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description). +تغییرات بوسیله مقایسه value های جدید و قدیم با استفاده از همان الگوریتم [`Object.is`](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description) مشخص می‌شوند. -> Note +> یادداشت > -> The way changes are determined can cause some issues when passing objects as `value`: see [هشدارها](#caveats). +>نحوه تعیین تغییرات هنگام انتقال اشیاء به عنوان `value` می‌تواند مشکل‌ساز شود: [هشدارها](#caveats) را ببینید. ### `Class.contextType` {#classcontexttype} @@ -144,7 +146,7 @@ Changes are determined by comparing the new and old values using the same algori class MyClass extends React.Component { componentDidMount() { let value = this.context; - /* perform a side-effect at mount using the value of MyContext */ + /* با استفاده از مقدار MyContext یک اثرجانبی هنگام mount ایجاد کنید */ } componentDidUpdate() { let value = this.context; @@ -156,19 +158,19 @@ class MyClass extends React.Component { } render() { let value = this.context; - /* render something based on the value of MyContext */ + /* چیزی را بر اساس مقدار MyContext رندر کنید */ } } MyClass.contextType = MyContext; ``` -The `contextType` property on a class can be assigned a Context object created by [`React.createContext()`](#reactcreatecontext). This lets you consume the nearest current value of that Context type using `this.context`. You can reference this in any of the lifecycle methods including the render function. +یک شیئ Context که با [`React.createContext()`](#reactcreatecontext) ایجاد شده است می‌تواند به ویژگی `contextType` در یک کلاس اختصاص یابد. این کار به شما اجازه می‌دهد که از نزدیک‌ترین مقدار `contextType` با استفاده از `this.context` استفاده کنید. شما می‌توانید به این قضیه در تمام متدهای چرخه‌حیات از جمله تابع رندر رجوع کنید. -> Note: +> یادداشت: > -> You can only subscribe to a single context using this API. If you need to read more than one see [مصرف چندین Context](#consuming-multiple-contexts). +> شما فقط می توانید با استفاده از این API در یک context واحد مشترک شوید. در صورت نیاز به خواندن بیش از یک مورد ، به [مصرف چندین Context](#consuming-multiple-contexts) مراجعه کنید . > -> If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use a **static** class field to initialize your `contextType`. +> اگر از [syntax تجربی فیلدهای کلاس عمومی](https://babeljs.io/docs/plugins/transform-class-properties/) استفاده می کنید٬ می توانید از یک فیلد کلاس **استاتیک** استفاده کنید تا `contextType` خود را مقداردهی اولیه کنید. ```js @@ -176,7 +178,7 @@ class MyClass extends React.Component { static contextType = MyContext; render() { let value = this.context; - /* render something based on the value */ + /* چیزی را بر اساس مقدار رندر کنید */ } } ``` @@ -185,26 +187,26 @@ class MyClass extends React.Component { ```js - {value => /* render something based on the context value */} + {value => /* چیزی را بر اساس مقدار context رندر کنید */} ``` -A React component that subscribes to context changes. This lets you subscribe to a context within a [function component](/docs/components-and-props.html#function-and-class-components). +یک کامپوننت ری‌اکت که تغییرات context را به اشتراک می‌گذارد. این کار به شما اجازه می‌دهد که یک context را داخل [کامپوننت تابع](/docs/components-and-props.html#function-and-class-components) به اشتراک بگذارید. -Requires a [function as a child](/docs/render-props.html#using-props-other-than-render). The function receives the current context value and returns a React node. The `value` argument passed to the function will be equal to the `value` prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the `value` argument will be equal to the `defaultValue` that was passed to `createContext()`. +نیاز به یک [کامپوننت به عنوان فرزند](/docs/render-props.html#using-props-other-than-render) دارد. تابع مقدار context فعلی را دریافت می‌کند و یک نود ری‌اکت برمی‌گرداند. آرگومان `value` ای که به تابع منتقل شده است با prop `value` نزدیک‌ترین Provider بالاتر در درخت برای این context برابر خواهد بود. اگر بالاتر هیچ Provider ای برای این context وجود نداشت٬ آرگومان `value` با `defaultValue` ای که به `createContext()` منتقل شد٬ برابر خواهد بود. -> Note +> یادداشت > -> For more information about the 'function as a child' pattern, see [render props](/docs/render-props.html). +> برای اطلاعات بیشتر در مورد الگوی 'تابع به عنوان فرزند'٬ [رندر کردن props ها](/docs/render-props.html) را ببینید. ### `Context.displayName` {#contextdisplayname} -Context object accepts a `displayName` string property. React DevTools uses this string to determine what to display for the context. +شیئ context یک ویژگی از نوع رشته با نام `displayName` می‌پذیرد. DevTools ری‌اکت از این رشته استفاده می‌کند تا مشخص کند که چه چیزی را برای context نمایش دهد. -For example, the following component will appear as MyDisplayName in the DevTools: +به عنوان مثال٬ کامپوننت زیر در DevTools به صورت MyDisplayName ظاهر می‌شود: ```js{2} -const MyContext = React.createContext(/* some value */); +const MyContext = React.createContext(/* یک مقداری */); MyContext.displayName = 'MyDisplayName'; // "MyDisplayName.Provider" in DevTools @@ -215,7 +217,7 @@ MyContext.displayName = 'MyDisplayName'; ### Context پویا {#dynamic-context} -A more complex example with dynamic values for the theme: +یک مثال پیچیده‌تر با مقادیر پویا برای theme: **theme-context.js** `embed:context/theme-detailed-theme-context.js` @@ -228,7 +230,7 @@ A more complex example with dynamic values for the theme: ### به‌روز‌رسانی Context از یک کامپوننت تودرتو {#updating-context-from-a-nested-component} -It is often necessary to update the context from a component that is nested somewhere deeply in the component tree. In this case you can pass a function down through the context to allow consumers to update the context: +اغلب به روزرسانی context از کامپوننت‌ای که در جایی عمیق در کامپوننت درخت واقع شده لازم است. در این مورد شما می‌توانید یک تابع را از طریق context به پایین منتقل کنید تا به مصرف‌کنندگان اجازه به روزرسانی context را بدهید: **theme-context.js** `embed:context/updating-nested-context-context.js` @@ -239,28 +241,29 @@ It is often necessary to update the context from a component that is nested some **app.js** `embed:context/updating-nested-context-app.js` -### Consuming Multiple Contexts {#consuming-multiple-contexts} +### مصرف چندین context {#consuming-multiple-contexts} -To keep context re-rendering fast, React needs to make each context consumer a separate node in the tree. +برای این‌که رندر دوباره را سریع نگه داریم٬ ری‌اکت باید هر مصرف‌کننده context را به یک نود جداگانه در درخت تبدیل کند. `embed:context/multiple-contexts.js` -If two or more context values are often used together, you might want to consider creating your own render prop component that provides both. +اگر اغلب دو یا چندین مقادیر context باهم استفاده می‌شوند٬ بهتر است که ساختن یک کامپوننت رندر prop که هر دوی آن‌ها را فراهم می‌کند را در نظر بگیرید. -## Caveats {#caveats} +## هشدارها {#caveats} -Because context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider's parent re-renders. For example, the code below will re-render all consumers every time the Provider re-renders because a new object is always created for `value`: +به دلیل این‌که context از هویت مرجع برای مشخص کردن این‌که چه زمانی باید رندر دوباره صورت بگیرد استفاده می‌کند٬ به دلیل برخی خطاها ممکن است هنگامی که والدین Provider دوباره رندر می‌شوند در مصرف‌کنندگان آن رندر ناخواسته ایجاد کند. برای مثال٬ هر زمانی که Provider دوباره به خاطر ایجاد یک شیئ جدید که همیشه برای `value` ایجاد می‌شود٬ رندر می‌شود کد زیر تمام مصرف‌کنندگان را دوباره رندر می‌کند: `embed:context/reference-caveats-problem.js` +برای پی بردن به این موضوع٬ مقدار را به state والدین ببرید: To get around this, lift the value into the parent's state: `embed:context/reference-caveats-solution.js` ## API موروثی {#legacy-api} -> Note +> یادداشت > -> React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. The legacy API will be removed in a future major React version. Read the [legacy context docs here](/docs/legacy-context.html). +> ری‌اکت قبلا با یک API context آزمایشی منتشر شد. API قدیمی در تمام نسخه های ۱۶.x پشتیبانی خواهد شد٬ اما اپلیکیشن‌هایی که از آن استفاده می‌کنند باید به نسخه جدید migrate کنند. API موروثی در نسخه اصلی React در آینده حذف می شود. [اسناد context موروثی را اینجا](/docs/legacy-context.html) بخوانید. From e321dc190130219ed0e1ccd56351c5fc181845c4 Mon Sep 17 00:00:00 2001 From: hajar sadeghi Date: Fri, 27 Mar 2020 16:37:50 +0430 Subject: [PATCH 03/13] review and update added to context.md --- content/docs/context.md | 53 ++++++++++++++++++++--------------------- 1 file changed, 26 insertions(+), 27 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index 61e56b1bb..e960df25f 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -4,9 +4,9 @@ title: Context permalink: docs/context.html --- -Context راهی را برای انتقال داده از بین درخت کامپوننت بدون نیاز به انتقال دستیه props به پایین در هر سطح فراهم می‌کند. +Context راهی را برای انتقال داده در درخت کامپوننت بدون نیاز به انتقال دستیه props به پایین در هر سطح فراهم می‌کند. -در یک اپلیکیشن معمول ری‌اکت, داده از طریق props از بالا به پایین (والدین به فرزند) منتقل می‌شود, اما این کار برای انواع خاصی از props ها (برای مثال: locale preference, تم رابط کاربری) که مورد نیاز بسیاری از کامپوننت ها در یک اپلیکیشن است می‌تواند سنگین باشد. Context راهی را برای به اشتراک گذاری مقادیری مانند این بدون نیاز به انتقال prop به صورت صریح از طریق هر سطح درخت فراهم می‌کند. +در یک اپلیکیشن معمولی ری‌اکت, داده از طریق props از بالا به پایین (والدین به فرزند) منتقل می‌شود, اما این کار برای انواع خاصی از props ها (برای مثال: locale preference, تم رابط کاربری) که مورد نیاز بسیاری از کامپوننت ها در یک اپلیکیشن است می‌تواند سنگین باشد. Context راهی را برای به اشتراک گذاری مقادیری مانند این بین کامپوننت‌ها بدون نیاز به انتقال prop صریحا‍ً‌ از هر سطح درخت فراهم می‌کند. - [چه موقع باید از Context استفاده کرد](#when-to-use-context) - [قبل از اینکه از Context استفاده کنید](#before-you-use-context) @@ -25,19 +25,19 @@ Context راهی را برای انتقال داده از بین درخت کام ## چه موقع باید از Context استفاده کرد {#when-to-use-context} -Context برای به اشتراک گذاری داده ای طراحی شده است که می‌تواند برای یک درخت از ری‌اکت کامپوننت ها به صورت عمومی در نظر گرفته شود٬ مانند کاربر تایید شده‌ی فعلی٬ زمینه٬ یا زبان ترجیحی. برای مثال٬ در کد زیر ما یک prop به نام "theme" را به صورت دستی برای style دادن کامپوننت Button انتقال می‌دهیم: +Context برای به اشتراک گذاری داده ای طراحی شده است که می‌تواند برای درختی از ری‌اکت کامپوننت ها عمومی تلقی شود٬ مانند کاربر تایید شده‌ی فعلی٬ زمینه٬ یا زبان ترجیحی. برای مثال٬ ما در کد زیر یک prop به نام "theme" را به صورت دستی برای style دادن به کامپوننت Button انتقال می‌دهیم: `embed:context/motivation-problem.js` -با استفاده از context, ما می‌توانیم از انتقال props بین المنت‌های میانی اجتناب کنیم: +با استفاده از context, می‌توانیم از انتقال props از بین المنت‌های میانی دوری کنیم: `embed:context/motivation-solution.js` ## قبل از اینکه از Context استفاده کنید {#before-you-use-context} -Context در درجه اول زمانی استفاده می‌شود که برخی از داده‌ها باید توسط *بسیاری* از کامپوننت‌ها در سطح‌های مختلف تودرتویی در دسترس قرار بگیرند. از آن کم استفاده کنید چرا که استفاده مجدد کامپوننت را سخت‌تر می‌کند. + در درجه اول Context زمانی استفاده می‌شود که برخی از داده‌ها باید توسط *بسیاری* از کامپوننت‌ها در سطح‌های مختلف تودرتویی در دسترس قرار بگیرند. از آنجایی که استفاده مجدد کامپوننت را سخت‌تر می‌کند٬ از آن کم استفاده کنید. -**اگر فقط می‌خواهید که از انتقال برخی از داده‌ها از بین بسیاری از سطح‌ها اجتناب کنید, [ترکیب‌بندی کامپوننت](/docs/composition-vs-inheritance.html) اغلب راه‌حلی ساده‌تر از context می‌باشد.** +**اگر فقط می‌خواهید که از انتقال برخی از داده‌ها بین بسیاری از سطح‌ها اجتناب کنید, اغلب [ترکیب‌بندی کامپوننت](/docs/composition-vs-inheritance.html) راه‌حلی ساده‌تر از context می‌باشد.** برای مثال٬ یک کامپوننت به نام `Page` را در نظر بگیرید که یک prop به نام `user` و `avatarSize` را چندین سطح به پایین منتقل می‌کند به طوری که کامپوننت‌های عمیقا تودرتو شده‌ی `Link` و `Avatar` بتوانند آن را بخوانند: @@ -53,9 +53,9 @@ Context در درجه اول زمانی استفاده می‌شود که برخ ``` -انتقال propsهای `user` و `avatarSize` به پایین از بین بسیاری از سطح‌ها ممکن است زائد به نظر بیاید اگر در نهایت فقط کامپوننت `Avatar` است که به آن نیاز دارد. این نیز آزاردهنده است که هر زمانی که کامپوننت `Avatar` به تعداد بیشتری props از بالا احتیاج داشته باشد٬ شما باید آن‌ها را در تمامی سطح‌های میانی هم اضافه کنید. +انتقال propهای `user` و `avatarSize` به پایین از بین بسیاری از سطح‌ها ممکن است زائد به نظر بیاید اگر در نهایت فقط کامپوننت `Avatar` است که به آن نیاز دارد. این نیز آزاردهنده است که هر زمانی که کامپوننت `Avatar` به تعداد بیشتری props از بالا احتیاج داشته باشد٬ شما باید آن‌ها را در تمامی سطح‌های میانی هم اضافه کنید. -یک راه حل برای این مسئله **بدون context** این است که [خود کامپوننت `Avatar` را به پایین انتقال دهیم](/docs/composition-vs-inheritance.html#containment) به طوری که کامپوننت‌های میانی نیازی به دانستن درمورد propsهای `user` یا `avatar` نداشته باشند: +یک راه حل برای این مسئله **بدون context** این است که [خود کامپوننت `Avatar` را به پایین انتقال دهیم](/docs/composition-vs-inheritance.html#containment) به طوری که کامپوننت‌های میانی نیازی به دانستن درمورد propهای `user` یا `avatar` نداشته باشند: ```js function Page(props) { @@ -80,8 +80,8 @@ function Page(props) { با این تغییر٬ فقط بالاترین کامپوننت یعنی Page باید در مورد استفاده `user` و ‍`avatarsize` توسط کامپوننت‌های `Link` و `Avatar` بداند. -این *وارونگی کنترل* در بسیاری از موارد می‌تواند کد شما را از طریق کاهش تعداد propsهایی که باید در اپلیکیشن خود انتقال دهید تمیزتر کند و کنترل بیشتری به کامپوننت‌های پایه می‌دهد. -با این حال٬ این کار در هر موردی تصمیم درست نیست: انتقال پیچیدگی بیشتر به بالا در درخت باعث پیچیده‌تر شدن کامپوننت‌های سطح-بالا می‌شود و ممکن است کامپوننت‌های سطح-پایین را مجبور کند انعطاف‌پذیرتر از آنچه که می‌خواهید شوند. +این *وارونگی کنترل* در بسیاری از موارد می‌تواند کد شما را از طریق کاهش تعداد propهایی که باید در اپلیکیشن خود انتقال دهید تمیزتر کند و کنترل بیشتری به کامپوننت‌های پایه می‌دهد. +با این حال٬ این کار در هر موردی تصمیم درست نیست: انتقال پیچیدگی بیشتر به بالا در درخت باعث پیچیده‌تر شدن کامپوننت‌های سطح-بالا می‌شود و ممکن است کامپوننت‌های سطح-پایین را مجبور به انعطاف‌پذیری بیشتر از آنچه که می‌خواهید کند. شما برای یک کامپوننت محدود به یک فرزند نیستید. شما می‌توانید چندین فرزند٬ یا حتی چندین "slots" جداگانه برای فرزندان٬ [همانطور که در اینجا مستند شده است ](/docs/composition-vs-inheritance.html#containment)انتقال دهید: @@ -106,9 +106,9 @@ function Page(props) { } ``` -این الگو در بسیاری از مواردی که باید یک فرزند را از والدین نزدیک آن جدا کرد کافی است. در صورتی که فرزند نیاز به برقراری ارتباط با والدین قبل از رندر شدن را داشته باشد٬ شما می‌توانید این قضیه را با [رندر کردن propsها](/docs/render-props.html) ادامه دهید. +این الگو در بسیاری از مواردی که باید یک فرزند را از والدین نزدیک آن جدا کرد کافی است. در صورتی که فرزند قبل از رندر شدن نیاز به برقراری ارتباط با والدین را داشته باشد٬ شما می‌توانید این قضیه را با [رندر کردن propها](/docs/render-props.html) ادامه دهید. -با این حال٬ گاهی‌اوقات یک داده‌ی یکسان باید توسط کامپوننت‌های زیادی در درخت٬ و سطح‌های تودرتوی مختلفی در دسترس قرار گیرد. Context اجازه پخش کردن همچین داده‌ای٬ و اجازه تغییر آن به تمام کامپوننت‌های زیرین را به شما می‌دهد. مثال‌های رایجی که استفاده از context ممکن است آسان‌تر از راه‌های جایگزین آن باشد شامل مدیریت locale فعلی٬ theme, یا داده حافظه نهان می‌باشد. +با این حال٬ گاهی‌اوقات یک داده‌ی یکسان باید توسط کامپوننت‌های زیادی در درخت٬ و سطح‌های تودرتوی مختلفی در دسترس قرار گیرد. Context اجازه پخش کردن همچین داده‌ای٬ و اجازه تغییر آن به تمام کامپوننت‌های زیرین را به شما می‌دهد. مثال‌های رایجی که استفاده از context در آن‌ها ممکن است آسان‌تر از راه‌های جایگزین آن باشد شامل مدیریت locale فعلی٬ زمینه, یا داده حافظه نهان می‌باشد. ## API {#api} @@ -118,21 +118,21 @@ function Page(props) { const MyContext = React.createContext(defaultValue); ``` -کد بالا یک شیٔ context ایجاد می‌کند. وقتی ری‌اکت یک کامپوننتی را رندر می‌کند که به این شیء context subscribe می‌کند مقدار context فعلی را از نزدیک‌ترین `Provider` مطابق بالاتر از خود در درخت می‌خواند. +کد بالا یک شیٔ context ایجاد می‌کند. وقتی ری‌اکت یک کامپوننتی را رندر می‌کند که به این شیء context ارجاع می‌کند مقدار context فعلی را از نزدیک‌ترین `Provider` مطابق بالاتر از خود در درخت می‌خواند. -آرگومان `defaultValue` **فقط** زمانی استفاده می‌شود که یک کامپوننت در بالاتر از خود در درخت یک Provider مطابق نداشته باشد. این مورد می‌تواند برای تست کردن کامپوننت‌ها در انزوا بدون wrap کردن آن‌ها مفید باشد. توجه داشته باشید: انتقال `undefined` به عنوان مقدار Provider باعث نمی‌شود که کامپوننت‌های فرض شده از `defaultValue` استفاده کنند. +آرگومان `defaultValue` **فقط** زمانی استفاده می‌شود که یک کامپوننت در بالاتر از خود در درخت یک Provider مطابق نداشته باشد. این مورد می‌تواند برای تست کردن کامپوننت‌ها در انزوا بدون wrap کردن آن‌ها مفید باشد. توجه داشته باشید: انتقال `undefined` به عنوان مقدار Provider باعث نمی‌شود که کامپوننت‌هایی که از آن استفاده می‌کنند از `defaultValue` استفاده کنند. ### `Context.Provider` {#contextprovider} ```js - + ``` هر شئ context ای با یک کامپوننت ری‌اکتی Provider همراه می‌شود که به کامپوننت‌های مصرف‌کننده آن این اجازه را می‌دهد که تغییرات context را به اشتراک بگذارند. -یک prop به نام `value` را می‌پذیرد که به کامپوننت‌های مصرف‌کننده آن که نوادگان این Provider می‌باشند٬ انتقال یابد. یک Provider می‌تواند به چندین مصرف‌کننده متصل شود. Providerها می‌توانند به شکلی تودرتو شوند که valueها را در عمق درخت باطل کنند. +این کامپوننت یک prop به نام `value` را می‌پذیرد که به کامپوننت‌های مصرف‌کننده آن که نوادگان این Provider می‌باشند٬ انتقال یابد. Provider می‌تواند به چندین مصرف‌کننده متصل شود. Providerها می‌توانند به شکلی تودرتو شوند تا valueهایی را که در عمق درخت وجود دارند باطل کنند.. -هرزمانی که prop ‍‍‍‍`value` مربوط به Provider تغییر کند تمام مصرف‌کننده‌هایی که نوادگان یک Provider هستند دوباره رندر می‌شوند. Propagation از Provider تا نوادگان مصرف‌کننده آن (شامل [`.contextType`](#classcontexttype) و [`useContext`](/docs/hooks-reference.html#usecontext)) مشمول متد `shouldComponentUpdate` نیستند٬ بنابراین مصرف‌کننده آن حتی زمانی که جد کامپوننت یک به‌ روز‌رسانی را رد می‌کند٬ به روزرسانی می‌شود. +هرزمانی که prop ‍‍‍‍`value` مربوط به Provider تغییر کند تمام مصرف‌کننده‌هایی که نوادگان یک Provider هستند دوباره رندر می‌شوند. Propagation از Provider تا نوادگان مصرف‌کننده آن (شامل [`.contextType`](#classcontexttype) و [`useContext`](/docs/hooks-reference.html#usecontext)) مشمول متد `shouldComponentUpdate` نیستند٬ بنابراین حتی زمانی که جد کامپوننت یک به‌ روز‌رسانی را رد می‌کند٬ مصرف‌کننده آن به روزرسانی می‌شود. تغییرات بوسیله مقایسه value های جدید و قدیم با استفاده از همان الگوریتم [`Object.is`](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description) مشخص می‌شوند. @@ -164,13 +164,13 @@ class MyClass extends React.Component { MyClass.contextType = MyContext; ``` -یک شیئ Context که با [`React.createContext()`](#reactcreatecontext) ایجاد شده است می‌تواند به ویژگی `contextType` در یک کلاس اختصاص یابد. این کار به شما اجازه می‌دهد که از نزدیک‌ترین مقدار `contextType` با استفاده از `this.context` استفاده کنید. شما می‌توانید به این قضیه در تمام متدهای چرخه‌حیات از جمله تابع رندر رجوع کنید. +یک شیئ Context که با [`React.createContext()`](#reactcreatecontext) ایجاد شده است می‌تواند به ویژگی `contextType` در یک کلاس اختصاص یابد. این کار به شما اجازه می‌دهد که از نزدیک‌ترین مقدار فعلی `contextType` با استفاده از `this.context` استفاده کنید. شما می‌توانید از این قضیه در تمام متدهای چرخه‌حیات از جمله تابع رندر استفاده کنید. > یادداشت: > -> شما فقط می توانید با استفاده از این API در یک context واحد مشترک شوید. در صورت نیاز به خواندن بیش از یک مورد ، به [مصرف چندین Context](#consuming-multiple-contexts) مراجعه کنید . +> شما با استفاده از این API فقط می توانید در یک context واحد مشترک شوید. در صورت نیاز به خواندن بیش از یک مورد ، به [مصرف چندین Context](#consuming-multiple-contexts) مراجعه کنید . > -> اگر از [syntax تجربی فیلدهای کلاس عمومی](https://babeljs.io/docs/plugins/transform-class-properties/) استفاده می کنید٬ می توانید از یک فیلد کلاس **استاتیک** استفاده کنید تا `contextType` خود را مقداردهی اولیه کنید. +> اگر از [syntax تجربی فیلدهای کلاس عمومی](https://babeljs.io/docs/plugins/transform-class-properties/) استفاده می کنید٬ می توانید از یک فیلد کلاس **استاتیک** برای مقداردهی اولیه `contextType` خود استفاده کنید. ```js @@ -178,7 +178,7 @@ class MyClass extends React.Component { static contextType = MyContext; render() { let value = this.context; - /* چیزی را بر اساس مقدار رندر کنید */ + /* چیزی را بر اساس مقدار آن رندر کنید */ } } ``` @@ -193,15 +193,15 @@ class MyClass extends React.Component { یک کامپوننت ری‌اکت که تغییرات context را به اشتراک می‌گذارد. این کار به شما اجازه می‌دهد که یک context را داخل [کامپوننت تابع](/docs/components-and-props.html#function-and-class-components) به اشتراک بگذارید. -نیاز به یک [کامپوننت به عنوان فرزند](/docs/render-props.html#using-props-other-than-render) دارد. تابع مقدار context فعلی را دریافت می‌کند و یک نود ری‌اکت برمی‌گرداند. آرگومان `value` ای که به تابع منتقل شده است با prop `value` نزدیک‌ترین Provider بالاتر در درخت برای این context برابر خواهد بود. اگر بالاتر هیچ Provider ای برای این context وجود نداشت٬ آرگومان `value` با `defaultValue` ای که به `createContext()` منتقل شد٬ برابر خواهد بود. +نیاز به یک [کامپوننت به عنوان فرزند](/docs/render-props.html#using-props-other-than-render) دارد. این تابع مقدار context فعلی را دریافت می‌کند و یک نود ری‌اکت برمی‌گرداند. آرگومان `value` ای که به تابع داده شده است با prop `value` نزدیک‌ترین Provider بالاتر از آن در درخت برای این context برابر خواهد بود. اگر در بالاتر هیچ Provider ای برای این context وجود نداشت٬ آرگومان `value` با `defaultValue` ای که به `createContext()` داده شد٬ برابر خواهد بود. > یادداشت > -> برای اطلاعات بیشتر در مورد الگوی 'تابع به عنوان فرزند'٬ [رندر کردن props ها](/docs/render-props.html) را ببینید. +> برای اطلاعات بیشتر در مورد الگوی 'تابع به عنوان فرزند'٬ [رندر کردن prop ها](/docs/render-props.html) را ببینید. ### `Context.displayName` {#contextdisplayname} -شیئ context یک ویژگی از نوع رشته با نام `displayName` می‌پذیرد. DevTools ری‌اکت از این رشته استفاده می‌کند تا مشخص کند که چه چیزی را برای context نمایش دهد. +شیئ context یک ویژگی از نوع رشته با نام `displayName` می‌پذیرد. DevTools ری‌اکت از این رشته استفاده عنون می‌کند تا مشخص کند که چه چیزی را برای عنوان context نمایش دهد. به عنوان مثال٬ کامپوننت زیر در DevTools به صورت MyDisplayName ظاهر می‌شود: @@ -230,7 +230,7 @@ MyContext.displayName = 'MyDisplayName'; ### به‌روز‌رسانی Context از یک کامپوننت تودرتو {#updating-context-from-a-nested-component} -اغلب به روزرسانی context از کامپوننت‌ای که در جایی عمیق در کامپوننت درخت واقع شده لازم است. در این مورد شما می‌توانید یک تابع را از طریق context به پایین منتقل کنید تا به مصرف‌کنندگان اجازه به روزرسانی context را بدهید: +اغلب به روزرسانی context از کامپوننت‌ای که در جایی عمیق در درخت واقع شده لازم است. در این مورد شما می‌توانید یک تابع را از طریق context به پایین منتقل کنید تا به مصرف‌کنندگان آن اجازه به روزرسانی context را بدهید: **theme-context.js** `embed:context/updating-nested-context-context.js` @@ -257,7 +257,6 @@ MyContext.displayName = 'MyDisplayName'; برای پی بردن به این موضوع٬ مقدار را به state والدین ببرید: -To get around this, lift the value into the parent's state: `embed:context/reference-caveats-solution.js` @@ -265,5 +264,5 @@ To get around this, lift the value into the parent's state: > یادداشت > -> ری‌اکت قبلا با یک API context آزمایشی منتشر شد. API قدیمی در تمام نسخه های ۱۶.x پشتیبانی خواهد شد٬ اما اپلیکیشن‌هایی که از آن استفاده می‌کنند باید به نسخه جدید migrate کنند. API موروثی در نسخه اصلی React در آینده حذف می شود. [اسناد context موروثی را اینجا](/docs/legacy-context.html) بخوانید. +> ری‌اکت قبلا با یک API context آزمایشی منتشر شد. API قدیمی در تمام نسخه های ۱۶.x پشتیبانی خواهد شد٬ اما اپلیکیشن‌هایی که از آن استفاده می‌کنند باید به نسخه جدید ارتقاء دهند. API موروثی در نسخه اصلی React در آینده حذف می شود. [اسناد context موروثی را اینجا](/docs/legacy-context.html) بخوانید. From 3df268f0cbddb83030a01a726597fba7a13e9961 Mon Sep 17 00:00:00 2001 From: Hajar Date: Sat, 28 Mar 2020 15:31:54 +0430 Subject: [PATCH 04/13] Update content/docs/context.md suggestion accepted Co-Authored-By: Abolfazl Rezvani Naraqi --- content/docs/context.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index e960df25f..c173331bc 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -4,7 +4,7 @@ title: Context permalink: docs/context.html --- -Context راهی را برای انتقال داده در درخت کامپوننت بدون نیاز به انتقال دستیه props به پایین در هر سطح فراهم می‌کند. +Context راهی را برای انتقال داده در درخت کامپوننت بدون نیاز به انتقال دستیه props به تمام سطح های پایینی فراهم می‌کند. در یک اپلیکیشن معمولی ری‌اکت, داده از طریق props از بالا به پایین (والدین به فرزند) منتقل می‌شود, اما این کار برای انواع خاصی از props ها (برای مثال: locale preference, تم رابط کاربری) که مورد نیاز بسیاری از کامپوننت ها در یک اپلیکیشن است می‌تواند سنگین باشد. Context راهی را برای به اشتراک گذاری مقادیری مانند این بین کامپوننت‌ها بدون نیاز به انتقال prop صریحا‍ً‌ از هر سطح درخت فراهم می‌کند. @@ -265,4 +265,3 @@ MyContext.displayName = 'MyDisplayName'; > یادداشت > > ری‌اکت قبلا با یک API context آزمایشی منتشر شد. API قدیمی در تمام نسخه های ۱۶.x پشتیبانی خواهد شد٬ اما اپلیکیشن‌هایی که از آن استفاده می‌کنند باید به نسخه جدید ارتقاء دهند. API موروثی در نسخه اصلی React در آینده حذف می شود. [اسناد context موروثی را اینجا](/docs/legacy-context.html) بخوانید. - From 72cbc47865fd7121802ae5e76dff4e36f64faaa0 Mon Sep 17 00:00:00 2001 From: Hajar Date: Sat, 28 Mar 2020 15:34:31 +0430 Subject: [PATCH 05/13] Update content/docs/context.md suggestion accepted Co-Authored-By: Abolfazl Rezvani Naraqi --- content/docs/context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/context.md b/content/docs/context.md index c173331bc..9e5706f35 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -37,7 +37,7 @@ Context برای به اشتراک گذاری داده ای طراحی شده ا در درجه اول Context زمانی استفاده می‌شود که برخی از داده‌ها باید توسط *بسیاری* از کامپوننت‌ها در سطح‌های مختلف تودرتویی در دسترس قرار بگیرند. از آنجایی که استفاده مجدد کامپوننت را سخت‌تر می‌کند٬ از آن کم استفاده کنید. -**اگر فقط می‌خواهید که از انتقال برخی از داده‌ها بین بسیاری از سطح‌ها اجتناب کنید, اغلب [ترکیب‌بندی کامپوننت](/docs/composition-vs-inheritance.html) راه‌حلی ساده‌تر از context می‌باشد.** +**اگر فقط می‌خواهید که از انتقال برخی از داده‌ها بین بسیاری از سطح‌ها اجتناب کنید, اغلب [composition کامپوننت](/docs/composition-vs-inheritance.html) راه‌حلی ساده‌تر از context می‌باشد.** برای مثال٬ یک کامپوننت به نام `Page` را در نظر بگیرید که یک prop به نام `user` و `avatarSize` را چندین سطح به پایین منتقل می‌کند به طوری که کامپوننت‌های عمیقا تودرتو شده‌ی `Link` و `Avatar` بتوانند آن را بخوانند: From 9bdfb4e00d606b06bd7f7c4a5747ae5d20d44514 Mon Sep 17 00:00:00 2001 From: Hajar Date: Sat, 28 Mar 2020 15:41:14 +0430 Subject: [PATCH 06/13] Update content/docs/context.md suggestion accepted Co-Authored-By: Abolfazl Rezvani Naraqi --- content/docs/context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/context.md b/content/docs/context.md index 9e5706f35..f9b41ba1c 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -106,7 +106,7 @@ function Page(props) { } ``` -این الگو در بسیاری از مواردی که باید یک فرزند را از والدین نزدیک آن جدا کرد کافی است. در صورتی که فرزند قبل از رندر شدن نیاز به برقراری ارتباط با والدین را داشته باشد٬ شما می‌توانید این قضیه را با [رندر کردن propها](/docs/render-props.html) ادامه دهید. +این الگو در بسیاری از مواردی که باید یک فرزند را از والدین نزدیک آن جدا کرد کافی است. در صورتی که فرزند قبل از رندر شدن نیاز به برقراری ارتباط با والدین را داشته باشد٬ شما می‌توانید این قضیه را با [render-props](/docs/render-props.html) ادامه دهید. با این حال٬ گاهی‌اوقات یک داده‌ی یکسان باید توسط کامپوننت‌های زیادی در درخت٬ و سطح‌های تودرتوی مختلفی در دسترس قرار گیرد. Context اجازه پخش کردن همچین داده‌ای٬ و اجازه تغییر آن به تمام کامپوننت‌های زیرین را به شما می‌دهد. مثال‌های رایجی که استفاده از context در آن‌ها ممکن است آسان‌تر از راه‌های جایگزین آن باشد شامل مدیریت locale فعلی٬ زمینه, یا داده حافظه نهان می‌باشد. From 76d8b1db65c8cdfdd5ab8ab055c8c8261f840fea Mon Sep 17 00:00:00 2001 From: Hajar Date: Sat, 28 Mar 2020 15:45:16 +0430 Subject: [PATCH 07/13] Update content/docs/context.md suggestion approved Co-Authored-By: Abolfazl Rezvani Naraqi --- content/docs/context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/context.md b/content/docs/context.md index f9b41ba1c..3fd7969b0 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -118,7 +118,7 @@ function Page(props) { const MyContext = React.createContext(defaultValue); ``` -کد بالا یک شیٔ context ایجاد می‌کند. وقتی ری‌اکت یک کامپوننتی را رندر می‌کند که به این شیء context ارجاع می‌کند مقدار context فعلی را از نزدیک‌ترین `Provider` مطابق بالاتر از خود در درخت می‌خواند. +کد بالا یک شیٔ context ایجاد می‌کند. وقتی ری‌اکت یک کامپوننتی را رندر می‌کند که به این شیء context ارجاع می‌کند (subscribes) و مقدار context حاضر را از نزدیکترین `Provider` مرتبط بالایی در درخت خواهد خواند. آرگومان `defaultValue` **فقط** زمانی استفاده می‌شود که یک کامپوننت در بالاتر از خود در درخت یک Provider مطابق نداشته باشد. این مورد می‌تواند برای تست کردن کامپوننت‌ها در انزوا بدون wrap کردن آن‌ها مفید باشد. توجه داشته باشید: انتقال `undefined` به عنوان مقدار Provider باعث نمی‌شود که کامپوننت‌هایی که از آن استفاده می‌کنند از `defaultValue` استفاده کنند. From 47e7b22474c6c8435650b298c8be811935f3d64b Mon Sep 17 00:00:00 2001 From: Hajar Date: Sat, 28 Mar 2020 15:48:19 +0430 Subject: [PATCH 08/13] Update content/docs/context.md suggestion accepted Co-Authored-By: Abolfazl Rezvani Naraqi --- content/docs/context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/context.md b/content/docs/context.md index 3fd7969b0..e77a33b81 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -197,7 +197,7 @@ class MyClass extends React.Component { > یادداشت > -> برای اطلاعات بیشتر در مورد الگوی 'تابع به عنوان فرزند'٬ [رندر کردن prop ها](/docs/render-props.html) را ببینید. +> برای اطلاعات بیشتر در مورد الگوی 'تابع به عنوان فرزند'٬ [render props](/docs/render-props.html) را ببینید. ### `Context.displayName` {#contextdisplayname} From 695bbe515ba259a3380d3ae462b6a66db16589d0 Mon Sep 17 00:00:00 2001 From: Hajar Date: Sat, 28 Mar 2020 15:49:52 +0430 Subject: [PATCH 09/13] Update content/docs/context.md accepted Co-Authored-By: Abolfazl Rezvani Naraqi --- content/docs/context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/context.md b/content/docs/context.md index e77a33b81..22b839dd8 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -201,7 +201,7 @@ class MyClass extends React.Component { ### `Context.displayName` {#contextdisplayname} -شیئ context یک ویژگی از نوع رشته با نام `displayName` می‌پذیرد. DevTools ری‌اکت از این رشته استفاده عنون می‌کند تا مشخص کند که چه چیزی را برای عنوان context نمایش دهد. +شیئ context یک ویژگی از نوع رشته با نام `displayName` می‌پذیرد. DevTools ری‌اکت از این رشته استفاده می‌کند تا مشخص کند که چه چیزی را برای عنوان context نمایش دهد. به عنوان مثال٬ کامپوننت زیر در DevTools به صورت MyDisplayName ظاهر می‌شود: From febb3fd55889fa9bba13b9a80c64b766a0c92ff7 Mon Sep 17 00:00:00 2001 From: Hajar Date: Sat, 28 Mar 2020 15:50:20 +0430 Subject: [PATCH 10/13] Update content/docs/context.md suggestion accepted Co-Authored-By: Abolfazl Rezvani Naraqi --- content/docs/context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/context.md b/content/docs/context.md index 22b839dd8..1a0d773fc 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -243,7 +243,7 @@ MyContext.displayName = 'MyDisplayName'; ### مصرف چندین context {#consuming-multiple-contexts} -برای این‌که رندر دوباره را سریع نگه داریم٬ ری‌اکت باید هر مصرف‌کننده context را به یک نود جداگانه در درخت تبدیل کند. +برای این‌که رندرشدن های مجدد را سریع نگه داریم٬ ری‌اکت باید هر مصرف‌کننده context را به یک نود جداگانه در درخت تبدیل کند. `embed:context/multiple-contexts.js` From de98e084da72c8a52a1fa0c5f3a1ebbc5c8b8ac7 Mon Sep 17 00:00:00 2001 From: Hajar Date: Sat, 28 Mar 2020 15:51:04 +0430 Subject: [PATCH 11/13] Update content/docs/context.md suggestion accepted Co-Authored-By: Abolfazl Rezvani Naraqi --- content/docs/context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/context.md b/content/docs/context.md index 1a0d773fc..224ad8b65 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -251,7 +251,7 @@ MyContext.displayName = 'MyDisplayName'; ## هشدارها {#caveats} -به دلیل این‌که context از هویت مرجع برای مشخص کردن این‌که چه زمانی باید رندر دوباره صورت بگیرد استفاده می‌کند٬ به دلیل برخی خطاها ممکن است هنگامی که والدین Provider دوباره رندر می‌شوند در مصرف‌کنندگان آن رندر ناخواسته ایجاد کند. برای مثال٬ هر زمانی که Provider دوباره به خاطر ایجاد یک شیئ جدید که همیشه برای `value` ایجاد می‌شود٬ رندر می‌شود کد زیر تمام مصرف‌کنندگان را دوباره رندر می‌کند: +به دلیل این‌که context از هویت مرجع برای مشخص کردن این‌که چه زمانی باید رندر دوباره صورت بگیرد استفاده می‌کند٬ به دلیل برخی خطاها ممکن است هنگامی که والدین Provider دوباره رندر می‌شوند و در مصرف‌کنندگان آن موجب رندر ناخواسته می شود. برای مثال٬ هر زمانی که Provider دوباره به خاطر ایجاد یک شیئ جدید که همیشه برای `value` ایجاد می‌شود٬ رندر می‌شود کد زیر تمام مصرف‌کنندگان را دوباره رندر می‌کند: `embed:context/reference-caveats-problem.js` From 435be8e84f1a0c645ab0c2e12754ba4886d78b94 Mon Sep 17 00:00:00 2001 From: Hajar Date: Sat, 28 Mar 2020 15:52:24 +0430 Subject: [PATCH 12/13] Update content/docs/context.md suggestion accepted Co-Authored-By: Abolfazl Rezvani Naraqi --- content/docs/context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/context.md b/content/docs/context.md index 224ad8b65..6113070d0 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -247,7 +247,7 @@ MyContext.displayName = 'MyDisplayName'; `embed:context/multiple-contexts.js` -اگر اغلب دو یا چندین مقادیر context باهم استفاده می‌شوند٬ بهتر است که ساختن یک کامپوننت رندر prop که هر دوی آن‌ها را فراهم می‌کند را در نظر بگیرید. +اگر دو یا چند مقدار از context زیاد با هم استفاده شدند، بهتر است در نظر داشته باشید که کامپوننت render propای خودتان را ایجاد کنید که شامل هر دوی آنها شود. ## هشدارها {#caveats} From 2eaa44b659087c0e929d1785bb92c9932cb5dccd Mon Sep 17 00:00:00 2001 From: hajar sadeghi Date: Sat, 28 Mar 2020 16:10:49 +0430 Subject: [PATCH 13/13] minor changes on review feedback --- content/docs/context.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index 6113070d0..6e81b704e 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -118,7 +118,7 @@ function Page(props) { const MyContext = React.createContext(defaultValue); ``` -کد بالا یک شیٔ context ایجاد می‌کند. وقتی ری‌اکت یک کامپوننتی را رندر می‌کند که به این شیء context ارجاع می‌کند (subscribes) و مقدار context حاضر را از نزدیکترین `Provider` مرتبط بالایی در درخت خواهد خواند. +کد بالا یک شیٔ context ایجاد می‌کند. وقتی ری‌اکت یک کامپوننتی را رندر می‌کند که به این شیء context ارجاع می‌کند (subscribes)٬ مقدار context حاضر را از نزدیکترین `Provider` مرتبط بالایی در درخت خواهد خواند. آرگومان `defaultValue` **فقط** زمانی استفاده می‌شود که یک کامپوننت در بالاتر از خود در درخت یک Provider مطابق نداشته باشد. این مورد می‌تواند برای تست کردن کامپوننت‌ها در انزوا بدون wrap کردن آن‌ها مفید باشد. توجه داشته باشید: انتقال `undefined` به عنوان مقدار Provider باعث نمی‌شود که کامپوننت‌هایی که از آن استفاده می‌کنند از `defaultValue` استفاده کنند. @@ -247,11 +247,11 @@ MyContext.displayName = 'MyDisplayName'; `embed:context/multiple-contexts.js` -اگر دو یا چند مقدار از context زیاد با هم استفاده شدند، بهتر است در نظر داشته باشید که کامپوننت render propای خودتان را ایجاد کنید که شامل هر دوی آنها شود. +اگر دو یا چند مقدار از context زیاد با هم استفاده شدند، بهتر است در نظر داشته باشید که کامپوننت render propای خودتان ایجاد کنید که شامل هر دوی آنها شود. ## هشدارها {#caveats} -به دلیل این‌که context از هویت مرجع برای مشخص کردن این‌که چه زمانی باید رندر دوباره صورت بگیرد استفاده می‌کند٬ به دلیل برخی خطاها ممکن است هنگامی که والدین Provider دوباره رندر می‌شوند و در مصرف‌کنندگان آن موجب رندر ناخواسته می شود. برای مثال٬ هر زمانی که Provider دوباره به خاطر ایجاد یک شیئ جدید که همیشه برای `value` ایجاد می‌شود٬ رندر می‌شود کد زیر تمام مصرف‌کنندگان را دوباره رندر می‌کند: +به دلیل این‌که context از هویت مرجع برای مشخص کردن این‌که چه زمانی باید رندر دوباره صورت بگیرد استفاده می‌کند٬ به دلیل برخی خطاها ممکن است هنگامی که والدین Provider دوباره رندر می‌شوند٬ در مصرف‌کنندگان آن موجب رندر ناخواسته شود. برای مثال٬ هر زمانی که Provider دوباره به خاطر ایجاد یک شیئ جدید که همیشه برای `value` ایجاد می‌شود٬ رندر می‌شود کد زیر تمام مصرف‌کنندگان را دوباره رندر می‌کند: `embed:context/reference-caveats-problem.js`