You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
With functions and ES6 classes `defaultProps`is defined as a property on the component itself:
33
+
با توابع و کلاسهای ES6، `defaultProps`به عنوان یک ویژگی روی خود کامپوننت تعریف میشوند.
34
34
35
35
```javascript
36
36
classGreetingextendsReact.Component {
@@ -42,7 +42,7 @@ Greeting.defaultProps = {
42
42
};
43
43
```
44
44
45
-
With`createReactClass()`, you need to define `getDefaultProps()`as a function on the passed object:
45
+
با`createReactClass()`، شما به تعریف `getDefaultProps()`به عنوان یک تابع روی آبجکت پاس داده شده نیاز دارید.
46
46
47
47
```javascript
48
48
var Greeting =createReactClass({
@@ -57,9 +57,9 @@ var Greeting = createReactClass({
57
57
});
58
58
```
59
59
60
-
## Setting the Initial State {#setting-the-initial-state}
60
+
## تنظیم State اولیه {#setting-the-initial-state}
61
61
62
-
In ES6 classes, you can define the initial state by assigning `this.state`in the constructor:
62
+
در کلاسهای ES6، شما میتوانید state اولیه را با اختصاص دادن `this.state`در سازنده تعریف کنید:
63
63
64
64
```javascript
65
65
classCounterextendsReact.Component {
@@ -71,7 +71,7 @@ class Counter extends React.Component {
71
71
}
72
72
```
73
73
74
-
With`createReactClass()`, you have to provide a separate `getInitialState`method that returns the initial state:
74
+
با`createReactClass()`، شما باید یک متد جداگانه `getInitialState`که state اولیه را بازمیگرداند فراهم کنید:
75
75
76
76
```javascript
77
77
var Counter =createReactClass({
@@ -84,7 +84,7 @@ var Counter = createReactClass({
84
84
85
85
## Autobinding {#autobinding}
86
86
87
-
In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)`in the constructor:
87
+
در کامپوننتهای ریاکت که به عنوان کلاسهای ES6 تعریف شدهاند، متدها از همان مفاهیم کلاسهای ES6 معمولی پیروی میکنند. یعنی آنها `this` را به طور خودکار به نمونه شی bind نمیکنند. شما باید صریحا از `.bind(this)`در سازنده استفاده کنید:
88
88
89
89
```javascript
90
90
classSayHelloextendsReact.Component {
@@ -110,7 +110,7 @@ class SayHello extends React.Component {
110
110
}
111
111
```
112
112
113
-
With`createReactClass()`, this is not necessary because it binds all methods:
113
+
در`createReactClass()`، اینکار ضروری نیست چرا که خودش تمام متدهارا bind میکند:
114
114
115
115
```javascript
116
116
var SayHello =createReactClass({
@@ -132,9 +132,9 @@ var SayHello = createReactClass({
132
132
});
133
133
```
134
134
135
-
This means writing ES6 classes comes with a little more boilerplate code for event handlers, but the upside is slightly better performance in large applications.
135
+
این یعنی نوشتن کلاسهای ES6 همراه با کمی کد boilerplate برای مدیریت کنندههای رویداد است، اما مزیت آن این است که عملکرد بهتری در اپلیکیشنهای بزرک دارد.
136
136
137
-
If the boilerplate code is too unattractive to you, you may enable the **experimental**[Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/)syntax proposal with Babel:
137
+
اگر کد boilerplate برای شما جذاب نیست، میتوانید پیشنهاد نحوی **experimental**در [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/)را در Babel فعال کنید:
138
138
139
139
140
140
```javascript
@@ -159,27 +159,27 @@ class SayHello extends React.Component {
159
159
}
160
160
```
161
161
162
-
Please note that the syntax above is **experimental**and the syntax may change, or the proposal might not make it into the language.
162
+
لطفا در نظر داشته باشید که قاعده بالا **experimental**است و ممکن است تغییر کند، یا ممکن است این پیشنهاد وارد زبان نشود.
163
163
164
-
If you'd rather play it safe, you have a few options:
164
+
اگر ترجیح میدهید که در امنیت باشید، چند انتخاب دارید:
*از arrow function ها استفاده کنید، برای مثال`onClick={(e) => this.handleClick(e)}`.
168
+
*به استفاده از `createReactClass` ادامه دهید.
169
169
170
170
## Mixins {#mixins}
171
171
172
-
>**Note:**
172
+
>**نکته:**
173
173
>
174
-
>ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes.
174
+
>ES6 بدون پشتیبانی از mixin منتشر شد. بنابراین، هنگامی که از ریاکت با کلاسهای ES6 استفاده میکنید، mixin ها پشتیبانی نمیشوند.
175
175
>
176
-
>**We also found numerous issues in codebases using mixins, [and don't recommend using them in the new code](/blog/2016/07/13/mixins-considered-harmful.html).**
176
+
>**همچنین ما به تعدادی مشکل در پایگاههای کد با استفاده از mixin ها برخوردیم، [و استفاده از آنها در کدهای جدید را پیشنهاد نمیکنیم](/blog/2016/07/13/mixins-considered-harmful.html).**
177
177
>
178
-
>This section exists only for the reference.
178
+
>این قسمت فقط برای ارجاع وجود دارد.
179
179
180
-
Sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). `createReactClass`lets you use a legacy `mixins`system for that.
180
+
گاهی اوقات ممکن است کامپوننتهای بسیار متفاوت بضعی عملکردهای رایج را با یکدیگر به اشتراک بگذارند. اینها گاهی [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern) خوانده میشوند. `createReactClass`به شما اجازه استفاده از سیستم سنتی `mixins`برای آن را میدهد.
181
181
182
-
One common use case is a component wanting to update itself on a time interval. It's easy to use`setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/docs/react-component.html#the-component-lifecycle)that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()`function that will automatically get cleaned up when your component is destroyed.
182
+
یک مورد کاربرد رایج، یک کامپوننت که میخواهد خودش را در یک چرخه زمانی بهروز کند است. استفاده از`setInterval()` ساده است، اما بسیار مهم است که زمانی که دیگر از interval خود استفاده نمیکنید آن را لغو کنید تا حافظه مصرف نکند. ریاکت [متدهای چرخه حیات](/docs/react-component.html#the-component-lifecycle)که به شما اجازه میدهد زمانی که یک کامپوننت ایجاد و یا نابود میشود را بدانید فراهم کردهاست. بیایید یک mixin ساده که از این متدها برای فراهم کردن یک تابع `setInterval()`آسان که به صورت خودکار زمانی که کامپوننت شما نابود میشود پاک میشود را ایجاد کنیم.
183
183
184
184
```javascript
185
185
var SetIntervalMixin = {
@@ -222,4 +222,4 @@ ReactDOM.render(
222
222
);
223
223
```
224
224
225
-
If a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called. Methods defined on mixins run in the order mixins were listed, followed by a method call on the component.
225
+
اگر یک کامپوننت از چند mixin استفاده میکند و mixin های متفاوت یک متد چرخه حیات یکسان را تعریف میکنند، (برای مثال mixin های مختلف میخواهند کمی تمیزکاری پس از نابود شدن کامپوننت انجام دهند) همه متدهای چرخه حیات برای فراخوانی تضمین شدهاند. متدهای mixin ها به همان ترتیبی که لیست شدهاند، به دنبال صدا زدن یک متد روی کامپوننت اجرا میشوند.
0 commit comments