{"componentChunkName":"component---src-templates-docs-js","path":"/docs/react-without-es6.html","result":{"data":{"markdownRemark":{"html":"

شما به صورت عادی یک کامپوننت ری‌اکت را به عنوان یک کلاس جاوااسکریپت ساده تعریف می‌کنید:

\n
class Greeting extends React.Component {\n  render() {\n    return <h1>Hello, {this.props.name}</h1>;\n  }\n}
\n

اگر هنوز از ES6 استفاده نمی‌کنید، شاید به جای ان از ماژول create-react-class استفاده کنید:

\n
var createReactClass = require('create-react-class');\nvar Greeting = createReactClass({\n  render: function() {\n    return <h1>Hello, {this.props.name}</h1>;\n  }\n});
\n

API کلاس‌های ES6 با کمی استثناءها مشابه createReactClass() است:

\n

تعریف Prop های پیش‌فرض

\n

با توابع و کلاس‌های ES6، defaultProps به عنوان یک ویژگی روی خود کامپوننت تعریف می‌شوند.

\n
class Greeting extends React.Component {\n  // ...\n}\n\nGreeting.defaultProps = {\n  name: 'Mary'\n};
\n

با createReactClass()، شما به تعریف getDefaultProps() به عنوان یک تابع روی آبجکت پاس داده شده نیاز دارید.

\n
var Greeting = createReactClass({\n  getDefaultProps: function() {\n    return {\n      name: 'Mary'\n    };\n  },\n\n  // ...\n\n});
\n

تنظیم State اولیه

\n

در کلاس‌های ES6، شما می‌توانید state اولیه را با اختصاص دادن this.state در سازنده تعریف کنید:

\n
class Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {count: props.initialCount};\n  }\n  // ...\n}
\n

با createReactClass()، شما باید یک متد جداگانه getInitialState که state اولیه را بازمی‌گرداند فراهم کنید:

\n
var Counter = createReactClass({\n  getInitialState: function() {\n    return {count: this.props.initialCount};\n  },\n  // ...\n});
\n

Autobinding

\n

در کامپوننت‌های ری‌اکت که به عنوان کلاس‌های ES6 تعریف شده‌اند، متدها از همان مفاهیم کلاس‌های ES6 معمولی پیروی می‌کنند. یعنی آن‌ها this را به طور خودکار به نمونه شی bind نمی‌کنند. شما باید صریحا از .bind(this) در سازنده استفاده کنید:

\n
class SayHello extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {message: 'Hello!'};\n    // This line is important!\n    this.handleClick = this.handleClick.bind(this);\n  }\n\n  handleClick() {\n    alert(this.state.message);\n  }\n\n  render() {\n    // Because `this.handleClick` is bound, we can use it as an event handler.\n    return (\n      <button onClick={this.handleClick}>\n        Say hello\n      </button>\n    );\n  }\n}
\n

در createReactClass()، اینکار ضروری نیست چرا که خودش تمام متدهارا bind می‌کند:

\n
var SayHello = createReactClass({\n  getInitialState: function() {\n    return {message: 'Hello!'};\n  },\n\n  handleClick: function() {\n    alert(this.state.message);\n  },\n\n  render: function() {\n    return (\n      <button onClick={this.handleClick}>\n        Say hello\n      </button>\n    );\n  }\n});
\n

این یعنی نوشتن کلاس‌های ES6 همراه با کمی کد boilerplate برای مدیریت کننده‌های رویداد است، اما مزیت آن این است که عملکرد بهتری در اپلیکیشن‌های بزرک دارد.

\n

اگر کد boilerplate برای شما جذاب نیست، می‌توانید پیشنهاد نحوی experimental در Class Properties را در Babel فعال کنید:

\n
class SayHello extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {message: 'Hello!'};\n  }\n  // WARNING: this syntax is experimental!\n  // Using an arrow here binds the method:\n  handleClick = () => {\n    alert(this.state.message);\n  }\n\n  render() {\n    return (\n      <button onClick={this.handleClick}>\n        Say hello\n      </button>\n    );\n  }\n}
\n

لطفا در نظر داشته باشید که قاعده بالا experimental است و ممکن است تغییر کند، یا ممکن است این پیشنهاد وارد زبان نشود.

\n

اگر ترجیح می‌دهید که در امنیت باشید، چند انتخاب دارید:

\n\n

Mixins

\n
\n

نکته:

\n

ES6 بدون پشتیبانی از mixin منتشر شد. بنابراین، هنگامی که از ری‌اکت با کلاس‌های ES6 استفاده می‌کنید، mixin ها پشتیبانی نمی‌شوند.

\n

همچنین ما به تعدادی مشکل در پایگاه‌های کد با استفاده از mixin ها برخوردیم، و استفاده از آن‌ها در کدهای جدید را پیشنهاد نمی‌کنیم.

\n

این قسمت فقط برای ارجاع وجود دارد.

\n
\n

گاهی اوقات ممکن است کامپوننت‌های بسیار متفاوت بضعی عملکردهای رایج را با یکدیگر به اشتراک بگذارند. این‌ها گاهی cross-cutting concerns خوانده می‌شوند. createReactClass به شما اجازه استفاده از سیستم سنتی mixins برای آن را می‌دهد.

\n

یک مورد کاربرد رایج، یک کامپوننت که می‌خواهد خودش را در یک چرخه زمانی به‌روز کند است. استفاده از setInterval() ساده است، اما بسیار مهم است که زمانی که دیگر از interval خود استفاده نمی‌کنید آن را لغو کنید تا حافظه مصرف نکند. ری‌اکت متدهای چرخه حیات که به شما اجازه می‌دهد زمانی که یک کامپوننت ایجاد و یا نابود می‌شود را بدانید فراهم کرده‌است. بیایید یک mixin ساده که از این متدها برای فراهم کردن یک تابع setInterval() آسان که به صورت خودکار زمانی که کامپوننت شما نابود می‌شود پاک می‌شود را ایجاد کنیم.

\n
var SetIntervalMixin = {\n  componentWillMount: function() {\n    this.intervals = [];\n  },\n  setInterval: function() {\n    this.intervals.push(setInterval.apply(null, arguments));\n  },\n  componentWillUnmount: function() {\n    this.intervals.forEach(clearInterval);\n  }\n};\n\nvar createReactClass = require('create-react-class');\n\nvar TickTock = createReactClass({\n  mixins: [SetIntervalMixin], // Use the mixin\n  getInitialState: function() {\n    return {seconds: 0};\n  },\n  componentDidMount: function() {\n    this.setInterval(this.tick, 1000); // Call a method on the mixin\n  },\n  tick: function() {\n    this.setState({seconds: this.state.seconds + 1});\n  },\n  render: function() {\n    return (\n      <p>\n        React has been running for {this.state.seconds} seconds.\n      </p>\n    );\n  }\n});\n\nReactDOM.render(\n  <TickTock />,\n  document.getElementById('example')\n);
\n

اگر یک کامپوننت از چند mixin استفاده می‌کند و mixin های متفاوت یک متد چرخه حیات یکسان را تعریف می‌کنند، (برای مثال mixin های مختلف می‌خواهند کمی تمیزکاری پس از نابود شدن کامپوننت انجام دهند) همه متدهای چرخه حیات برای فراخوانی تضمین شده‌اند. متدهای mixin ها به همان ترتیبی که لیست شده‌اند، به دنبال صدا زدن یک متد روی کامپوننت اجرا می‌شوند.

","frontmatter":{"title":"ری‌اکت بدون ES6","next":null,"prev":null},"fields":{"path":"content/docs/react-without-es6.md","slug":"docs/react-without-es6.html"}}},"pageContext":{"slug":"docs/react-without-es6.html"}},"staticQueryHashes":[]}