|
- ansestor
+ ancestor
|
جد
@@ -35,7 +35,7 @@
attribute
|
- صفت
+ خصوصیت
|
@@ -78,6 +78,22 @@
کامپوننت
+
+ |
+ controlled component
+ |
+
+ کامپوننت کنترل‌شده
+ |
+
+
+ |
+ customized
+ |
+
+ سفارشی
+ |
+
|
fragment
@@ -94,7 +110,7 @@
داده
|
-
+
|
element
|
@@ -102,6 +118,14 @@
المنت
+
+ |
+ event
+ |
+
+ رویداد/رخداد
+ |
+
|
feature
@@ -142,6 +166,14 @@
هوک
|
+
+ |
+ inline
+ |
+
+ درخط
+ |
+
|
legacy code
@@ -166,7 +198,7 @@
متد
|
-
+
|
node
|
@@ -230,7 +262,15 @@
رابط کاربری
-
+
+ |
+ uncontrolled component
+ |
+
+ کامپوننت کنترل‌نشده
+ |
+
+
|
user
|
@@ -270,14 +310,6 @@
فوروارد
-
- |
- ansestor
- |
-
- اجداد
- |
-
|
document
@@ -296,7 +328,7 @@
|
|
- epaque
+ opaque
|
غیرشفاف
@@ -492,7 +524,7 @@
RFC
|
-
+
|
scope
|
@@ -509,48 +541,42 @@
|
- syntactic sugar
+ style
|
|
- view
+ syntactic sugar
|
|
- XML
+ timestamp
|
|
- lazy
+ view
|
|
- import
+ XML
|
|
- loading indicator
+ lazy
|
- |
- attribute
- |
- خصوصیت
+ import
|
- |
- property
- |
- ویژگی
+ loading indicator
|
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index 32483c5f2..ff0cc84df 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -247,7 +247,7 @@ const App = () => (
## Named Exports {#named-exports}
-`React.lazy` currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that treeshaking keeps working and that you don't pull in unused components.
+`React.lazy` currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that tree shaking keeps working and that you don't pull in unused components.
```js
// ManyComponents.js
diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md
index 75143c43f..f03b2ba76 100644
--- a/content/docs/faq-functions.md
+++ b/content/docs/faq-functions.md
@@ -83,7 +83,7 @@ class Foo extends Component {
>**Note:**
>
->Using an arrow function in render creates a new function each time the component renders, which may have performance implications (see below).
+>Using an arrow function in render creates a new function each time the component renders, which may break optimizations based on strict identity comparison.
### Is it OK to use arrow functions in render methods? {#is-it-ok-to-use-arrow-functions-in-render-methods}
diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md
index 73d6a3d2c..124a5f4f1 100644
--- a/content/docs/hooks-effect.md
+++ b/content/docs/hooks-effect.md
@@ -473,7 +473,7 @@ In the future, the second argument might get added automatically by a build-time
>
>If you use this optimization, make sure the array includes **all values from the component scope (such as props and state) that change over time and that are used by the effect**. Otherwise, your code will reference stale values from previous renders. Learn more about [how to deal with functions](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) and [what to do when the array changes too often](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often).
>
->If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the inputs array always works.
+>If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the dependencies array always works.
>
>If you pass an empty array (`[]`), the props and state inside the effect will always have their initial values. While passing `[]` as the second argument is closer to the familiar `componentDidMount` and `componentWillUnmount` mental model, there are usually [better](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [solutions](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) to avoid re-running effects too often. Also, don't forget that React defers running `useEffect` until after the browser has painted, so doing extra work is less of a problem.
>
diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index ce6bce3d8..168eb2da6 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -740,7 +740,7 @@ The [`useMemo`](/docs/hooks-reference.html#usememo) Hook lets you cache calculat
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```
-This code calls `computeExpensiveValue(a, b)`. But if the inputs `[a, b]` haven't changed since the last value, `useMemo` skips calling it a second time and simply reuses the last value it returned.
+This code calls `computeExpensiveValue(a, b)`. But if the dependencies `[a, b]` haven't changed since the last value, `useMemo` skips calling it a second time and simply reuses the last value it returned.
Remember that the function passed to `useMemo` runs during rendering. Don't do anything there that you wouldn't normally do while rendering. For example, side effects belong in `useEffect`, not `useMemo`.
@@ -767,7 +767,7 @@ Note that this approach won't work in a loop because Hook calls [can't](/docs/ho
### How to create expensive objects lazily? {#how-to-create-expensive-objects-lazily}
-`useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the inputs are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes you need to be sure an object is only created once.
+`useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the dependencies are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes you need to be sure an object is only created once.
**The first common use case is when creating the initial state is expensive:**
diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index 24145eac2..7a91e9253 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -226,7 +226,7 @@ function reducer(state, action) {
}
}
-function Counter({initialState}) {
+function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
From f4ff9733f5bd28cd18ba78721ae4f790de83a2da Mon Sep 17 00:00:00 2001
From: Mehdi <40258654+seven-deuce@users.noreply.github.com>
Date: Fri, 17 May 2019 10:18:05 +0400
Subject: [PATCH 4/6] correction 4
---
content/docs/reference-events.md | 388 +++++++++++++++++++++++++++++++
1 file changed, 388 insertions(+)
diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md
index 8b1378917..f430a0a79 100644
--- a/content/docs/reference-events.md
+++ b/content/docs/reference-events.md
@@ -1 +1,389 @@
+---
+id: events
+title: SyntheticEvent
+permalink: docs/events.html
+layout: docs
+category: Reference
+---
+این صفحه، مرجع `SyntheticEvent` می‌باشد که بخشی از سیستم رویدادهای ری‌اکت (React's Event System) را تشکیل می‌دهد. برای یادگیری بیشتر، [Handling Events](/docs/handling-events.html) را ببینید.
+
+ ## مرور کلی {#overview}
+
+`SyntheticEvent` روکشی است بر رویدادهای ذاتی خود مرورگر که در تمام مرورگرها کار می‌کند. کنترل کننده‌های رویداد (event handlers) شما instance هایی از `SyntheticEvent` دریافت خواهند شد. رابط آن همانند رویدادهای ذاتی مرورگر است و شامل `stopPropagation()` و `preventDefault()` هم هست. با این تفاوت که رویدادها در تمام مرورگرها عین هم کار می‌کنند.
+
+اگر فکر می‌کنید که در جایی باید رویداد ذاتی خود مرورگر را استفاده کنید، کافی است که `nativeEvent` را به عنوان یک attribute اضافه کنید تا به آن دسترسی یابید. هر آبجکت `SyntheticEvent`، attribute های زیر دارد:
+
+```javascript
+boolean bubbles
+boolean cancelable
+DOMEventTarget currentTarget
+boolean defaultPrevented
+number eventPhase
+boolean isTrusted
+DOMEvent nativeEvent
+void preventDefault()
+boolean isDefaultPrevented()
+void stopPropagation()
+boolean isPropagationStopped()
+DOMEventTarget target
+number timeStamp
+string type
+```
+
+> توجه:
+>
+> از نسخه ی 0.14، بازگشت دادن `false` از یک کنترل کننده ی رویداد، مانع انتشار یک رویداد نمی شود. بجای آن، `e.stopPropagation()` یا `e.preventDefault()` ، هر کدام به درخور موقعیت باید اجرا شوند.
+
+### جمع آوری رویداد (event-pooling) {#event-pooling}
+`SyntheticEvent` جمع آوری می‌شود. یعنی اینکه آبجکت `SyntheticEvent` پس از آنکه callback اش فراخوانی شد، تمام دارایی‌های خود را از دست خواهد داد و استفاده ی مجدد خواهد شد.
+این به خاطر ارتقای کارکرد است.
+از همین رو، شما نمی توانید به طور غیرهمزمان (asynchronous) به رویداد دسترسی داشته باشید.
+
+
+```javascript
+function onClick(event) {
+ console.log(event); // => nullified object.
+ console.log(event.type); // => "click"
+ const eventType = event.type; // => "click"
+
+ setTimeout(function() {
+ console.log(event.type); // => null
+ console.log(eventType); // => "click"
+ }, 0);
+
+ // کار نخواهد کرد. this.state.clickEvent فقط حاوی متغیرهای تهی خواهد بود.
+ this.setState({clickEvent: event});
+
+ // همچنان قادر خواهید بود که دارایی‌های رویداد را صادر کنید
+ this.setState({eventType: event.type});
+}
+```
+
+> توجه:
+>
+> اگر می‌خواهید که به دارایی‌های رویداد، به طور غیرهمزمان دسترسی داشته باشید باید `event.persist()` را در رویداد فراخوانی کنید. این موجب خواهد شد که رویداد سینتاتیک از روند برهم گذاری خارج شود و ارجاعات داده شده به آن رویداد در کد کاربر حفظ شود.
+
+## رویدادهای پشتیبانی شده {#supported-events}
+
+ری‌اکت فرایند نرمال سازی را روی رویدادها انجام می دهد تا در مرورگرهای مختلف، ویژگی های یکسانی داشته باشند.
+
+کنترل کنندگان رویدادهایی که در زیر می بینید، در فاز bubbling اجرا می شوند. اگر می خواهید که رویدادی در فاز capture اجرا شود، `Capture` را به نام رویداد اضافه کنید. مثلا بجای `onClick`، بنویسید `onClickCapture`.
+
+- [Clipboard Events](#clipboard-events)
+- [Composition Events](#composition-events)
+- [Keyboard Events](#keyboard-events)
+- [Focus Events](#focus-events)
+- [Form Events](#form-events)
+- [Mouse Events](#mouse-events)
+- [Pointer Events](#pointer-events)
+- [Selection Events](#selection-events)
+- [Touch Events](#touch-events)
+- [UI Events](#ui-events)
+- [Wheel Events](#wheel-events)
+- [Media Events](#media-events)
+- [Image Events](#image-events)
+- [Animation Events](#animation-events)
+- [Transition Events](#transition-events)
+- [Other Events](#other-events)
+
+* * *
+
+## مرجع {#reference}
+
+### Clipboard Events {#clipboard-events}
+
+نام رویدادها
+
+```
+onCopy onCut onPaste
+```
+
+ویژگی‌ها
+
+```javascript
+DOMDataTransfer clipboardData
+```
+
+* * *
+
+### Composition Events {#composition-events}
+
+نام رویدادها
+
+```
+onCompositionEnd onCompositionStart onCompositionUpdate
+```
+
+ویژگی‌ها
+
+```javascript
+string data
+
+```
+
+* * *
+
+### Keyboard Events {#keyboard-events}
+
+نام رویدادها
+
+```
+onKeyDown onKeyPress onKeyUp
+```
+
+ویژگی‌ها
+
+```javascript
+boolean altKey
+number charCode
+boolean ctrlKey
+boolean getModifierState(key)
+string key
+number keyCode
+string locale
+number location
+boolean metaKey
+boolean repeat
+boolean shiftKey
+number which
+```
+
+`key` می‌تواند هر کدام از متغیرهای ذکر شده در [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values) را داشته باشد.
+
+* * *
+
+### Focus Events {#focus-events}
+
+نام رویدادها
+
+```
+onFocus onBlur
+```
+
+رویدادهای فوق برای تمام المنت‌های React DOM کار خواهد کرد و نه فقط المنت‌های فرم.
+
+ویژگی‌ها
+
+```javascript
+DOMEventTarget relatedTarget
+```
+
+* * *
+
+### Form Events {#form-events}
+
+نام رویدادها
+
+```
+onChange onInput onInvalid onSubmit
+```
+برای اطلاعات بیشتر در مورد رویداد onChange، [Forms](/docs/forms.html) را ببینید.
+
+* * *
+
+### Mouse Events {#mouse-events}
+
+نام رویدادها
+
+```
+onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
+onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
+onMouseMove onMouseOut onMouseOver onMouseUp
+```
+
+رویدادهای `onMouseEnter` و `onMouseLeave` از المنت ترک شده به المنت وارد شده تکثیر می‌شوند. آنها فاز capture ندارند و bubbling معمول هم در آنها اتفاق نمی افتد.
+
+ویژگی‌ها
+
+```javascript
+boolean altKey
+number button
+number buttons
+number clientX
+number clientY
+boolean ctrlKey
+boolean getModifierState(key)
+boolean metaKey
+number pageX
+number pageY
+DOMEventTarget relatedTarget
+number screenX
+number screenY
+boolean shiftKey
+```
+
+* * *
+
+### Pointer Events {#pointer-events}
+
+نام رویدادها
+
+```
+onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
+onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
+```
+
+رویدادهای `onPointerEnter` و `onPointerLeave` از المنت ترک شده به المنت وارد شده تکثیر می‌شوند. آنها فاز capture ندارند و bubbling معمول هم در آنها اتفاق نمی افتد.
+
+ویژگی‌ها
+
+طبق [W3 spec](https://www.w3.org/TR/pointerevents/)، رویدادهای متعلق به نشانگر ماوس، رویدادهای مربوط به ماوس ([Mouse Events](#mouse-events)) را با ویژگی‌های زیر توسعه می‌دهند.
+
+```javascript
+number pointerId
+number width
+number height
+number pressure
+number tangentialPressure
+number tiltX
+number tiltY
+number twist
+string pointerType
+boolean isPrimary
+```
+
+نکته ای در مورد پشتیبانی در مرورگرهای مختلف:
+
+رویدادهای متعلق به نشانگر ماوس در تمام مرورگرها پشتیبانی نمی شوند. در زمان نوشتن این مقاله مرورگرهایی که از آن پشتیبانی می‌کنند عبارتند از: کروم، فایرفاکس، اج، و اینترنت اکسپلورر. ری‌اکت تعمدا از کد جایگزین برای پشتیبانی در مرورگرهای دیگر استفاده نمی کند، چون این کد باعث افزایش چشمگیر حجم `react-dom` می‌شود.
+
+اگر اپلیکیشن شما نیازمند رویدادهای نشانگر ماوس است، توصیه می‌کنیم که از کدهای جایگزین third party استفاده کنید.
+
+
+* * *
+
+### Selection Events {#selection-events}
+
+نام رویدادها
+
+```
+onSelect
+```
+
+* * *
+
+### Touch Events {#touch-events}
+
+نام رویدادها
+
+```
+onTouchCancel onTouchEnd onTouchMove onTouchStart
+```
+
+ویژگی‌ها
+
+```javascript
+boolean altKey
+DOMTouchList changedTouches
+boolean ctrlKey
+boolean getModifierState(key)
+boolean metaKey
+boolean shiftKey
+DOMTouchList targetTouches
+DOMTouchList touches
+```
+
+* * *
+
+### UI Events {#ui-events}
+
+نام رویدادها
+
+```
+onScroll
+```
+
+ویژگی‌ها
+
+```javascript
+number detail
+DOMAbstractView view
+```
+
+* * *
+
+### Wheel Events {#wheel-events}
+
+نام رویدادها
+
+```
+onWheel
+```
+
+ویژگی‌ها
+
+```javascript
+number deltaMode
+number deltaX
+number deltaY
+number deltaZ
+```
+
+* * *
+
+### Media Events {#media-events}
+
+نام رویدادها
+
+```
+onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
+onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
+onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
+onTimeUpdate onVolumeChange onWaiting
+```
+
+* * *
+
+### Image Events {#image-events}
+
+نام رویدادها
+
+```
+onLoad onError
+```
+
+* * *
+
+### Animation Events {#animation-events}
+
+نام رویدادها
+
+```
+onAnimationStart onAnimationEnd onAnimationIteration
+```
+
+ویژگی‌ها
+
+```javascript
+string animationName
+string pseudoElement
+float elapsedTime
+```
+
+* * *
+
+### Transition Events {#transition-events}
+
+نام رویدادها
+
+```
+onTransitionEnd
+```
+
+ویژگی‌ها
+
+```javascript
+string propertyName
+string pseudoElement
+float elapsedTime
+```
+
+* * *
+
+### Other Events {#other-events}
+
+نام رویدادها
+
+```
+onToggle
+```
From 80340dd14ee3018e8057ae0d264c37d7ff22fdc4 Mon Sep 17 00:00:00 2001
From: Mehdi <40258654+seven-deuce@users.noreply.github.com>
Date: Tue, 21 May 2019 14:36:37 +0400
Subject: [PATCH 5/6] correction 5
---
content/docs/reference-events.md | 36 ++++++++++++++++----------------
1 file changed, 18 insertions(+), 18 deletions(-)
diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md
index f430a0a79..588440c43 100644
--- a/content/docs/reference-events.md
+++ b/content/docs/reference-events.md
@@ -10,7 +10,7 @@ category: Reference
## مرور کلی {#overview}
-`SyntheticEvent` روکشی است بر رویدادهای ذاتی خود مرورگر که در تمام مرورگرها کار می‌کند. کنترل کننده‌های رویداد (event handlers) شما instance هایی از `SyntheticEvent` دریافت خواهند شد. رابط آن همانند رویدادهای ذاتی مرورگر است و شامل `stopPropagation()` و `preventDefault()` هم هست. با این تفاوت که رویدادها در تمام مرورگرها عین هم کار می‌کنند.
+`SyntheticEvent` روکشی است بر رویدادهای ذاتی خود مرورگر که در تمام مرورگرها کار می‌کند. کنترل کننده‌های رویداد (event handlers) شما instance هایی از `SyntheticEvent` دریافت خواهند کرد. رابط آن همانند رویدادهای ذاتی مرورگر است و شامل `stopPropagation()` و `preventDefault()` هم هست. با این تفاوت که رویدادها در تمام مرورگرها عین هم کار می‌کنند.
اگر فکر می‌کنید که در جایی باید رویداد ذاتی خود مرورگر را استفاده کنید، کافی است که `nativeEvent` را به عنوان یک attribute اضافه کنید تا به آن دسترسی یابید. هر آبجکت `SyntheticEvent`، attribute های زیر دارد:
@@ -33,7 +33,7 @@ string type
> توجه:
>
-> از نسخه ی 0.14، بازگشت دادن `false` از یک کنترل کننده ی رویداد، مانع انتشار یک رویداد نمی شود. بجای آن، `e.stopPropagation()` یا `e.preventDefault()` ، هر کدام به درخور موقعیت باید اجرا شوند.
+> از نسخه ی ۰/۱۴، بازگشت دادن `false` از یک کنترل کننده ی رویداد، مانع انتشار یک رویداد نمی شود. بجای آن، `e.stopPropagation()` یا `e.preventDefault()` ، هر کدام به درخور موقعیت باید اجرا شوند