From 42c9a89d7fd24ed757e0ee1d4563cbecf8fd4b03 Mon Sep 17 00:00:00 2001 From: Shahab Date: Fri, 15 Feb 2019 13:08:48 +0330 Subject: [PATCH 1/5] hook-intro translated, v.1.0 --- content/docs/hooks-intro.md | 114 ++++++++++++++++++++---------------- 1 file changed, 64 insertions(+), 50 deletions(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index b4cefcfbe..4bc390042 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -1,11 +1,11 @@ --- id: hooks-intro -title: Introducing Hooks +title: معرفی هوک‌ها permalink: docs/hooks-intro.html next: hooks-overview.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +

Hookها قابلیتی جدید در React 16.8 هستند. آنها امکان استفاده از state و دیگر قابلیت‌های react را بدون نیاز به نوشتن کلاس به شما می‌دهند.

```js{4,5} import React, { useState } from 'react'; @@ -25,88 +25,102 @@ function Example() { } ``` -This new function `useState` is the first "Hook" we'll learn about, but this example is just a teaser. Don't worry if it doesn't make sense yet! +

تابع جدید ‪‬useState‪‬ اولین ‪“‬Hook‪“‬ای است که یاد می‌گیریم، البته این مثال تنها یک نمایش اجمالی است‫.‬ در صورتی که آن را در نیافتید نگران نباشید‫!‬

-**You can start learning Hooks [on the next page](/docs/hooks-overview.html).** On this page, we'll continue by explaining why we're adding Hooks to React and how they can help you write great applications. ->Note -> ->React 16.8.0 is the first release to support Hooks. When upgrading, don't forget to update all packages, including React DOM. React Native will support Hooks in the next stable release. +

شما می‌توانید برای شروع یادگیری Hookها از صفحه‌ی بعد شروع کنید. +در این صفحه، ما به ذکر دلایلمان برای افزودن هوک‌ها به react و اینکه آن‌ها چگونه می‌توانند به شما کمک کنند تا برنامه‌های خوبی بنویسید، می‌پردازیم.

-## Video Introduction {#video-introduction} -At React Conf 2018, Sophie Alpert and Dan Abramov introduced Hooks, followed by Ryan Florence demonstrating how to refactor an application to use them. Watch the video here: +
+

نکته

+

ری‌اکت ۱۶.۸.۰ اولین نسخه منتشر شده است که از هوک‌ها پشتیبانی می‌کند. هنگام ارتقاع، فراموش نکنید همه‌ی پکیج‌ها شامل React DOM را آپدیت نمایید. React Native در نسخه‌ی بعدی پایدار از هوک‌ها پشتیبانی خواهد کرد.

+
-
- - +

معرفی ویدیویی

-## No Breaking Changes {#no-breaking-changes} +

در کنفرانس ۲۰۱۸ react، سوفیا آلپرت(Sophie Alpert) و دن آبرامف(Dan Abramov) هوک‌ها را معرفی کردند. بعد از آن رایان فلورنس (Ryan Florence) نشان داد که چگونه می‌توان به منظور استفاده از آنها[هوک‌ها] یک اپلیکیشن را بازنویسی‪(‬refactor‪)‬ کرد. ویدیوی زیر را ببینید:

-Before we continue, note that Hooks are: - -* **Completely opt-in.** You can try Hooks in a few components without rewriting any existing code. But you don't have to learn or use Hooks right now if you don't want to. -* **100% backwards-compatible.** Hooks don't contain any breaking changes. -* **Available now.** Hooks are now available with the release of v16.8.0. +
-**There are no plans to remove classes from React.** You can read more about the gradual adoption strategy for Hooks in the [bottom section](#gradual-adoption-strategy) of this page. +
+
+ +
+
-**Hooks don't replace your knowledge of React concepts.** Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them. +

بدون ایجاد خلل در دیگر قسمت‌ها

-**If you just want to start learning Hooks, feel free to [jump directly to the next page!](/docs/hooks-overview.html)** You can also keep reading this page to learn more about why we're adding Hooks, and how we're going to start using them without rewriting our applications. +

قبل از اینکه ادامه دهیم، توجه کنید که هوک‌ها:

-## Motivation {#motivation} + -Hooks solve a wide variety of seemingly unconnected problems in React that we've encountered over five years of writing and maintaining tens of thousands of components. Whether you're learning React, use it daily, or even prefer a different library with a similar component model, you might recognize some of these problems. +

هیچ برنامه‌ای برای حذف کلاس‌ها از ری‌اکت وجود ندارد. شما می‌توانید برای مطالعه‌ی بیشتر در رابطه با راهکار‌‌های تطبیق تدریجی با هوک‌ها از بخش پایین همین صفحه استفاده کنید.

-### It's hard to reuse stateful logic between components {#its-hard-to-reuse-stateful-logic-between-components} +

هوک‌ها جایگزینی برای دانش و فهم شما از ری‌اکت نیستند. در عوض، هوک‌ها یک رابط برنامه‌ی کاربردی ‪(‬API‪)‬ صریح‌تر برای مفاهیم ری‌اکتی که از قبل می‌دانید فراهم می‌کنند: props ،state ،context ،ref و lifecycle. همان‌طور که بعدا نشان خواهیم داد، هوک‌ها روشی جدید و قدرتمند برای تلفیق آن‌ها ارایه می‌کنند.

-React doesn't offer a way to "attach" reusable behavior to a component (for example, connecting it to a store). If you've worked with React for a while, you may be familiar with patterns like [render props](/docs/render-props.html) and [higher-order components](/docs/higher-order-components.html) that try to solve this. But these patterns require you to restructure your components when you use them, which can be cumbersome and make code harder to follow. If you look at a typical React application in React DevTools, you will likely find a "wrapper hell" of components surrounded by layers of providers, consumers, higher-order components, render props, and other abstractions. While we could [filter them out in DevTools](https://github.com/facebook/react-devtools/pull/503), this points to a deeper underlying problem: React needs a better primitive for sharing stateful logic. +

اگر هم‌اکنون می‌خواهید یادگیری هوک‌ها را شروع کنید، مستقیم به صفحه‌ی بعد بروید! البته می‌توانید مطالعه‌ی این صفحه را ادامه دهید و با دلایلی که هوک‌ها را به ری‌اکت اضافه کردیم و اینکه چگونه بدون بازنویسی اپلیکیشن‌های قبلی از آن‌ها استفاده خواهیم کرد، آشنا شوید.

-With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. **Hooks allow you to reuse stateful logic without changing your component hierarchy.** This makes it easy to share Hooks among many components or with the community. +

انگیزه

-We'll discuss this more in [Building Your Own Hooks](/docs/hooks-custom.html). +

استفاده‌ی مجدد از منطق دارای state در بین کامپوننت‌ها دشوار است

-### Complex components become hard to understand {#complex-components-become-hard-to-understand} +

ری‌اکت راهی برای ‪“‬چسباندن‪”‬ یک رفتار قابل استفاده‌ی مجدد یه یک کامپوننت را فراهم نمی‌کند (برای مثال اتصال به یک store). اگر شما مدتی با ری‌اکت کار کرده باشید، ممکن است با الگوهایی مانند render props و higher-order components آشنا باشید که سعی در حل این مسیله دارند. اما این الگوها شما را مجبور به تغییر ساختار مجدد کامپوننتتان هنگام استفاده‌ از آن‌ها می‌کنند، که این مسیله می‌تواند مایه‌ی زحمت و سخت‌تر شدن فهم کد باشد. اگر به یک اپلیکیشن ری‌اکت نوعی در React DevTools نگاه کنید، احتمالا با “wrapper hell”ای از کامپوننت‌ها مواجه می‌شوید. کامپوننت‌هایی که با لایه‌هایی از providerها، consumerها، HOCها، render props و دیگر کامپوننت‌هایی که به تجرید کمک می‌کنند، احاطه شده‌اند. در حالی که ما می‌توانیم آن‌ها را در DevTools فیلتر کنیم، این [مشکل] به یک مسیله‌ی بنیادین اشاره دارد: ری‌اکت باید عناصری ابتدایی برای به اشتراک گذاری منطق دارای state فراهم کند.

-We've often had to maintain components that started out simple but grew into an unmanageable mess of stateful logic and side effects. Each lifecycle method often contains a mix of unrelated logic. For example, components might perform some data fetching in `componentDidMount` and `componentDidUpdate`. However, the same `componentDidMount` method might also contain some unrelated logic that sets up event listeners, with cleanup performed in `componentWillUnmount`. Mutually related code that changes together gets split apart, but completely unrelated code ends up combined in a single method. This makes it too easy to introduce bugs and inconsistencies. +

با استفاده از هوک‌ها، شما می‌توانید بخش منطق دارای state را از یک کامپوننت استخراج کنید، بطوری که بطور مستقل بتواند مورد آزمایش و استفاده‌ی مجدد قرار گیرد. هوک ها به شما اجازه می‌دهند که بدون ایجاد تغییر در سلسله مراتب کامپوننت‌هایتان، از منطق دارای state مجددا استفاده نمایید. این کار باعث تسهیل در به اشتراک‌گذاری هوک‌ها بین کامپوننت‌های مختلف یا بین جامعه‪]‬ی ری‌اکت‪[‬ می‌شود.

-In many cases it's not possible to break these components into smaller ones because the stateful logic is all over the place. It's also difficult to test them. This is one of the reasons many people prefer to combine React with a separate state management library. However, that often introduces too much abstraction, requires you to jump between different files, and makes reusing components more difficult. +

ما در این رابطه بیشتر در هوک مخصوص خود را بسازید بحث خواهیم کرد.

-To solve this, **Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data)**, rather than forcing a split based on lifecycle methods. You may also opt into managing the component's local state with a reducer to make it more predictable. +

فهم کامپوننت‌های پیچیده دشوارتر می‌شود

-We'll discuss this more in [Using the Effect Hook](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns). +

ما معمولا مجبور به نگه‌داری از کامپوننت‌هایی بودیم که در بدو شروع ساده بودند اما تبدیل به یک وضع آشفته‌ی غیرقابل مهار از منطق‌های دارای state و side effectها شدند. هر lifecycle متشکل از مخلوطی از منطق‌های غیر مرتبط است. برای مثال، یک کامپوننت ممکن است درcomponentDidMount و componentDidUpdate به دریافت داده بپردازد. درحالی‌که همان تابع می‌تواند دارای منطقی غیر مرتبط باشد که به اضافه کردن event listenerها می‌پردازد، و در متد componentWillUnmount آن‌ها [event listenerها] را پاکسازی (cleanup) می‌کند. کدهایی که متقابلا به هم مرتبط هستند [مثل اضافه و پاک‌سازی event listener] از یکدیگر جدا هستند، ولی کدهایی که کاملا غیر مرتبط‌اند [اضافه کردنevent listener و دریافت داده] در یک متد نوشته می‌شوند. که این احتمال خطا و باگ و ناسازگاری را بیشتر می‌کند.

-### Classes confuse both people and machines {#classes-confuse-both-people-and-machines} +

در بسیاری از موارد امکان این وجود ندارد که بتوانیم این کامپوننت‌ها را به اجزای کوچکتر تقسیم کنیم، زیرا منطق دارای state در همه جا وجود دارد. همچنین تست کردن آن‌ها دشوار است. این یکی از دلایلی است که بسیاری از افراد ترجیح می‌دهند تا ری‌اکت را با یک کتابخانه‌ی مدیریت state دیگری ترکیب کنند. اگرچه، معمولا باعث اضافه‌شدن مقدار زیادی تجرید می‌شود و شما را مجبور می‌کند بین تعداد زیادی از فایل‌ها جابه‌جا شوید که خود باعث مشکل‌تر شدن استفاده‌ی مجدد از کامپوننت‌ها می‌گردد.

-In addition to making code reuse and code organization more difficult, we've found that classes can be a large barrier to learning React. You have to understand how `this` works in JavaScript, which is very different from how it works in most languages. You have to remember to bind the event handlers. Without unstable [syntax proposals](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), the code is very verbose. People can understand props, state, and top-down data flow perfectly well but still struggle with classes. The distinction between function and class components in React and when to use each one leads to disagreements even between experienced React developers. +

برای حل این مسیله، هوک‌ها به شما اجازه می‌دهند یک کامپوننت را به توابع کوچکتری تقسیم کنید که مبنای آن ارتباط اجزایشان است (مثلا اضافه کردن یک اشتراک ‪(‬subscription‪)‬ یا دریافت داده)، نه تقسیم بر اساس متدهای lifecycle‪.‬ همچنین می‌توانید برای مدیریت state محلی از یک reducer کمک بگیرید تا بیشتر مطابق با پیش‌بینی شما باشد.

-Additionally, React has been out for about five years, and we want to make sure it stays relevant in the next five years. As [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), and others show, [ahead-of-time compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) of components has a lot of future potential. Especially if it's not limited to templates. Recently, we've been experimenting with [component folding](https://github.com/facebook/react/issues/7323) using [Prepack](https://prepack.io/), and we've seen promising early results. However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today's tools, too. For example, classes don't minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path. +

در این باره در +استفاده از Effect Hook بیشتر بحث خواهیم کرد.

-To solve these problems, **Hooks let you use more of React's features without classes.** Conceptually, React components have always been closer to functions. Hooks embrace functions, but without sacrificing the practical spirit of React. Hooks provide access to imperative escape hatches and don't require you to learn complex functional or reactive programming techniques. +

کلاس‌ها هم انسان و هم کامپیوتر را گیج می‌کنند

->Examples -> ->[Hooks at a Glance](/docs/hooks-overview.html) is a good place to start learning Hooks. +

علاوه بر دشوار کردن قابلیت استفاده مجدد از کد و نظم آن، دریافتیم که کلاس‌ها می‌توانند مانع بزرگی در یادگیری ری‌اکت باشند. شما باید یادبگیرید که this چگونه در جاوااسکریپت کار می‌کند، که با نحوه‌ی کار کردش در اکثر زبان‌ها بسیار متفاوت است. شما باید به یاد داشته باشید تا event handlerها را bind کنید. بدون syntax proposals، کد بسیار طولانی خواهد بود. آدم‌ها می‌توانند props، state، و جریان بالا به پایین داده را کاملا دریابند ولی هنوز با کلاس‌ها کلنجار بروند. برتری کامپوننت از جنس تابع یا کلاس در ری‌اکت و موارد استفاده از آن‌ها باعث اختلاف نظر است، حتی در میان دولوپرهای با تجربه‌ی ری‌اکت.

-## Gradual Adoption Strategy {#gradual-adoption-strategy} +

بعلاوه، ری‌اکت ۵ سال است که عرضه شده است، و ما می‌خواهیم در ۵ سال آینده مطرح باشد. همانطور که Svelte، Angular،Glimmerو دیگران نشان می‌دهند، کامپایل پیش از موعد کامپوننت‌ها، پتانسیل قابلیت‌های زیادی را دارد. بالاخص اگر به تمپلت‌ها مححدود نباشد. ما اخیرا با +component folding بوسیله‌ی Prepack‌ ‌آزمایشاتی را انجام دادیم که شاهد نتایج سریع و امیدوارکننده بوده‌ایم‫.‬ اگرچه دریافتیم که کامپوننت‌های کلاسی می‌توانند ناخواسته باعث افزایش الگوهایی می‌شوند که چنین بهینه‌سازی‌هایی را بدتر می‌کنند‫.‬ کلاس‌ها برای ابزارهای امروزی نیز مشکلاتی ایجاد می‌کنند‫.‬ برای مثال، کلاس‌ها به خوبی کم‌حجم(minify) نمی‌شوند، آن‌ها با عث می‌شوند تا hot reloading شکننده و نامطمین شود‫.‬ ما می‌خواهیم APIای را ارایه دهیم که به کد امکان بهینه‌سازی شدن بیشتری بدهد‫.‬

->**TLDR: There are no plans to remove classes from React.** +

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

-We know that React developers are focused on shipping products and don't have time to look into every new API that's being released. Hooks are very new, and it might be better to wait for more examples and tutorials before considering learning or adopting them. +
+

مثال‌ها

+

نگاه اجمالی به هوک‌ نقطه‌ی شروع مناسبی برای یادگیری Hookهاست.

+
-We also understand that the bar for adding a new primitive to React is extremely high. For curious readers, we have prepared a [detailed RFC](https://github.com/reactjs/rfcs/pull/68) that dives into motivation with more details, and provides extra perspective on the specific design decisions and related prior art. +

استراتژی تطبیق تدریجی

-**Crucially, Hooks work side-by-side with existing code so you can adopt them gradually.** We are sharing this experimental API to get early feedback from those in the community who are interested in shaping the future of React — and we will iterate on Hooks in the open. +
+

خلاصه: هیچ برنامه‌ای برای حذف کلاس ها از ری‌اکت وجود ندارد‫.‬.

+
-Finally, there is no rush to migrate to Hooks. We recommend avoiding any "big rewrites", especially for existing, complex class components. It takes a bit of a mindshift to start "thinking in Hooks". In our experience, it's best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to [send us feedback](https://github.com/facebook/react/issues/new), positive or negative. +

ما می‌دانیم که دولوپرهای ری‌اکت بر روی عرضه‌ی محصولات تمرکز دارند و وقتی برای نگاه کردن و مطالعه‌ی هر API جدیدی را که منتشر می‌شود، ندارند. هوک‌ها بسیار جدید هستند، و شاید برای یادگیری و بهره‌گیری از آن‌ها بهتر باشد تا برای مثال‌ها و آموزش‌های بیشتر صبر کنید.

-We intend for Hooks to cover all existing use cases for classes, but **we will keep supporting class components for the foreseeable future.** At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes. +

همچنین اطلاع داریم که انتظارات برای اضافه کردن دستورات پایه‌ی جدید به ری‌اکت بسیار بالاست. ما برای خواننده‌های کنجکاو یک RFC با جزییات آماده کرده‌ایم که با عمق بیشتری به انگیزه‌ها می‌پردازد، و دید بیشتری بر تصصمیمات جزیی تصمیم‌گیری‌ها و تصمیمات مرتبط قبلی فراهم می‌کند.

-## Frequently Asked Questions {#frequently-asked-questions} +

‫‬اساسا، هوک ها در کنار کدهای نوشته‌شده از قبل کار خواهند کرد، پس شما می‌توانید بصورت تدریجی از آن‌ها بهره گیرید ما این API آزمایشی را برای این به اشتراک می‌گذاریم تا بتوانیم از بازخوردهای افراد در جامعه که برای شکل دادن به آینده‌ی ری‌اکت مشتاق هستند بهره گیریم. — and we will iterate on Hooks in the open.

-We've prepared a [Hooks FAQ page](/docs/hooks-faq.html) that answers the most common questions about Hooks. +

در انتها، هیچ عجله‌ای برای مهاجرت به هوک‌ها وجود ندارد. ما پیشنهاد می‌کنیم از هرگونه ‪“‬بازنویسی بزرگ‪”‬ بپرهیزید، مخصوصا برای کامپوننت‌های کلاسی موجود و پیچیده. برای ‪“‬تفکر مبتنی بر هوک‌ها‪”‬ مقداری تامل نیاز است. تجربه‌ی ما این است که ابتدا بهترین کار تمرین و کار با هوک‌ها در کامپوننت‌های جدید و غیرحیاتی است، و اطمینان بخشیدن از اینکه همه‌ی افراد تیم شما با آن‌ها ارتباط برقرار کرده‌اند. بعد از اینکه هوک‌ها را امتحان کردید، لطفابازخوردهای خود را برای ما بفرستید ، چه مثبت و چه منفی.

-## Next Steps {#next-steps} +

سوالات متداول

-By the end of this page, you should have a rough idea of what problems Hooks are solving, but many details are probably unclear. Don't worry! **Let's now go to [the next page](/docs/hooks-overview.html) where we start learning about Hooks by example.** +

ما یک صفحه پرسش و پاسخ متداول از hookها فراهم کرده ایم که اکثر سوالات رایج در مورد هوک‌ها را پاسخ‌ می‌دهد.

\ No newline at end of file From 0d9c3f5842e3f67a548cdba32b1ef1bef8fda261 Mon Sep 17 00:00:00 2001 From: Shahab Date: Fri, 15 Feb 2019 17:59:43 +0330 Subject: [PATCH 2/5] minor fixes and remove unicode chars --- content/docs/hooks-intro.md | 72 ++++++++++++++++++------------------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 4bc390042..f35324f4d 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -5,7 +5,7 @@ permalink: docs/hooks-intro.html next: hooks-overview.html --- -

Hookها قابلیتی جدید در React 16.8 هستند. آنها امکان استفاده از state و دیگر قابلیت‌های react را بدون نیاز به نوشتن کلاس به شما می‌دهند.

+

Hookها قابلیتی جدید در React 16.8 هستند. آنها امکان استفاده از state و دیگر قابلیت‌‌های react را بدون نیاز به نوشتن کلاس به شما می‌‌دهند.

```js{4,5} import React, { useState } from 'react'; @@ -25,22 +25,22 @@ function Example() { } ``` -

تابع جدید ‪‬useState‪‬ اولین ‪“‬Hook‪“‬ای است که یاد می‌گیریم، البته این مثال تنها یک نمایش اجمالی است‫.‬ در صورتی که آن را در نیافتید نگران نباشید‫!‬

+

تابع جدید useState اولین «Hook»ای است که یاد می‌‌گیریم، البته این مثال تنها یک نمایش اجمالی است. در صورتی که آن را در نیافتید نگران نباشید!

-

شما می‌توانید برای شروع یادگیری Hookها از صفحه‌ی بعد شروع کنید. -در این صفحه، ما به ذکر دلایلمان برای افزودن هوک‌ها به react و اینکه آن‌ها چگونه می‌توانند به شما کمک کنند تا برنامه‌های خوبی بنویسید، می‌پردازیم.

+

شما می‌‌توانید برای شروع یادگیری Hookها از صفحه‌‌ی بعد شروع کنید. +در این صفحه، ما به ذکر دلایلمان برای افزودن هوک‌‌ها به react و اینکه آن‌‌ها چگونه می‌‌توانند به شما کمک کنند تا برنامه‌‌های خوبی بنویسید، می‌‌پردازیم.

نکته

-

ری‌اکت ۱۶.۸.۰ اولین نسخه منتشر شده است که از هوک‌ها پشتیبانی می‌کند. هنگام ارتقاع، فراموش نکنید همه‌ی پکیج‌ها شامل React DOM را آپدیت نمایید. React Native در نسخه‌ی بعدی پایدار از هوک‌ها پشتیبانی خواهد کرد.

+

ری‌‌اکت ۱۶.۸.۰ اولین نسخه منتشر شده است که از هوک‌‌ها پشتیبانی می‌‌کند. هنگام ارتقاع، فراموش نکنید همه‌‌ی پکیج‌‌ها شامل React DOM را آپدیت نمایید. React Native در نسخه‌‌ی بعدی پایدار از هوک‌‌ها پشتیبانی خواهد کرد.

معرفی ویدیویی

-

در کنفرانس ۲۰۱۸ react، سوفیا آلپرت(Sophie Alpert) و دن آبرامف(Dan Abramov) هوک‌ها را معرفی کردند. بعد از آن رایان فلورنس (Ryan Florence) نشان داد که چگونه می‌توان به منظور استفاده از آنها[هوک‌ها] یک اپلیکیشن را بازنویسی‪(‬refactor‪)‬ کرد. ویدیوی زیر را ببینید:

+

در کنفرانس ۲۰۱۸ react، سوفیا آلپرت(Sophie Alpert) و دن آبرامف(Dan Abramov) هوک‌‌ها را معرفی کردند. بعد از آن رایان فلورنس (Ryan Florence) نشان داد که چگونه می‌‌توان به منظور استفاده از آنها[هوک‌‌ها] یک اپلیکیشن را بازنویسی(refactor) کرد. ویدیوی زیر را ببینید:


@@ -56,71 +56,71 @@ function Example() { -

بدون ایجاد خلل در دیگر قسمت‌ها

+

بدون ایجاد خلل در دیگر قسمت‌‌ها

-

قبل از اینکه ادامه دهیم، توجه کنید که هوک‌ها:

+

قبل از اینکه ادامه دهیم، توجه کنید که هوک‌‌ها:

-

هیچ برنامه‌ای برای حذف کلاس‌ها از ری‌اکت وجود ندارد. شما می‌توانید برای مطالعه‌ی بیشتر در رابطه با راهکار‌‌های تطبیق تدریجی با هوک‌ها از بخش پایین همین صفحه استفاده کنید.

+

هیچ برنامه‌‌ای برای حذف کلاس‌‌ها از ری‌‌اکت وجود ندارد. شما می‌‌توانید برای مطالعه‌‌ی بیشتر در رابطه با راهکار‌‌‌‌های تطبیق تدریجی با هوک‌‌ها از بخش پایین همین صفحه استفاده کنید.

-

هوک‌ها جایگزینی برای دانش و فهم شما از ری‌اکت نیستند. در عوض، هوک‌ها یک رابط برنامه‌ی کاربردی ‪(‬API‪)‬ صریح‌تر برای مفاهیم ری‌اکتی که از قبل می‌دانید فراهم می‌کنند: props ،state ،context ،ref و lifecycle. همان‌طور که بعدا نشان خواهیم داد، هوک‌ها روشی جدید و قدرتمند برای تلفیق آن‌ها ارایه می‌کنند.

+

هوک‌‌ها جایگزینی برای دانش و فهم شما از ری‌‌اکت نیستند. در عوض، هوک‌‌ها یک رابط برنامه‌‌ی کاربردی (API) صریح‌‌تر برای مفاهیم ری‌‌اکتی که از قبل می‌‌دانید فراهم می‌‌کنند: props ،state ،context ،ref و lifecycle. همان‌‌طور که بعدا نشان خواهیم داد، هوک‌‌ها روشی جدید و قدرتمند برای تلفیق آن‌‌ها ارائه می‌‌کنند.

-

اگر هم‌اکنون می‌خواهید یادگیری هوک‌ها را شروع کنید، مستقیم به صفحه‌ی بعد بروید! البته می‌توانید مطالعه‌ی این صفحه را ادامه دهید و با دلایلی که هوک‌ها را به ری‌اکت اضافه کردیم و اینکه چگونه بدون بازنویسی اپلیکیشن‌های قبلی از آن‌ها استفاده خواهیم کرد، آشنا شوید.

+

اگر هم‌‌اکنون می‌‌خواهید یادگیری هوک‌‌ها را شروع کنید، مستقیم به صفحه‌‌ی بعد بروید! البته می‌‌توانید مطالعه‌‌ی این صفحه را ادامه دهید و با دلایلی که هوک‌‌ها را به ری‌‌اکت اضافه کردیم و اینکه چگونه بدون بازنویسی اپلیکیشن‌‌های قبلی از آن‌‌ها استفاده خواهیم کرد، آشنا شوید.

-

انگیزه

+

انگیزه

-

استفاده‌ی مجدد از منطق دارای state در بین کامپوننت‌ها دشوار است

+

استفاده‌‌ی مجدد از منطق دارای state در بین کامپوننت‌‌ها دشوار است

-

ری‌اکت راهی برای ‪“‬چسباندن‪”‬ یک رفتار قابل استفاده‌ی مجدد یه یک کامپوننت را فراهم نمی‌کند (برای مثال اتصال به یک store). اگر شما مدتی با ری‌اکت کار کرده باشید، ممکن است با الگوهایی مانند render props و higher-order components آشنا باشید که سعی در حل این مسیله دارند. اما این الگوها شما را مجبور به تغییر ساختار مجدد کامپوننتتان هنگام استفاده‌ از آن‌ها می‌کنند، که این مسیله می‌تواند مایه‌ی زحمت و سخت‌تر شدن فهم کد باشد. اگر به یک اپلیکیشن ری‌اکت نوعی در React DevTools نگاه کنید، احتمالا با “wrapper hell”ای از کامپوننت‌ها مواجه می‌شوید. کامپوننت‌هایی که با لایه‌هایی از providerها، consumerها، HOCها، render props و دیگر کامپوننت‌هایی که به تجرید کمک می‌کنند، احاطه شده‌اند. در حالی که ما می‌توانیم آن‌ها را در DevTools فیلتر کنیم، این [مشکل] به یک مسیله‌ی بنیادین اشاره دارد: ری‌اکت باید عناصری ابتدایی برای به اشتراک گذاری منطق دارای state فراهم کند.

+

ری‌‌اکت راهی برای «اضافه‌کردن» یک رفتار قابل استفاده‌‌ی مجدد یه یک کامپوننت را فراهم نمی‌‌کند (برای مثال اتصال به یک store). اگر شما مدتی با ری‌‌اکت کار کرده باشید، ممکن است با الگوهایی مانند render props و higher-order components آشنا باشید که سعی در حل این مسیله دارند. اما این الگوها شما را مجبور به تغییر ساختار مجدد کامپوننتتان هنگام استفاده‌‌ از آن‌‌ها می‌‌کنند، که این مسیله می‌‌تواند مایه‌‌ی زحمت و سخت‌‌تر شدن فهم کد باشد. اگر به یک اپلیکیشن ری‌‌اکت نوعی در React DevTools نگاه کنید، احتمالا با «wrapper hell»ای از کامپوننت‌‌ها مواجه می‌‌شوید. کامپوننت‌‌هایی که با لایه‌‌هایی از providerها، consumerها، HOCها، render props و دیگر کامپوننت‌‌هایی که به تجرید کمک می‌‌کنند، احاطه شده‌‌اند. در حالی که ما می‌‌توانیم آن‌‌ها را در DevTools فیلتر کنیم، این [مشکل] به یک مسیله‌‌ی بنیادین اشاره دارد: ری‌‌اکت باید عناصری ابتدایی برای به اشتراک گذاری منطق دارای state فراهم کند.

-

با استفاده از هوک‌ها، شما می‌توانید بخش منطق دارای state را از یک کامپوننت استخراج کنید، بطوری که بطور مستقل بتواند مورد آزمایش و استفاده‌ی مجدد قرار گیرد. هوک ها به شما اجازه می‌دهند که بدون ایجاد تغییر در سلسله مراتب کامپوننت‌هایتان، از منطق دارای state مجددا استفاده نمایید. این کار باعث تسهیل در به اشتراک‌گذاری هوک‌ها بین کامپوننت‌های مختلف یا بین جامعه‪]‬ی ری‌اکت‪[‬ می‌شود.

+

با استفاده از هوک‌‌ها، شما می‌‌توانید بخش منطق دارای state را از یک کامپوننت استخراج کنید، بطوری که بطور مستقل بتواند مورد آزمایش و استفاده‌‌ی مجدد قرار گیرد. هوک ها به شما اجازه می‌‌دهند که بدون ایجاد تغییر در سلسله مراتب کامپوننت‌‌هایتان، از منطق دارای state مجددا استفاده نمایید. این کار باعث تسهیل در به اشتراک‌‌گذاری هوک‌‌ها بین کامپوننت‌‌های مختلف یا بین جامعه[ی ری‌‌اکت] می‌‌شود.

ما در این رابطه بیشتر در هوک مخصوص خود را بسازید بحث خواهیم کرد.

-

فهم کامپوننت‌های پیچیده دشوارتر می‌شود

+

فهم کامپوننت‌‌های پیچیده دشوارتر می‌‌شود

-

ما معمولا مجبور به نگه‌داری از کامپوننت‌هایی بودیم که در بدو شروع ساده بودند اما تبدیل به یک وضع آشفته‌ی غیرقابل مهار از منطق‌های دارای state و side effectها شدند. هر lifecycle متشکل از مخلوطی از منطق‌های غیر مرتبط است. برای مثال، یک کامپوننت ممکن است درcomponentDidMount و componentDidUpdate به دریافت داده بپردازد. درحالی‌که همان تابع می‌تواند دارای منطقی غیر مرتبط باشد که به اضافه کردن event listenerها می‌پردازد، و در متد componentWillUnmount آن‌ها [event listenerها] را پاکسازی (cleanup) می‌کند. کدهایی که متقابلا به هم مرتبط هستند [مثل اضافه و پاک‌سازی event listener] از یکدیگر جدا هستند، ولی کدهایی که کاملا غیر مرتبط‌اند [اضافه کردنevent listener و دریافت داده] در یک متد نوشته می‌شوند. که این احتمال خطا و باگ و ناسازگاری را بیشتر می‌کند.

+

ما معمولا مجبور به نگه‌‌داری از کامپوننت‌‌هایی بودیم که در بدو شروع ساده بودند اما تبدیل به یک وضع آشفته‌‌ی غیرقابل مهار از منطق‌‌های دارای state و side effectها شدند. هر lifecycle متشکل از مخلوطی از منطق‌‌های غیر مرتبط است. برای مثال، یک کامپوننت ممکن است درcomponentDidMount و componentDidUpdate به دریافت داده بپردازد. درحالی‌‌که همان تابع می‌‌تواند دارای منطقی غیر مرتبط باشد که به اضافه کردن event listenerها می‌‌پردازد، و در متد componentWillUnmount آن‌‌ها [event listenerها] را پاکسازی (cleanup) می‌‌کند. کدهایی که متقابلا به هم مرتبط هستند [مثل اضافه و پاک‌‌سازی event listener] از یکدیگر جدا هستند، ولی کدهایی که کاملا غیر مرتبط‌‌اند [اضافه کردنevent listener و دریافت داده] در یک متد نوشته می‌‌شوند. که این احتمال خطا و باگ و ناسازگاری را بیشتر می‌‌کند.

-

در بسیاری از موارد امکان این وجود ندارد که بتوانیم این کامپوننت‌ها را به اجزای کوچکتر تقسیم کنیم، زیرا منطق دارای state در همه جا وجود دارد. همچنین تست کردن آن‌ها دشوار است. این یکی از دلایلی است که بسیاری از افراد ترجیح می‌دهند تا ری‌اکت را با یک کتابخانه‌ی مدیریت state دیگری ترکیب کنند. اگرچه، معمولا باعث اضافه‌شدن مقدار زیادی تجرید می‌شود و شما را مجبور می‌کند بین تعداد زیادی از فایل‌ها جابه‌جا شوید که خود باعث مشکل‌تر شدن استفاده‌ی مجدد از کامپوننت‌ها می‌گردد.

+

در بسیاری از موارد امکان این وجود ندارد که بتوانیم این کامپوننت‌‌ها را به اجزای کوچکتر تقسیم کنیم، زیرا منطق دارای state در همه جا وجود دارد. همچنین تست کردن آن‌‌ها دشوار است. این یکی از دلایلی است که بسیاری از افراد ترجیح می‌‌دهند تا ری‌‌اکت را با یک کتابخانه‌‌ی مدیریت state دیگری ترکیب کنند. اگرچه، معمولا باعث اضافه‌‌شدن مقدار زیادی تجرید می‌‌شود و شما را مجبور می‌‌کند بین تعداد زیادی از فایل‌‌ها جابه‌‌جا شوید که خود باعث مشکل‌‌تر شدن استفاده‌‌ی مجدد از کامپوننت‌‌ها می‌‌گردد.

-

برای حل این مسیله، هوک‌ها به شما اجازه می‌دهند یک کامپوننت را به توابع کوچکتری تقسیم کنید که مبنای آن ارتباط اجزایشان است (مثلا اضافه کردن یک اشتراک ‪(‬subscription‪)‬ یا دریافت داده)، نه تقسیم بر اساس متدهای lifecycle‪.‬ همچنین می‌توانید برای مدیریت state محلی از یک reducer کمک بگیرید تا بیشتر مطابق با پیش‌بینی شما باشد.

+

برای حل این مسیله، هوک‌‌ها به شما اجازه می‌‌دهند یک کامپوننت را به توابع کوچکتری تقسیم کنید که مبنای آن ارتباط اجزایشان است (مثلا اضافه کردن یک اشتراک (subscription) یا دریافت داده)، نه تقسیم بر اساس متدهای lifecycle. همچنین می‌‌توانید برای مدیریت state محلی از یک reducer کمک بگیرید تا بیشتر مطابق با پیش‌‌بینی شما باشد.

در این باره در -استفاده از Effect Hook بیشتر بحث خواهیم کرد.

+استفاده از Effect Hookبیشتر بحث خواهیم کرد.

-

کلاس‌ها هم انسان و هم کامپیوتر را گیج می‌کنند

+

کلاس‌‌ها هم انسان و هم کامپیوتر را گیج می‌‌کنند

-

علاوه بر دشوار کردن قابلیت استفاده مجدد از کد و نظم آن، دریافتیم که کلاس‌ها می‌توانند مانع بزرگی در یادگیری ری‌اکت باشند. شما باید یادبگیرید که this چگونه در جاوااسکریپت کار می‌کند، که با نحوه‌ی کار کردش در اکثر زبان‌ها بسیار متفاوت است. شما باید به یاد داشته باشید تا event handlerها را bind کنید. بدون syntax proposals، کد بسیار طولانی خواهد بود. آدم‌ها می‌توانند props، state، و جریان بالا به پایین داده را کاملا دریابند ولی هنوز با کلاس‌ها کلنجار بروند. برتری کامپوننت از جنس تابع یا کلاس در ری‌اکت و موارد استفاده از آن‌ها باعث اختلاف نظر است، حتی در میان دولوپرهای با تجربه‌ی ری‌اکت.

+

علاوه بر دشوار کردن قابلیت استفاده مجدد از کد و نظم آن، دریافتیم که کلاس‌‌ها می‌‌توانند مانع بزرگی در یادگیری ری‌‌اکت باشند. شما باید یادبگیرید که this چگونه در جاوااسکریپت کار می‌‌کند، که با نحوه‌‌ی کار کردش در اکثر زبان‌‌ها بسیار متفاوت است. شما باید به یاد داشته باشید تا event handlerها را bind کنید. بدون syntax proposals، کد بسیار طولانی خواهد بود. آدم‌‌ها می‌‌توانند props، state، و جریان بالا به پایین داده را کاملا دریابند ولی هنوز با کلاس‌‌ها کلنجار بروند. برتری کامپوننت از جنس تابع یا کلاس در ری‌‌اکت و موارد استفاده از آن‌‌ها باعث اختلاف نظر است، حتی در میان دولوپرهای با تجربه‌‌ی ری‌‌اکت.

-

بعلاوه، ری‌اکت ۵ سال است که عرضه شده است، و ما می‌خواهیم در ۵ سال آینده مطرح باشد. همانطور که Svelte، Angular،Glimmerو دیگران نشان می‌دهند، کامپایل پیش از موعد کامپوننت‌ها، پتانسیل قابلیت‌های زیادی را دارد. بالاخص اگر به تمپلت‌ها مححدود نباشد. ما اخیرا با -component folding بوسیله‌ی Prepack‌ ‌آزمایشاتی را انجام دادیم که شاهد نتایج سریع و امیدوارکننده بوده‌ایم‫.‬ اگرچه دریافتیم که کامپوننت‌های کلاسی می‌توانند ناخواسته باعث افزایش الگوهایی می‌شوند که چنین بهینه‌سازی‌هایی را بدتر می‌کنند‫.‬ کلاس‌ها برای ابزارهای امروزی نیز مشکلاتی ایجاد می‌کنند‫.‬ برای مثال، کلاس‌ها به خوبی کم‌حجم(minify) نمی‌شوند، آن‌ها با عث می‌شوند تا hot reloading شکننده و نامطمین شود‫.‬ ما می‌خواهیم APIای را ارایه دهیم که به کد امکان بهینه‌سازی شدن بیشتری بدهد‫.‬

+

بعلاوه، ری‌‌اکت ۵ سال است که عرضه شده است، و ما می‌‌خواهیم در ۵ سال آینده مطرح باشد. همانطور که Svelte، Angular،Glimmerو دیگران نشان می‌‌دهند، کامپایل پیش از موعد کامپوننت‌‌ها، پتانسیل قابلیت‌‌های زیادی را دارد. بالاخص اگر به تمپلت‌‌ها مححدود نباشد. ما اخیرا با +component folding بوسیله‌‌ی Prepack‌‌ ‌‌آزمایشاتی را انجام دادیم که شاهد نتایج سریع و امیدوارکننده بوده‌‌ایم. اگرچه دریافتیم که کامپوننت‌‌های کلاسی می‌‌توانند ناخواسته باعث افزایش الگوهایی شوند که چنین بهینه‌‌سازی‌‌هایی را بدتر می‌‌کنند. کلاس‌‌ها برای ابزارهای امروزی نیز مشکلاتی ایجاد می‌‌کنند. برای مثال، کلاس‌‌ها به خوبی کم‌‌حجم(minify) نمی‌‌شوند، آن‌‌ها باعث می‌‌شوند تا hot reloading شکننده و نامطمئن شود. ما می‌‌خواهیم APIای را ارائه دهیم که به کد امکان بهینه‌‌سازی بیشتری بدهد.

-

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

+

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

-

مثال‌ها

-

نگاه اجمالی به هوک‌ نقطه‌ی شروع مناسبی برای یادگیری Hookهاست.

+

مثال‌‌ها

+

نگاه اجمالی به هوک‌‌ نقطه‌‌ی شروع مناسبی برای یادگیری Hookهاست.

استراتژی تطبیق تدریجی

-

خلاصه: هیچ برنامه‌ای برای حذف کلاس ها از ری‌اکت وجود ندارد‫.‬.

+

خلاصه: هیچ برنامه‌‌ای برای حذف کلاس ها از ری‌‌اکت وجود ندارد.

-

ما می‌دانیم که دولوپرهای ری‌اکت بر روی عرضه‌ی محصولات تمرکز دارند و وقتی برای نگاه کردن و مطالعه‌ی هر API جدیدی را که منتشر می‌شود، ندارند. هوک‌ها بسیار جدید هستند، و شاید برای یادگیری و بهره‌گیری از آن‌ها بهتر باشد تا برای مثال‌ها و آموزش‌های بیشتر صبر کنید.

+

ما می‌‌دانیم که دولوپرهای ری‌‌اکت بر روی عرضه‌‌ی محصولات تمرکز دارند و وقتی برای نگاه کردن و مطالعه‌‌ی هر API جدیدی را که منتشر می‌‌شود، ندارند. هوک‌‌ها بسیار جدید هستند، و شاید برای یادگیری و بهره‌‌گیری از آن‌‌ها بهتر باشد تا برای مثال‌‌ها و آموزش‌‌های بیشتر صبر کنید.

-

همچنین اطلاع داریم که انتظارات برای اضافه کردن دستورات پایه‌ی جدید به ری‌اکت بسیار بالاست. ما برای خواننده‌های کنجکاو یک RFC با جزییات آماده کرده‌ایم که با عمق بیشتری به انگیزه‌ها می‌پردازد، و دید بیشتری بر تصصمیمات جزیی تصمیم‌گیری‌ها و تصمیمات مرتبط قبلی فراهم می‌کند.

+

همچنین اطلاع داریم که انتظارات برای اضافه کردن دستورات پایه‌‌ی جدید به ری‌‌اکت بسیار بالاست. ما برای خواننده‌‌های کنجکاو یک RFC با جزییات آماده کرده‌‌ایم که با عمق بیشتری به انگیزه‌‌ها می‌‌پردازد، و دید بیشتری بر تصصمیمات جزیی تصمیم‌‌گیری‌‌ها و تصمیمات مرتبط قبلی فراهم می‌‌کند.

-

‫‬اساسا، هوک ها در کنار کدهای نوشته‌شده از قبل کار خواهند کرد، پس شما می‌توانید بصورت تدریجی از آن‌ها بهره گیرید ما این API آزمایشی را برای این به اشتراک می‌گذاریم تا بتوانیم از بازخوردهای افراد در جامعه که برای شکل دادن به آینده‌ی ری‌اکت مشتاق هستند بهره گیریم. — and we will iterate on Hooks in the open.

+

اساسا، هوک ها در کنار کدهای نوشته‌‌شده از قبل کار خواهند کرد، پس شما می‌‌توانید بصورت تدریجی از آن‌‌ها بهره گیرید. ما این API آزمایشی را برای این به اشتراک می‌‌گذاریم تا بتوانیم از بازخوردهای سریع افراد در جامعه که برای شکل دادن به آینده‌‌ی ری‌‌اکت مشتاق هستند بهره گیریم. — and we will iterate on Hooks in the open.

-

در انتها، هیچ عجله‌ای برای مهاجرت به هوک‌ها وجود ندارد. ما پیشنهاد می‌کنیم از هرگونه ‪“‬بازنویسی بزرگ‪”‬ بپرهیزید، مخصوصا برای کامپوننت‌های کلاسی موجود و پیچیده. برای ‪“‬تفکر مبتنی بر هوک‌ها‪”‬ مقداری تامل نیاز است. تجربه‌ی ما این است که ابتدا بهترین کار تمرین و کار با هوک‌ها در کامپوننت‌های جدید و غیرحیاتی است، و اطمینان بخشیدن از اینکه همه‌ی افراد تیم شما با آن‌ها ارتباط برقرار کرده‌اند. بعد از اینکه هوک‌ها را امتحان کردید، لطفابازخوردهای خود را برای ما بفرستید ، چه مثبت و چه منفی.

+

در انتها، هیچ عجله‌‌ای برای مهاجرت به هوک‌‌ها وجود ندارد. ما پیشنهاد می‌‌کنیم از هرگونه «بازنویسی بزرگ» بپرهیزید، مخصوصا برای کامپوننت‌‌های کلاسی موجود و پیچیده. برای «تفکر مبتنی بر هوک‌‌ها» مقداری نیازمند تامل است. تجربه‌‌ی ما این است که بهترین کار برای شروع، تمرین و کار با هوک‌‌ها در کامپوننت‌‌های جدید و غیرحیاتی است، و حصول اطمینان از اینکه همه‌‌ی افراد تیم شما با آن‌‌ها ارتباط برقرار کرده‌‌اند. بعد از اینکه هوک‌‌ها را امتحان کردید، لطفا بازخوردهای خود را برای ما بفرستید ، چه مثبت و چه منفی.

سوالات متداول

-

ما یک صفحه پرسش و پاسخ متداول از hookها فراهم کرده ایم که اکثر سوالات رایج در مورد هوک‌ها را پاسخ‌ می‌دهد.

\ No newline at end of file +

ما یک صفحه پرسش و پاسخ متداول از hookها فراهم کرده ایم که اکثر سوالات رایج در مورد هوک‌‌ها را پاسخ‌‌ می‌‌دهد.

\ No newline at end of file From 0486d370e995c3ae1c2d82529e830d9e18f7e3c6 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Wed, 27 Feb 2019 13:08:26 +0330 Subject: [PATCH 3/5] Improve the translation of hooks-intro.md [WIP] --- content/docs/hooks-intro.md | 50 +++++++++++-------------------------- 1 file changed, 15 insertions(+), 35 deletions(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index f35324f4d..950590d8c 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -5,7 +5,7 @@ permalink: docs/hooks-intro.html next: hooks-overview.html --- -

Hookها قابلیتی جدید در React 16.8 هستند. آنها امکان استفاده از state و دیگر قابلیت‌‌های react را بدون نیاز به نوشتن کلاس به شما می‌‌دهند.

+*هوک‌ها* قابلیت جدیدی هستند که به نسخه ۱۶.۸ اضافه شده‌اند. با استفاده از آن‌ها می‌توانید بدون نوشتن کلاس، از state و دیگر ویژگی‌های ری‌اکت استفاده کنید. ```js{4,5} import React, { useState } from 'react'; @@ -25,50 +25,30 @@ function Example() { } ``` -

تابع جدید useState اولین «Hook»ای است که یاد می‌‌گیریم، البته این مثال تنها یک نمایش اجمالی است. در صورتی که آن را در نیافتید نگران نباشید!

+تابع جدید `useState` اولین هوکی است که آن را یاد می‌گیریم. اگر آن را درک نمی‌کنید، نگران نباشید چون این مثال فقط برای آشنایی اولیه آورده شده‌است. +در این صفحه ما درباره این‌که چرا هوک‌ها را به ری‌اکت اضافه کردیم و چگونه با استفاده از آن‌ها می توان برنامه‌های بسیار خوبی ساخت، صحبت می‌کنیم. **پس اگر می‌خواهید استفاده از هوک‌ها را یاد بگیرید، مستقیم به [صفحه بعد](/docs/hooks-overview.html) بروید.** -

شما می‌‌توانید برای شروع یادگیری Hookها از صفحه‌‌ی بعد شروع کنید. -در این صفحه، ما به ذکر دلایلمان برای افزودن هوک‌‌ها به react و اینکه آن‌‌ها چگونه می‌‌توانند به شما کمک کنند تا برنامه‌‌های خوبی بنویسید، می‌‌پردازیم.

+> نکته +> ری‌‌اکت ۱۶.۸.۰ اولین نسخه منتشر شده است که از هوک‌‌ها پشتیبانی می‌‌کند. هنگام ارتقاع، فراموش نکنید همه‌‌ی پکیج‌‌ها شامل React DOM را به‌روز رسانی نمایید. هوک‌ها به نسخه‌‌ی پایدار بعدی ری‌اکت نیتیو نیز اضافه خواهدشد. +## معرفی تصویری {#video-introduction} -
-

نکته

-

ری‌‌اکت ۱۶.۸.۰ اولین نسخه منتشر شده است که از هوک‌‌ها پشتیبانی می‌‌کند. هنگام ارتقاع، فراموش نکنید همه‌‌ی پکیج‌‌ها شامل React DOM را آپدیت نمایید. React Native در نسخه‌‌ی بعدی پایدار از هوک‌‌ها پشتیبانی خواهد کرد.

-
- -

معرفی ویدیویی

- -

در کنفرانس ۲۰۱۸ react، سوفیا آلپرت(Sophie Alpert) و دن آبرامف(Dan Abramov) هوک‌‌ها را معرفی کردند. بعد از آن رایان فلورنس (Ryan Florence) نشان داد که چگونه می‌‌توان به منظور استفاده از آنها[هوک‌‌ها] یک اپلیکیشن را بازنویسی(refactor) کرد. ویدیوی زیر را ببینید:

- -
+در کنفرانس ری‌اکت ۲۰۱۸، سوفی آلپرت (Sophie Alpert) و دن آبراموف (Dan Abramov) هوک‌ها را معرفی کردند. و در ادامه رایان فلورنس (Ryan Florence) نشان داد که چگونه می‌توان یک برنامه را بازنویسی کرد که از هوک‌ها استفاده کند. ویدیو آن را مشاهده کنید: -
-
- -
-
+ -

بدون ایجاد خلل در دیگر قسمت‌‌ها

+## بدون تغییرات مخرب {#no-breaking-changes} -

قبل از اینکه ادامه دهیم، توجه کنید که هوک‌‌ها:

+قبل از ادامه، توجه داشته‌باشید که هوک‌ها: +* **کاملا اختیاری.** شما می‌‌توانید هوک‌‌ها را بدون نیاز به دوباره نوشتن کدهای قبلی، در چند کامپوننت جدید امتحان کنید. اما مجبور نیستید که حالا هوک‌ها را یاد بگیرید اگر تمایلی به فراگیری آن ندارید. +* **۱۰۰٪ سازگار با کد‌های قدیمی**. هوک‌ها تغییرات مخربی ندارند و باعث از کار افتادن دیگر قسمت‌ها نخواهند شد. +* **قابل استفاده از همین حالا**. هوک‌ها هم‌اکنون ابا انتشار نسخه‌‌ی ۱۶.۸.۰ قابل استفاده هستند. -
    -
  • کاملا اختیاری. شما می‌‌توانید هوک‌‌ها را بدون نیاز به دوباره نوشتن کدهای قبلی، در چند کامپوننت جدید امتحان کنید. ولی شما در صورت عدم تمایل،‌‌ مجبور به فراگیریی یا استفاده از هوک‌‌ها کنید.
    • -
  • ۱۰۰٪‌‌ سازگاری با قبل. هوک‌‌ها با دیگر قسمت‌‌‌‌ها سازگار می‌‌باشند.
    • -
  • قابل استفاده از هم‌‌اکنون. هوک‌ها هم اکنون از نسخه‌‌ی ۱۶.۸.۰ قابل استفاده هستند.
    • -
+**هیچ برنامه‌‌ای برای حذف کلاس‌‌ها از ری‌‌اکت وجود ندارد.** شما می‌‌توانید برای مطالعه‌‌ی بیشتر در رابطه با راهکار‌‌‌‌های تطبیق تدریجی با هوک‌‌ها از [بخش پایین](#gradual-adoption-strategy) همین صفحه استفاده کنید. -

هیچ برنامه‌‌ای برای حذف کلاس‌‌ها از ری‌‌اکت وجود ندارد. شما می‌‌توانید برای مطالعه‌‌ی بیشتر در رابطه با راهکار‌‌‌‌های تطبیق تدریجی با هوک‌‌ها از بخش پایین همین صفحه استفاده کنید.

-

هوک‌‌ها جایگزینی برای دانش و فهم شما از ری‌‌اکت نیستند. در عوض، هوک‌‌ها یک رابط برنامه‌‌ی کاربردی (API) صریح‌‌تر برای مفاهیم ری‌‌اکتی که از قبل می‌‌دانید فراهم می‌‌کنند: props ،state ،context ،ref و lifecycle. همان‌‌طور که بعدا نشان خواهیم داد، هوک‌‌ها روشی جدید و قدرتمند برای تلفیق آن‌‌ها ارائه می‌‌کنند.

+هوک‌ها جایگزین برای دانش شما از مفاهیم ری‌اکت نخواهند شد. در عوض هوک‌ها یک رابط (API) مستقیم برای مفاهیم ری‌‌اکتی که از قبل می‌‌دانید مانند props، state، context، refs و چرخه حیات فراهم می‌‌کنند. همچنین بعدا نشان خواهیم داد که چگونه هوک‌‌ها روشی جدید و قدرتمند برای تلفیق آن‌‌ها ارائه می‌‌کنند.

اگر هم‌‌اکنون می‌‌خواهید یادگیری هوک‌‌ها را شروع کنید، مستقیم به صفحه‌‌ی بعد بروید! البته می‌‌توانید مطالعه‌‌ی این صفحه را ادامه دهید و با دلایلی که هوک‌‌ها را به ری‌‌اکت اضافه کردیم و اینکه چگونه بدون بازنویسی اپلیکیشن‌‌های قبلی از آن‌‌ها استفاده خواهیم کرد، آشنا شوید.

From c72de7b9e87a02b24a367bec63bd26d2b7926721 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Wed, 27 Feb 2019 18:39:55 +0330 Subject: [PATCH 4/5] Complete the translation of hooks-intro.md --- content/docs/hooks-intro.md | 71 +++++++++++++++++++------------------ 1 file changed, 36 insertions(+), 35 deletions(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 950590d8c..1c99bb0bc 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -41,66 +41,67 @@ function Example() { ## بدون تغییرات مخرب {#no-breaking-changes} قبل از ادامه، توجه داشته‌باشید که هوک‌ها: -* **کاملا اختیاری.** شما می‌‌توانید هوک‌‌ها را بدون نیاز به دوباره نوشتن کدهای قبلی، در چند کامپوننت جدید امتحان کنید. اما مجبور نیستید که حالا هوک‌ها را یاد بگیرید اگر تمایلی به فراگیری آن ندارید. -* **۱۰۰٪ سازگار با کد‌های قدیمی**. هوک‌ها تغییرات مخربی ندارند و باعث از کار افتادن دیگر قسمت‌ها نخواهند شد. -* **قابل استفاده از همین حالا**. هوک‌ها هم‌اکنون ابا انتشار نسخه‌‌ی ۱۶.۸.۰ قابل استفاده هستند. +* **کاملا اختیاری هستند.** شما می‌‌توانید هوک‌‌ها را بدون نیاز به دوباره نوشتن کدهای قبلی، در چند کامپوننت جدید امتحان کنید. اما مجبور نیستید که حالا هوک‌ها را یاد بگیرید اگر تمایلی به فراگیری آن ندارید. +* **با کد‌های قدیمی ۱۰۰٪ سازگار هستند**. هوک‌ها تغییرات مخربی ندارند و باعث از کار افتادن دیگر قسمت‌ها نخواهند شد. +* **از همین حالا قابل استفاده هستند**. هوک‌ها هم‌اکنون ابا انتشار نسخه‌‌ی ۱۶.۸.۰ قابل استفاده هستند. **هیچ برنامه‌‌ای برای حذف کلاس‌‌ها از ری‌‌اکت وجود ندارد.** شما می‌‌توانید برای مطالعه‌‌ی بیشتر در رابطه با راهکار‌‌‌‌های تطبیق تدریجی با هوک‌‌ها از [بخش پایین](#gradual-adoption-strategy) همین صفحه استفاده کنید. - هوک‌ها جایگزین برای دانش شما از مفاهیم ری‌اکت نخواهند شد. در عوض هوک‌ها یک رابط (API) مستقیم برای مفاهیم ری‌‌اکتی که از قبل می‌‌دانید مانند props، state، context، refs و چرخه حیات فراهم می‌‌کنند. همچنین بعدا نشان خواهیم داد که چگونه هوک‌‌ها روشی جدید و قدرتمند برای تلفیق آن‌‌ها ارائه می‌‌کنند. -

اگر هم‌‌اکنون می‌‌خواهید یادگیری هوک‌‌ها را شروع کنید، مستقیم به صفحه‌‌ی بعد بروید! البته می‌‌توانید مطالعه‌‌ی این صفحه را ادامه دهید و با دلایلی که هوک‌‌ها را به ری‌‌اکت اضافه کردیم و اینکه چگونه بدون بازنویسی اپلیکیشن‌‌های قبلی از آن‌‌ها استفاده خواهیم کرد، آشنا شوید.

+اگر هم‌‌اکنون می‌‌خواهید یادگیری هوک‌‌ها را شروع کنید، [مستقیم به صفحه‌‌ی بعد بروید!](/docs/hooks-overview.html) البته می‌‌توانید مطالعه‌‌ این صفحه را ادامه دهید و با دلایلی که هوک‌‌ها را به ری‌‌اکت اضافه کردیم و اینکه چگونه بدون بازنویسی اپلیکیشن‌‌های قبلی از آن‌‌ها استفاده خواهیم کرد، آشنا شوید. + +## انگیزه + +هوک‌ها مشکلات مختلفی که ظاهرا به هم ارتباط ندارند را حل می‌کنند. مواردی که ما طی در نوشتن و نگهداری هزاران کامپوننت طی پنج سال با آن مواجه شده‌ایم. اگر درحال یادگیری ری‌اکت هستید، هروز از آن استفاده می‌کنید یا از کتابخانه مشابهی استفاده می‌کنید که بر پایه کامپوننت طراحی شده‌است، احتمالا به این مشکلات بر خورد کرده‌اید. + +### استفاده از منطق وابسته به state میان کامپوننت چند کامپوننت دشوار است {#its-hard-to-reuse-stateful-logic-between-components} -

انگیزه

+ری‌‌اکت راهی برای «اضافه‌کردن» یک رفتار با قابلیت استفاده‌‌ی مجدد یه یک کامپوننت را فراهم نمی‌‌کند (برای مثال اتصال به یک store). اگر شما مدتی با ری‌‌اکت کار کرده باشید، ممکن است با الگوهایی مانند [render props](/docs/render-props.html) و [higher-order components](/docs/higher-order-components.html) آشنا شده‌باشید که سعی کرده‌اند حل این مسئله را حل کنند. اما این الگوها شما را مجبور به طراحی مججد ساختار کامپوننت، هنگام استفاده‌‌ از آن‌‌ها می‌‌کنند، که این مسئله فهم کد را دشوارتر می‌کند. اگر به یک اپلیکیشن ری‌‌اکت معمول در React DevTools نگاه کنید، احتمالا با جهنمی از کامپوننت‌های تودرتو (wrapper hell) مواجه می‌شوید. کامپوننت‌هایی که توسط لایه‌های provider، consumer، higher-order component، render props و دیگر لایه‌هایی برای ایحاد abstraction احاطه شده‌اند. اگرچه ما [می‌توانستیم آن‌ها را هنگام نمایش فیلتر کنیم](https://github.com/facebook/react-devtools/pull/503)، این موضوع به مشکلی ریشه‌ای اشاره می‌کند: ری‌اکت نیازمند زیرساخت بهتری برای اشتراک منطق‌های وابسته به state میان کامپوننت‌ها است. -

استفاده‌‌ی مجدد از منطق دارای state در بین کامپوننت‌‌ها دشوار است

+با استفاده از هوک‌ها، شما می‌توانید منطق وابسته به state را از یک کامپوننت جدا، به طور مستقل تست و چندین جا استفاده کنید. **هوک‌ها به شما اجازه می‌دهند که منطق وابسته به state را بدون تغییر در طراحی سلسله مراتب کامپوننت‌ها، هربار مجددا استفاده کنید.** با این ویژگی می‌توان هوک‌ها را میان کامپوننت‌ها و حتی برای جامعه توسعه‌دهندگان به اشتراک گذاشت. -

ری‌‌اکت راهی برای «اضافه‌کردن» یک رفتار قابل استفاده‌‌ی مجدد یه یک کامپوننت را فراهم نمی‌‌کند (برای مثال اتصال به یک store). اگر شما مدتی با ری‌‌اکت کار کرده باشید، ممکن است با الگوهایی مانند render props و higher-order components آشنا باشید که سعی در حل این مسیله دارند. اما این الگوها شما را مجبور به تغییر ساختار مجدد کامپوننتتان هنگام استفاده‌‌ از آن‌‌ها می‌‌کنند، که این مسیله می‌‌تواند مایه‌‌ی زحمت و سخت‌‌تر شدن فهم کد باشد. اگر به یک اپلیکیشن ری‌‌اکت نوعی در React DevTools نگاه کنید، احتمالا با «wrapper hell»ای از کامپوننت‌‌ها مواجه می‌‌شوید. کامپوننت‌‌هایی که با لایه‌‌هایی از providerها، consumerها، HOCها، render props و دیگر کامپوننت‌‌هایی که به تجرید کمک می‌‌کنند، احاطه شده‌‌اند. در حالی که ما می‌‌توانیم آن‌‌ها را در DevTools فیلتر کنیم، این [مشکل] به یک مسیله‌‌ی بنیادین اشاره دارد: ری‌‌اکت باید عناصری ابتدایی برای به اشتراک گذاری منطق دارای state فراهم کند.

+درباره این موضوع در صفحه [هوک‌های خودتان را بسازید](/docs/hooks-custom.html) بیشتر صحبت خواهیم کرد. -

با استفاده از هوک‌‌ها، شما می‌‌توانید بخش منطق دارای state را از یک کامپوننت استخراج کنید، بطوری که بطور مستقل بتواند مورد آزمایش و استفاده‌‌ی مجدد قرار گیرد. هوک ها به شما اجازه می‌‌دهند که بدون ایجاد تغییر در سلسله مراتب کامپوننت‌‌هایتان، از منطق دارای state مجددا استفاده نمایید. این کار باعث تسهیل در به اشتراک‌‌گذاری هوک‌‌ها بین کامپوننت‌‌های مختلف یا بین جامعه[ی ری‌‌اکت] می‌‌شود.

+### فهمیدن کامپوننت‌های پیچیده دشوار می‌شود {#complex-components-become-hard-to-understand} -

ما در این رابطه بیشتر در هوک مخصوص خود را بسازید بحث خواهیم کرد.

+ما معمولا مجبور به نگه‌‌داری از کامپوننت‌‌هایی بودیم که در اپتدا ساده بودند اما وقتی رشد کردند، منطق‌های دارای state و side effectهایی به آن‌ها اضافه شد که مدیریت آن‌ها را مشکل می‌کرد. در هر تابع lifecycle منطق‌هایی وجود دارد که با هم ارتباطی ندارند. برای مثال، یک کامپوننت ممکن است در `componentDidMount` و `componentDidUpdate` برای دریافت داده درخواست ارسال کند. درحالی‌‌که همان تابع می‌‌تواند دارای منطقی غیر مرتبط باشد که به اضافه کردن event listenerها می‌‌پردازد، و در متد `componentWillUnmount` آن‌‌ها [event listenerها] را پاکسازی (cleanup) می‌‌کند. کدهایی که متقابلا به هم مرتبط هستند [مثل اضافه و پاک‌‌سازی event listener] از یکدیگر جدا هستند، ولی کدهایی که کاملا غیر مرتبط‌‌اند [اضافه کردنevent listener و دریافت داده] در یک متد نوشته می‌‌شوند. که این احتمال خطا و باگ و بی‌ثباتی را بیشتر می‌‌کند. -

فهم کامپوننت‌‌های پیچیده دشوارتر می‌‌شود

+در بسیاری از موارد امکان این وجود ندارد که بتوانیم این کامپوننت‌‌ها را به اجزای کوچکتر تقسیم کنیم، زیرا منطق دارای state در همه جا وجود دارد. همچنین تست کردن آن‌‌ها دشوار است. این یکی از دلایلی است که بسیاری از افراد ترجیح می‌‌دهند تا ری‌‌اکت را با یک کتابخانه‌‌ی مدیریت state دیگری ترکیب کنند. اگرچه، معمولا باعث اضافه‌‌شدن مقدار زیادی abstraction می‌‌شود و شما را مجبور می‌‌کند بین تعداد زیادی از فایل‌‌ها جابه‌‌جا شوید که خود باعث مشکل‌‌تر شدن استفاده‌‌ی مجدد از کامپوننت‌‌ها می‌‌گردد. -

ما معمولا مجبور به نگه‌‌داری از کامپوننت‌‌هایی بودیم که در بدو شروع ساده بودند اما تبدیل به یک وضع آشفته‌‌ی غیرقابل مهار از منطق‌‌های دارای state و side effectها شدند. هر lifecycle متشکل از مخلوطی از منطق‌‌های غیر مرتبط است. برای مثال، یک کامپوننت ممکن است درcomponentDidMount و componentDidUpdate به دریافت داده بپردازد. درحالی‌‌که همان تابع می‌‌تواند دارای منطقی غیر مرتبط باشد که به اضافه کردن event listenerها می‌‌پردازد، و در متد componentWillUnmount آن‌‌ها [event listenerها] را پاکسازی (cleanup) می‌‌کند. کدهایی که متقابلا به هم مرتبط هستند [مثل اضافه و پاک‌‌سازی event listener] از یکدیگر جدا هستند، ولی کدهایی که کاملا غیر مرتبط‌‌اند [اضافه کردنevent listener و دریافت داده] در یک متد نوشته می‌‌شوند. که این احتمال خطا و باگ و ناسازگاری را بیشتر می‌‌کند.

+برای حل این مسیله، **هوک‌‌ها به شما اجازه می‌‌دهند یک کامپوننت را به توابع کوچکتری تقسیم کنید که مبنای آن ارتباط اجزایشان است (مثلا اضافه کردن یک subscription یا دریافت داده)**، نه تقسیم بر اساس متدهای lifecycle. همچنین می‌‌توانید برای مدیریت state محلی از یک reducer کمک بگیرید تا آن را بیشتر قابل پیش‌بینی کنید. -

در بسیاری از موارد امکان این وجود ندارد که بتوانیم این کامپوننت‌‌ها را به اجزای کوچکتر تقسیم کنیم، زیرا منطق دارای state در همه جا وجود دارد. همچنین تست کردن آن‌‌ها دشوار است. این یکی از دلایلی است که بسیاری از افراد ترجیح می‌‌دهند تا ری‌‌اکت را با یک کتابخانه‌‌ی مدیریت state دیگری ترکیب کنند. اگرچه، معمولا باعث اضافه‌‌شدن مقدار زیادی تجرید می‌‌شود و شما را مجبور می‌‌کند بین تعداد زیادی از فایل‌‌ها جابه‌‌جا شوید که خود باعث مشکل‌‌تر شدن استفاده‌‌ی مجدد از کامپوننت‌‌ها می‌‌گردد.

+در صفحه [استفاده از هوک effect](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns). بیشتر در این‌باره صحبت می‌کنیم. -

برای حل این مسیله، هوک‌‌ها به شما اجازه می‌‌دهند یک کامپوننت را به توابع کوچکتری تقسیم کنید که مبنای آن ارتباط اجزایشان است (مثلا اضافه کردن یک اشتراک (subscription) یا دریافت داده)، نه تقسیم بر اساس متدهای lifecycle. همچنین می‌‌توانید برای مدیریت state محلی از یک reducer کمک بگیرید تا بیشتر مطابق با پیش‌‌بینی شما باشد.

+### کلاس‌‌ها هم انسان و هم کامپیوتر را گیج می‌‌کنند {#classes-confuse-both-people-and-machines} -

در این باره در -استفاده از Effect Hookبیشتر بحث خواهیم کرد.

+علاوه‌بر اینکه کلاس‌ها استفاده مجدد کد‌ها و مدیریت آن‌ها را دچار مشکل می‌کنند، دریافتیم که آن‌ها می‌‌توانند مانع بزرگی در یادگیری ری‌‌اکت باشند. شما باید یادبگیرید که `this` چگونه در جاوااسکریپت کار می‌‌کند، که با کارکرد آن در بیشتر زبان‌‌ها بسیار متفاوت است. شما باید به یاد داشته باشید تا event handlerها را bind کنید. بدون [پلاگین پیشنهادی برای نوشتن propertyهای یک کلاس (هنوز پایدار نیست!)](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/)، کد بسیار طولانی خواهد بود. آدم‌‌ها می‌‌توانند props، state، و جریان بالا به پایین داده را کاملا دریابند درحالی‌که هنوز با کلاس‌‌ها کلنجار می‌روند. در مقایسه بین کامپوننت از جنس تابع یا کلاس و موارد استفاده از آن‌‌ها، حتی بین توسعه‌دهنده‌های با تجربه‌‌ی ری‌‌اکت هم اختلاف‌نظر وجود دارد. -

کلاس‌‌ها هم انسان و هم کامپیوتر را گیج می‌‌کنند

+بعلاوه، ری‌‌اکت ۵ سال است که عرضه شده است، و ما می‌‌خواهیم در ۵ سال آینده مطرح باشد. همانطور که [Svelte](https://svelte.technology/) ،[Angular](https://angular.io/)، [Glimmer](https://glimmerjs.com/) و دیگران نشان می‌‌دهند، [کامپایل پیش از موعد (ahead-of-time compilation)](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) کامپوننت‌‌ها، پتانسیل زیادی را دارد. مخصوصا اگر به templateها محدود نباشد. ما اخیرا با +[component folding](https://github.com/facebook/react/issues/7323) بوسیله‌‌ی [Prepack](https://prepack.io/)‌‌ ‌‌آزمایشاتی را انجام دادیم که شاهد نتایج سریع و امیدوارکننده‌ای بوده‌‌ایم. اگرچه دریافتیم که کامپوننت‌‌های برپایه کلاس می‌‌توانند ناخواسته باعث افزایش الگوهایی شوند که چنین بهینه‌‌سازی‌‌هایی را خراب می‌‌کنند. کلاس‌‌ها برای ابزارهای امروزی نیز مشکلاتی ایجاد می‌‌کنند. برای مثال، کلاس‌‌ها به خوبی minify نمی‌‌شوند، همچنین باعث می‌‌شوند تا hot reloading شکننده و نامطمئن شود. ما می‌‌خواهیم APIای را ارائه دهیم که به کد امکان بهینه‌‌سازی بیشتری بدهد. -

علاوه بر دشوار کردن قابلیت استفاده مجدد از کد و نظم آن، دریافتیم که کلاس‌‌ها می‌‌توانند مانع بزرگی در یادگیری ری‌‌اکت باشند. شما باید یادبگیرید که this چگونه در جاوااسکریپت کار می‌‌کند، که با نحوه‌‌ی کار کردش در اکثر زبان‌‌ها بسیار متفاوت است. شما باید به یاد داشته باشید تا event handlerها را bind کنید. بدون syntax proposals، کد بسیار طولانی خواهد بود. آدم‌‌ها می‌‌توانند props، state، و جریان بالا به پایین داده را کاملا دریابند ولی هنوز با کلاس‌‌ها کلنجار بروند. برتری کامپوننت از جنس تابع یا کلاس در ری‌‌اکت و موارد استفاده از آن‌‌ها باعث اختلاف نظر است، حتی در میان دولوپرهای با تجربه‌‌ی ری‌‌اکت.

+برای حل این مشکلات، **هوک‌‌ها به شما اجازه می‌‌دهند تا از بیشتر قابلیت‌‌های ری‌‌اکت بدون کلاس‌‌ها بهره ببرید.** از نظر مفهومی، همیشه کامپوننت‌‌های ری‌‌اکت بیشتر به توابع نزدیک‌‌ بوده‌‌اند. هوک‌‌ها بدون آنکه روح کاربردی ری‌‌اکت را فداکند، از توابع بهره می‌برند. استفاده از هوک‌ها ساده است و شما به یادگیری مهارت‌های پیچیده برنامه نویسی تابع‌گرا (functional) و واکنش‌گرا (reactive) ندارید. -

بعلاوه، ری‌‌اکت ۵ سال است که عرضه شده است، و ما می‌‌خواهیم در ۵ سال آینده مطرح باشد. همانطور که Svelte، Angular،Glimmerو دیگران نشان می‌‌دهند، کامپایل پیش از موعد کامپوننت‌‌ها، پتانسیل قابلیت‌‌های زیادی را دارد. بالاخص اگر به تمپلت‌‌ها مححدود نباشد. ما اخیرا با -component folding بوسیله‌‌ی Prepack‌‌ ‌‌آزمایشاتی را انجام دادیم که شاهد نتایج سریع و امیدوارکننده بوده‌‌ایم. اگرچه دریافتیم که کامپوننت‌‌های کلاسی می‌‌توانند ناخواسته باعث افزایش الگوهایی شوند که چنین بهینه‌‌سازی‌‌هایی را بدتر می‌‌کنند. کلاس‌‌ها برای ابزارهای امروزی نیز مشکلاتی ایجاد می‌‌کنند. برای مثال، کلاس‌‌ها به خوبی کم‌‌حجم(minify) نمی‌‌شوند، آن‌‌ها باعث می‌‌شوند تا hot reloading شکننده و نامطمئن شود. ما می‌‌خواهیم APIای را ارائه دهیم که به کد امکان بهینه‌‌سازی بیشتری بدهد.

+> مثال‌ها +> +> برای شروع یادگیری، [هوک‌ها در یک نگاه](/docs/hooks-overview.html) انتخاب مناسبی است. -

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

+## راهبرد پذیرش هوک‌ها به صورت تدریجی {#gradual-adoption-strategy} -
-

مثال‌‌ها

-

نگاه اجمالی به هوک‌‌ نقطه‌‌ی شروع مناسبی برای یادگیری Hookهاست.

-
+> کوتاه بگوییم: برنامه‌ای برای حذف کلاس‌ها از ری‌اکت نیست. -

استراتژی تطبیق تدریجی

+ما می‌‌دانیم که توسعه‌دهنده‌های ری‌‌اکت روی عرضه‌‌ی محصولات تمرکز دارند و وقتی برای مطالعه‌ هر API جدیدی که منتشر می‌‌شود را ندارند. هوک‌‌ها خیلی تازه هستند، و شاید برای یادگیری و بهره‌‌گیری از آن‌‌ها بهتر باشد تا برای مثال‌‌ها و آموزش‌‌های بیشتر صبر کنید. -
-

خلاصه: هیچ برنامه‌‌ای برای حذف کلاس ها از ری‌‌اکت وجود ندارد.

-
+ما همچنین اطلاع داریم که انتظارات برای اضافه کردن دستورات پایه‌‌ی جدید به ری‌‌اکت بسیار بالاست. ما برای خواننده‌‌های کنجکاو، [یک RFC با جزییات](https://github.com/reactjs/rfcs/pull/68) آماده کرده‌‌ایم که با عمق بیشتری به ایده‌ها می‌‌پردازد، و چشم‌انداز گسترده‌ای بر تصمیمات مشخصی در طراحی فعلی و پیشین فراهم می‌‌کند. -

ما می‌‌دانیم که دولوپرهای ری‌‌اکت بر روی عرضه‌‌ی محصولات تمرکز دارند و وقتی برای نگاه کردن و مطالعه‌‌ی هر API جدیدی را که منتشر می‌‌شود، ندارند. هوک‌‌ها بسیار جدید هستند، و شاید برای یادگیری و بهره‌‌گیری از آن‌‌ها بهتر باشد تا برای مثال‌‌ها و آموزش‌‌های بیشتر صبر کنید.

+**اساسا، هوک ها در کنار کدهای نوشته‌‌شده از قبل کار خواهند کرد، پس شما می‌‌توانید بصورت تدریجی از آن‌‌ها بهره گیرید.** عجله‌ای برای مهاجرت‌ به هوک‌ها نیست! ما پیشنهاد می‌کنیم که از بازنویسی‌های کلان کد خود، به خصوص کامپوننت‌هایی پیچیده‌ای که با کلاس نوشته شده‌اند. تفکر به شیوه هوک‌ها نیازمند کمی تغییر در شیوه تفکر است. بر اساس تجربه ما، بهتر است که استفاده از هوک‌ها را در کامپوننت‌های کم اهمیت تمرین کنید و مطمئن شوید که همه اعضای تیم با آن‌ها مشکلی ندارند. بعد از اینکه هوک‌ها را امتحان کردید، [بازخورد‌های خود را برای ما ارسال کنید](https://github.com/facebook/react/issues/new)، چه مثبت، چه منفی! -

همچنین اطلاع داریم که انتظارات برای اضافه کردن دستورات پایه‌‌ی جدید به ری‌‌اکت بسیار بالاست. ما برای خواننده‌‌های کنجکاو یک RFC با جزییات آماده کرده‌‌ایم که با عمق بیشتری به انگیزه‌‌ها می‌‌پردازد، و دید بیشتری بر تصصمیمات جزیی تصمیم‌‌گیری‌‌ها و تصمیمات مرتبط قبلی فراهم می‌‌کند.

+ما قصد داریم تمام موارد کاربرد کلاس‌ها رو برای هوک‌ها هم پیاده‌سازی کنیم، اما **ما برای آینده قابل پیش‌بینی‌ای از کامپوننت‌های نوشته‌شده با کلاس پشتیبانی می‌کنیم.** در فیس‌بوک ما ده‌ها هزار کامپوننت برپایه کلاس داریم و قطعا برنامه‌ای برای بازنویسی مجدد آن‌ها نداریم. درعوض، در کنار کلاس‌ها، استفاده از هوک‌ها را در کد‌های جدید شروع کرده‌ایم. -

اساسا، هوک ها در کنار کدهای نوشته‌‌شده از قبل کار خواهند کرد، پس شما می‌‌توانید بصورت تدریجی از آن‌‌ها بهره گیرید. ما این API آزمایشی را برای این به اشتراک می‌‌گذاریم تا بتوانیم از بازخوردهای سریع افراد در جامعه که برای شکل دادن به آینده‌‌ی ری‌‌اکت مشتاق هستند بهره گیریم. — and we will iterate on Hooks in the open.

+## سوالات متداول {#frequently-asked-questions} -

در انتها، هیچ عجله‌‌ای برای مهاجرت به هوک‌‌ها وجود ندارد. ما پیشنهاد می‌‌کنیم از هرگونه «بازنویسی بزرگ» بپرهیزید، مخصوصا برای کامپوننت‌‌های کلاسی موجود و پیچیده. برای «تفکر مبتنی بر هوک‌‌ها» مقداری نیازمند تامل است. تجربه‌‌ی ما این است که بهترین کار برای شروع، تمرین و کار با هوک‌‌ها در کامپوننت‌‌های جدید و غیرحیاتی است، و حصول اطمینان از اینکه همه‌‌ی افراد تیم شما با آن‌‌ها ارتباط برقرار کرده‌‌اند. بعد از اینکه هوک‌‌ها را امتحان کردید، لطفا بازخوردهای خود را برای ما بفرستید ، چه مثبت و چه منفی.

+ما یک صفحه [سوالات متداول هوک‌ها](/docs/hooks-faq.html) آماده کرده‌ایم که به بیشتر سوالات شما درباره هوک‌ها جواب می‌دهد. -

سوالات متداول

+## گام‌های بعدی {#next-steps} -

ما یک صفحه پرسش و پاسخ متداول از hookها فراهم کرده ایم که اکثر سوالات رایج در مورد هوک‌‌ها را پاسخ‌‌ می‌‌دهد.

\ No newline at end of file +در انتهای این صفحه، شما باید ایده‌ای کلی از این‌که هوک‌ها چه مشکلی را حل می‌کنند به دست آورده باشید، اما احتمالا هنوز جزییات برای شما واضح نیست. نگران نباشید! **حالا بیایید به [صفحه بعد](/docs/hooks-overview.html) برویم و یادگیری هوک‌ها رو با مثال شروع کنیم**. \ No newline at end of file From cdfce9635e98ed8ad63a39732e43e4fc2a2f683f Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Wed, 27 Feb 2019 18:52:27 +0330 Subject: [PATCH 5/5] Review into-hooks.md and fix some minor issues --- content/docs/hooks-intro.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 1c99bb0bc..319002b24 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -30,12 +30,14 @@ function Example() { در این صفحه ما درباره این‌که چرا هوک‌ها را به ری‌اکت اضافه کردیم و چگونه با استفاده از آن‌ها می توان برنامه‌های بسیار خوبی ساخت، صحبت می‌کنیم. **پس اگر می‌خواهید استفاده از هوک‌ها را یاد بگیرید، مستقیم به [صفحه بعد](/docs/hooks-overview.html) بروید.** > نکته +> > ری‌‌اکت ۱۶.۸.۰ اولین نسخه منتشر شده است که از هوک‌‌ها پشتیبانی می‌‌کند. هنگام ارتقاع، فراموش نکنید همه‌‌ی پکیج‌‌ها شامل React DOM را به‌روز رسانی نمایید. هوک‌ها به نسخه‌‌ی پایدار بعدی ری‌اکت نیتیو نیز اضافه خواهدشد. ## معرفی تصویری {#video-introduction} در کنفرانس ری‌اکت ۲۰۱۸، سوفی آلپرت (Sophie Alpert) و دن آبراموف (Dan Abramov) هوک‌ها را معرفی کردند. و در ادامه رایان فلورنس (Ryan Florence) نشان داد که چگونه می‌توان یک برنامه را بازنویسی کرد که از هوک‌ها استفاده کند. ویدیو آن را مشاهده کنید: - +
+
## بدون تغییرات مخرب {#no-breaking-changes} @@ -49,13 +51,13 @@ function Example() { هوک‌ها جایگزین برای دانش شما از مفاهیم ری‌اکت نخواهند شد. در عوض هوک‌ها یک رابط (API) مستقیم برای مفاهیم ری‌‌اکتی که از قبل می‌‌دانید مانند props، state، context، refs و چرخه حیات فراهم می‌‌کنند. همچنین بعدا نشان خواهیم داد که چگونه هوک‌‌ها روشی جدید و قدرتمند برای تلفیق آن‌‌ها ارائه می‌‌کنند. -اگر هم‌‌اکنون می‌‌خواهید یادگیری هوک‌‌ها را شروع کنید، [مستقیم به صفحه‌‌ی بعد بروید!](/docs/hooks-overview.html) البته می‌‌توانید مطالعه‌‌ این صفحه را ادامه دهید و با دلایلی که هوک‌‌ها را به ری‌‌اکت اضافه کردیم و اینکه چگونه بدون بازنویسی اپلیکیشن‌‌های قبلی از آن‌‌ها استفاده خواهیم کرد، آشنا شوید. +**اگر هم‌‌اکنون می‌‌خواهید یادگیری هوک‌‌ها را شروع کنید، [مستقیم به صفحه‌‌ی بعد بروید!](/docs/hooks-overview.html)** البته می‌‌توانید مطالعه‌‌ این صفحه را ادامه دهید و با دلایلی که هوک‌‌ها را به ری‌‌اکت اضافه کردیم و اینکه چگونه بدون بازنویسی اپلیکیشن‌‌های قبلی از آن‌‌ها استفاده خواهیم کرد، آشنا شوید. ## انگیزه هوک‌ها مشکلات مختلفی که ظاهرا به هم ارتباط ندارند را حل می‌کنند. مواردی که ما طی در نوشتن و نگهداری هزاران کامپوننت طی پنج سال با آن مواجه شده‌ایم. اگر درحال یادگیری ری‌اکت هستید، هروز از آن استفاده می‌کنید یا از کتابخانه مشابهی استفاده می‌کنید که بر پایه کامپوننت طراحی شده‌است، احتمالا به این مشکلات بر خورد کرده‌اید. -### استفاده از منطق وابسته به state میان کامپوننت چند کامپوننت دشوار است {#its-hard-to-reuse-stateful-logic-between-components} +### استفاده از منطق وابسته به state میان چند کامپوننت دشوار است {#its-hard-to-reuse-stateful-logic-between-components} ری‌‌اکت راهی برای «اضافه‌کردن» یک رفتار با قابلیت استفاده‌‌ی مجدد یه یک کامپوننت را فراهم نمی‌‌کند (برای مثال اتصال به یک store). اگر شما مدتی با ری‌‌اکت کار کرده باشید، ممکن است با الگوهایی مانند [render props](/docs/render-props.html) و [higher-order components](/docs/higher-order-components.html) آشنا شده‌باشید که سعی کرده‌اند حل این مسئله را حل کنند. اما این الگوها شما را مجبور به طراحی مججد ساختار کامپوننت، هنگام استفاده‌‌ از آن‌‌ها می‌‌کنند، که این مسئله فهم کد را دشوارتر می‌کند. اگر به یک اپلیکیشن ری‌‌اکت معمول در React DevTools نگاه کنید، احتمالا با جهنمی از کامپوننت‌های تودرتو (wrapper hell) مواجه می‌شوید. کامپوننت‌هایی که توسط لایه‌های provider، consumer، higher-order component، render props و دیگر لایه‌هایی برای ایحاد abstraction احاطه شده‌اند. اگرچه ما [می‌توانستیم آن‌ها را هنگام نمایش فیلتر کنیم](https://github.com/facebook/react-devtools/pull/503)، این موضوع به مشکلی ریشه‌ای اشاره می‌کند: ری‌اکت نیازمند زیرساخت بهتری برای اشتراک منطق‌های وابسته به state میان کامپوننت‌ها است. @@ -65,7 +67,7 @@ function Example() { ### فهمیدن کامپوننت‌های پیچیده دشوار می‌شود {#complex-components-become-hard-to-understand} -ما معمولا مجبور به نگه‌‌داری از کامپوننت‌‌هایی بودیم که در اپتدا ساده بودند اما وقتی رشد کردند، منطق‌های دارای state و side effectهایی به آن‌ها اضافه شد که مدیریت آن‌ها را مشکل می‌کرد. در هر تابع lifecycle منطق‌هایی وجود دارد که با هم ارتباطی ندارند. برای مثال، یک کامپوننت ممکن است در `componentDidMount` و `componentDidUpdate` برای دریافت داده درخواست ارسال کند. درحالی‌‌که همان تابع می‌‌تواند دارای منطقی غیر مرتبط باشد که به اضافه کردن event listenerها می‌‌پردازد، و در متد `componentWillUnmount` آن‌‌ها [event listenerها] را پاکسازی (cleanup) می‌‌کند. کدهایی که متقابلا به هم مرتبط هستند [مثل اضافه و پاک‌‌سازی event listener] از یکدیگر جدا هستند، ولی کدهایی که کاملا غیر مرتبط‌‌اند [اضافه کردنevent listener و دریافت داده] در یک متد نوشته می‌‌شوند. که این احتمال خطا و باگ و بی‌ثباتی را بیشتر می‌‌کند. +ما معمولا مجبور به نگه‌‌داری از کامپوننت‌‌هایی بودیم که در اپتدا ساده بودند اما وقتی رشد کردند، منطق‌های دارای state و side effectهایی به آن‌ها اضافه شد که مدیریت آن‌ها را مشکل می‌کرد. در هر تابع lifecycle منطق‌هایی وجود دارد که با هم ارتباطی ندارند. برای مثال، یک کامپوننت ممکن است در `componentDidMount` و `componentDidUpdate` برای دریافت داده درخواست ارسال کند. درحالی‌‌که همان تابع `componentDidMount` می‌‌تواند دارای منطقی غیر مرتبط باشد که به اضافه کردن event listenerها می‌‌پردازد، و در متد `componentWillUnmount` آن‌‌ها [event listenerها] را پاکسازی (cleanup) می‌‌کند. کدهایی که متقابلا به هم مرتبط هستند [مثل اضافه و پاک‌‌سازی event listener] از یکدیگر جدا هستند، ولی کدهایی که کاملا غیر مرتبط‌‌اند [اضافه کردنevent listener و دریافت داده] در یک متد نوشته می‌‌شوند. که این احتمال خطا و باگ و بی‌ثباتی را بیشتر می‌‌کند. در بسیاری از موارد امکان این وجود ندارد که بتوانیم این کامپوننت‌‌ها را به اجزای کوچکتر تقسیم کنیم، زیرا منطق دارای state در همه جا وجود دارد. همچنین تست کردن آن‌‌ها دشوار است. این یکی از دلایلی است که بسیاری از افراد ترجیح می‌‌دهند تا ری‌‌اکت را با یک کتابخانه‌‌ی مدیریت state دیگری ترکیب کنند. اگرچه، معمولا باعث اضافه‌‌شدن مقدار زیادی abstraction می‌‌شود و شما را مجبور می‌‌کند بین تعداد زیادی از فایل‌‌ها جابه‌‌جا شوید که خود باعث مشکل‌‌تر شدن استفاده‌‌ی مجدد از کامپوننت‌‌ها می‌‌گردد. @@ -75,9 +77,9 @@ function Example() { ### کلاس‌‌ها هم انسان و هم کامپیوتر را گیج می‌‌کنند {#classes-confuse-both-people-and-machines} -علاوه‌بر اینکه کلاس‌ها استفاده مجدد کد‌ها و مدیریت آن‌ها را دچار مشکل می‌کنند، دریافتیم که آن‌ها می‌‌توانند مانع بزرگی در یادگیری ری‌‌اکت باشند. شما باید یادبگیرید که `this` چگونه در جاوااسکریپت کار می‌‌کند، که با کارکرد آن در بیشتر زبان‌‌ها بسیار متفاوت است. شما باید به یاد داشته باشید تا event handlerها را bind کنید. بدون [پلاگین پیشنهادی برای نوشتن propertyهای یک کلاس (هنوز پایدار نیست!)](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/)، کد بسیار طولانی خواهد بود. آدم‌‌ها می‌‌توانند props، state، و جریان بالا به پایین داده را کاملا دریابند درحالی‌که هنوز با کلاس‌‌ها کلنجار می‌روند. در مقایسه بین کامپوننت از جنس تابع یا کلاس و موارد استفاده از آن‌‌ها، حتی بین توسعه‌دهنده‌های با تجربه‌‌ی ری‌‌اکت هم اختلاف‌نظر وجود دارد. +علاوه‌بر اینکه کلاس‌ها استفاده مجدد کد‌ها و مدیریت آن‌ها را دچار مشکل می‌کنند، دریافتیم که آن‌ها می‌‌توانند مانع بزرگی در یادگیری ری‌‌اکت باشند. شما باید یادبگیرید که `this` چگونه در جاوااسکریپت کار می‌‌کند، که با کارکرد آن در بیشتر زبان‌‌ها بسیار متفاوت است. شما باید به یاد داشته باشید تا event handlerها را bind کنید. بدون [پلاگین پیشنهاد برای نوشتن propertyهای یک کلاس (هنوز پایدار نیست!)](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/)، کد بسیار طولانی خواهد بود. آدم‌‌ها می‌‌توانند props، state، و جریان بالا به پایین داده را کاملا دریابند درحالی‌که هنوز با کلاس‌‌ها کلنجار می‌روند. در مقایسه بین کامپوننت از جنس تابع یا کلاس و موارد استفاده از آن‌‌ها، حتی بین توسعه‌دهنده‌های با تجربه‌‌ی ری‌‌اکت هم اختلاف‌نظر وجود دارد. -بعلاوه، ری‌‌اکت ۵ سال است که عرضه شده است، و ما می‌‌خواهیم در ۵ سال آینده مطرح باشد. همانطور که [Svelte](https://svelte.technology/) ،[Angular](https://angular.io/)، [Glimmer](https://glimmerjs.com/) و دیگران نشان می‌‌دهند، [کامپایل پیش از موعد (ahead-of-time compilation)](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) کامپوننت‌‌ها، پتانسیل زیادی را دارد. مخصوصا اگر به templateها محدود نباشد. ما اخیرا با +افزون بر این، ری‌‌اکت ۵ سال است که عرضه شده است، و ما می‌‌خواهیم در ۵ سال آینده هم مطرح باشد. همانطور که [Svelte](https://svelte.technology/) ،[Angular](https://angular.io/)، [Glimmer](https://glimmerjs.com/) و دیگران نشان می‌‌دهند، [کامپایل پیش از موعد (ahead-of-time compilation)](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) کامپوننت‌‌ها، پتانسیل زیادی را دارد. مخصوصا اگر به templateها محدود نباشد. ما اخیرا با [component folding](https://github.com/facebook/react/issues/7323) بوسیله‌‌ی [Prepack](https://prepack.io/)‌‌ ‌‌آزمایشاتی را انجام دادیم که شاهد نتایج سریع و امیدوارکننده‌ای بوده‌‌ایم. اگرچه دریافتیم که کامپوننت‌‌های برپایه کلاس می‌‌توانند ناخواسته باعث افزایش الگوهایی شوند که چنین بهینه‌‌سازی‌‌هایی را خراب می‌‌کنند. کلاس‌‌ها برای ابزارهای امروزی نیز مشکلاتی ایجاد می‌‌کنند. برای مثال، کلاس‌‌ها به خوبی minify نمی‌‌شوند، همچنین باعث می‌‌شوند تا hot reloading شکننده و نامطمئن شود. ما می‌‌خواهیم APIای را ارائه دهیم که به کد امکان بهینه‌‌سازی بیشتری بدهد. برای حل این مشکلات، **هوک‌‌ها به شما اجازه می‌‌دهند تا از بیشتر قابلیت‌‌های ری‌‌اکت بدون کلاس‌‌ها بهره ببرید.** از نظر مفهومی، همیشه کامپوننت‌‌های ری‌‌اکت بیشتر به توابع نزدیک‌‌ بوده‌‌اند. هوک‌‌ها بدون آنکه روح کاربردی ری‌‌اکت را فداکند، از توابع بهره می‌برند. استفاده از هوک‌ها ساده است و شما به یادگیری مهارت‌های پیچیده برنامه نویسی تابع‌گرا (functional) و واکنش‌گرا (reactive) ندارید. @@ -94,7 +96,7 @@ function Example() { ما همچنین اطلاع داریم که انتظارات برای اضافه کردن دستورات پایه‌‌ی جدید به ری‌‌اکت بسیار بالاست. ما برای خواننده‌‌های کنجکاو، [یک RFC با جزییات](https://github.com/reactjs/rfcs/pull/68) آماده کرده‌‌ایم که با عمق بیشتری به ایده‌ها می‌‌پردازد، و چشم‌انداز گسترده‌ای بر تصمیمات مشخصی در طراحی فعلی و پیشین فراهم می‌‌کند. -**اساسا، هوک ها در کنار کدهای نوشته‌‌شده از قبل کار خواهند کرد، پس شما می‌‌توانید بصورت تدریجی از آن‌‌ها بهره گیرید.** عجله‌ای برای مهاجرت‌ به هوک‌ها نیست! ما پیشنهاد می‌کنیم که از بازنویسی‌های کلان کد خود، به خصوص کامپوننت‌هایی پیچیده‌ای که با کلاس نوشته شده‌اند. تفکر به شیوه هوک‌ها نیازمند کمی تغییر در شیوه تفکر است. بر اساس تجربه ما، بهتر است که استفاده از هوک‌ها را در کامپوننت‌های کم اهمیت تمرین کنید و مطمئن شوید که همه اعضای تیم با آن‌ها مشکلی ندارند. بعد از اینکه هوک‌ها را امتحان کردید، [بازخورد‌های خود را برای ما ارسال کنید](https://github.com/facebook/react/issues/new)، چه مثبت، چه منفی! +**اساسا، هوک ها در کنار کدهای نوشته‌‌شده از قبل کار خواهند کرد، پس شما می‌‌توانید به‌صورت تدریجی از آن‌‌ها بهره گیرید.** عجله‌ای برای مهاجرت‌ به هوک‌ها نیست! ما پیشنهاد می‌کنیم که از بازنویسی‌های کلان کد خود، به خصوص کامپوننت‌هایی پیچیده‌ای که با کلاس نوشته شده‌اند. تفکر به شیوه هوک‌ها نیازمند کمی تغییر در شیوه تفکر است. بر اساس تجربه ما، بهتر است که استفاده از هوک‌ها را در کامپوننت‌های کم اهمیت تمرین کنید و مطمئن شوید که همه اعضای تیم با آن‌ها مشکلی ندارند. بعد از اینکه هوک‌ها را امتحان کردید، [بازخورد‌های خود را برای ما ارسال کنید](https://github.com/facebook/react/issues/new)، چه مثبت، چه منفی! ما قصد داریم تمام موارد کاربرد کلاس‌ها رو برای هوک‌ها هم پیاده‌سازی کنیم، اما **ما برای آینده قابل پیش‌بینی‌ای از کامپوننت‌های نوشته‌شده با کلاس پشتیبانی می‌کنیم.** در فیس‌بوک ما ده‌ها هزار کامپوننت برپایه کلاس داریم و قطعا برنامه‌ای برای بازنویسی مجدد آن‌ها نداریم. درعوض، در کنار کلاس‌ها، استفاده از هوک‌ها را در کد‌های جدید شروع کرده‌ایم.