API سطح بالای React

React نقطۀ ورود به کتابخانۀ ری‌اکت است. اگر شما React را از یک تگ <script> لود کنید، این API های سطح‌ بالا در React سراسری وجود خواهند داشت. اگر شما از ES6 با npm استفاده می‌کنید، می‌توانید بنویسید: import React from ‘react’. اگر از ES5 استفاده می‌کنید می‌توانید بنویسید: var React = require(‘react’).

بررسی اجمالی

کامپوننت‌ها

کامپوننت‌های React به شما اجازه می‌دهد رابط کاربری را به قطعات مستقل و قابل استفادۀ مجددی تقسیم کنید و روی هر قطعه به طور مستقل تفکر کنید. کامپوننت‌های React می‌توانند توسط React.Component یا React.PureComponent ساخته شوند.

  • Component
  • PureComponent

اگر از class های ES6 استفاده نمی‌کنید، می‌توانید از ماژول create-react-class برای ساخت کامپوننت استفاده کنید. جهت اطلاعات بیشتر بخش React بدون ES6 را ببینید.

همچنین کامپوننت‌های React می‌توانند به صورت توابعی که می‌تواند بسته بندی شود ساخته شود.

  • memo

ساخت المان‌های React

ما توصیه کردیم که از JSX برای توصیف این که رابط کاربری شما چه شکلی داشته باشد استفاده کنید. هر JSX مانند یک syntactic sugar برای فراخوانی React.createElement() است. به طور معمول اگر شما از JSX استفاده می‌کنید، متدهای زیر را فراخوانی نخواهید کرد.

  • createElement()
  • createFactory ()

جهت اطلاعات بیشتر بخش React بدون JSX را ببینید.

تبدیل المان‌ها

ری اکت API های مختلفی را برای دستکاری کردن المان‌ها فراهم کرده است:

  • cloneElement()
  • isValidElement()
  • Children

قطعه‌ها

همچنین React یک کامپوننت برای رندر کردن چند المان بدون یک بسته بندی کننده فراهم کرده است.

  • Fragment

Refها

  • createRef
  • forwardRef

مرجع

React.Component

هنگامی که کامپوننت‌های React با استفاده از class های ES6 تعریف می‌شوند، React.Component برای آنها class پایه است:

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

در بخش مراجع React.Component یک لیست از متدها و مشخصات مرتبط با class پایۀ React.Component آورده شده است.

React.PureComponent

React.PureComponent شبیه به React.Component است با این تفاوت که React.Component نمی‌تواند shouldComponentUpdate() را پیاده سازی کند، اما React.PureComponent با یک مقایسۀ سطحی prop و state می‌تواند این کار را انجام دهد.

اگر کامپوننت تابع render() شما نتایج یکسانی با prop و state مشابه را رندر می‌کند، استفاده از React.PureComponent می‌تواند در برخی موارد به عملکرد برنامه سرعت ببخشد.

نکته: shouldComponentUpdate() مربوط به React.PureComponent فقط به طور سطحی آبجکت‌ها را مقایسه می‌کند. اگر ساختار دیتای پیچیده‌ای داشته باشید ممکن است نتایج اشتباه بدهد. اگر انتظار می‌رود propها و state ساده داشته باشید از PureComponent استفاده کنید و اگر می‌دانید ساختار عمیق دیتا تغییر کرده است از forceUpdate() استفاده کنید. و یا اینکه از آبجکت‌های تغییرناپذیر جهت تسهیل مقایسه‌های دیتای مربوط به سطوح داخلی‌تر استفاده کنید.

به علاوه، shouldComponentUpdate() مربوط به React.PureComponent آپدیت‌های propها را برای کل زیردرخت کامپوننت رد می‌کند. مطمئن شوید تمام کامپوننت‌های children نیز pure هستند.

React.memo

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

React.memo یک کامپوننت مرتبۀ بالاتر است و مشابه React.PureComponent است اما به جای کامپوننت‌های class، برای کامپوننت‌های تابعی می‌باشد.

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

به طور پیش‌فرض React.memo به طور سطحی آبجکت‌های پیچیدۀ درون props object را مقایسه می‌کند. اگر می‌خواهید روی مقایسه کنترل داشته باشید، می‌توانید یک تابع مقایسۀ دلخواه خود به عنوان آرگومان دوم فراهم کنید.

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

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

نکته: بر خلاف متد shouldComponentUpdate() روی کامپوننت‌های class، تابع areEqual در صورتی true را برمی‌گرداند که propها برابر باشند و در صورتی false را برمی‌گرداند که propها برابر نباشند. این برعکس shouldComponentUpdate است.

createElement()

React.createElement(
  type,
  [props],
  [...children]
)

یک المان React جدید را ساخته و برمی‌گرداند. نوع آرگومان می‌تواند یک رشتۀ تگ نام باشد (مانند div یا span)، یک نوع کامپوننت ری اکت باشد (یک تابع یا یک class) و یا یک نوع قطعۀ ری اکت.

کد نوشته شده با JSX تبدیل می‌شود تا از React.createElement() استفاده کند. به طور معمول اگر شما از JSX استفاده می‌کنید، React.createElement() را به طور مستقیم فراخوانی نخواهید کرد. جهت اطلاعات بیشتر بخش React بدون JSX را ببینید.

cloneElement()

React.cloneElement(
  element,
  [props],
  [...children]
)

یک المان جدید React را با استفاده از element به عنوان نقطۀ شروع، شبیه سازی کرده و برمی‌گرداند. المان حاصل شده prop های المان اصلی را داشته و prop های جدید ادغام می‌شوند. Children جدید نیز جایگزین Children قبلی می‌شود. Key و ref المان اصلی هم حفظ خواهند شد.

React.cloneElement() تقریبا برابر است با:

<element.type {...element.props} {...props}>{children}</element.type>

با این تفاوت که ref ها را نیز حفظ می‌کند. این یعنی اگر شما یک child با یک ref همراه آن را بگیرید، آن را از والدش نمی‌دزدید. شما همان ref را به صورت متصل المان جدید خود خواهید داشت.

این API به عنوان جایگزینی از React.addons.cloneWithProps() که منسوخ شده است، معرفی شد.

createFactory()

React.createFactory(type)

یک تابع که المان React تولید می‌کند را ساخته و برمی‌گرداند. مانند React.createElement()، نوع آرگومان می‌تواند یک رشتۀ تگ نام باشد (مانند div یا span)، یک نوع کامپوننت ری اکت باشد (یک تابع یا یک class) و یا یک نوع قطعۀ ری اکت.

کمک کننده میراث است و ما شما را ترغیب می‌کنیم که به جایش از JSX یا React.createElement() به طور مستقیم استفاده کنید. به طور معمول اگر شما از JSX استفاده می‌کنید، React.createFactory() را به طور مستقیم فراخوانی نخواهید کرد. جهت اطلاعات بیشتر بخش React بدون JSX را ببینید.

isValidElement()

React.isValidElement(object)

تایید می‌کند که آبجکت یک المان React است و چیزی که برمی‌گرداند true یا false خواهد بود.

React.Children

خدماتی برای کنار آمدن با ساختار دیتای مبهم this.props.children فراهم می‌کند.

React.Children.map

React.Children.map(children, function[(thisArg)])

هر بار که child درون children به همراه this تنظیم شده به صورت thisArg قرار گیرد، یک تابع را فراخوانی می‌کند. اگر children یک آرایه باشد، معکوس خواهد شد و تابع برای هر child درون آرایه فراخوانی خواهد شد. اگر children به صورت null یا undefined باشد نیز این متد null یا undefined را به جای یک آرایه برمی‌گرداند.

نکته: اگر children یک قطعه (Fragment) باشد، به عنوان یک child تک با آن رفتار خواهد شد و معکوس نمی‌گردد.

React.Children.forEach

React.Children.forEach(children, function[(thisArg)])

مانند React.Children.map() است اما یک آرایه را برنمی‌گرداند.

React.Children.count

React.Children.count(children)

تعداد کل کامپوننت‌های داخل children را برمی‌گرداند، که برابر است با تعداد دفعاتی که یک فراخوان منتقل شده به یک map یا forEach فراخوانی می‌شود.

React.Children.only

React.Children.only(children)

تایید می‌کند که children فقط یک child دارد (یک المان React) و آن را برمی‌گرداند. در غیر این صورت این متد ارور خواهد داد.

نکته: React.Children.only() مقدار برگردانده شدۀ React.Children.map() را نمی‌پذیرد، زیرا یک آرایه است نه یک المان React.

React.Children.toArray

React.Children.toArray(children)

ساختار دیتای مبهم children را به عنوان یک آرایۀ مسطح با کلیدهایی اختصاص داده شده به هر child برمی‌گرداند. اگر بخواهید مجموعه‌های children موجود در متدهای رندر خود را دستکاری کنید، بسیار کارآمد خواهد بود، مخصوصا اگر بخواهید this.props.children را قبل از ارسال به قسمت‌های پایین‌تر چند قسمت کنید و یا ترتیب آن را تغییر دهید.

نکته: React.Children.toArray() کلیدها را تغییر می‌دهد تا هنگام مسطح کردن لیست‌های children، معنای آرایه‌ها را حفظ کند.

React.Fragment

کامپوننت React.Fragment به شما اجازه می‌دهد چندین المان در یک متد رندر را بدون ایجاد یک المان DOM اضافی، برگردانید:

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

همچنین شما می‌توانید از مختصرنویسی سینتکس <></> استفاده کنید.

React.createRef

یک ref می‌سازد که می‌تواند به المان‌های React متصل شود.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}

React.forwardRef

یک کامپوننت React می‌سازد که ref attribute دریافتی را به کامپوننت دیگری در قسمت پایین‌تری از درخت منتقل می‌کند. این تکنیک چندان رایج نیست ولی در دو سناریوی زیر می‌تواند خیلی کارآمد باشد:

  • انتقال ref ها به کامپوننت‌های DOM
  • انتقال ref ها به کامپوننت‌های مرتبۀ بالاتر

React.forwardRef یک تابع رندر را به عنوان یک آرگومان می‌پذیرد. React این تابع را با props و ref به عنوان دو آرگومان، فراخوانی خواهد کرد. این تابع باید یک node برگرداند.

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

در مثال بالا، React یک ref داده شده به المان <FancyButton ref={ref}> را به عنوان آرگومان دوم به تابع رندر درون فراخوانی React.forwardRef منتقل می‌کند. این تابع رندر، ref را به المان <button ref={ref}> منتقل می‌کند.

در نتیجه، بعد از اینکه ری اکت ref را متصل کرد، ref.current به طور مستقیم به المان شیء <button> اشاره خواهد کرد.

جهت اطلاعات بیشتر، بخش انتقال ref ها را ببینید.

React.lazy

React.lazy () به شما این امکان را می‌دهد که یک کامپوننت که به طور دینامیکی لود شده است را تعریف کنید. این کار به کاهش حجم bundle کمک می‌کند و لود شدن کامپوننت هایی که حین رندر اولیه استفاده نمی‌شوند را به تعویق می‌اندازد.

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

// This component is loaded dynamically
const SomeComponent = React.lazy(() => import('./SomeComponent'));

دقت کنید که جهت رندر شدن کامپوننت های lazy نیاز است یک کامپوننت <React.Suspense> در قسمت بالاتر درخت رندر وجود داشته باشد.

React.Suspense

React.Suspense به شما این امکان را می‌دهد که شاخص بارگذاری (لودینگ) را در مواردی که کامپوننت های موجود در قسمت پایین تر درخت هنوز آمادۀ رندر نیستند، مشخص کنید. در حال حاضر، لود کردن کامپوننت های lazy تنها حالتی است که توسط <React.Suspense> پشتیبانی می‌شود:

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Displays <Spinner> until OtherComponent loads
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

این موضوع در راهنمای تقسیم کد ما مستند شده است. دقت کنید که کامپوننت های lazy می‌توانند خیلی در سطوح پایین درخت Suspense باشند. لازم نیست که هر کدام از آنها بسته بندی شوند. بهترین راه تمرین کردن این مسئله، قرار دادن <Suspense> در جایی است که می‌خواهید یک شاخص بارگذاری را ببینید و استفاده از lazy() در هر جایی که می‌خواهید تقسیم کد را انجام دهید.

در آینده قصد داریم به Suspense اجازه دهیم موارد بیشتری را مدیریت کنید، مانند گرفتن اطلاعات (data fetching). می‌توانید در مورد این موضوع در roadmap ما بیشتر بدانید.

نکته: React.lazy() و <React.Suspense> هنوز توسط ReactDOMServer پشتیبانی نمی‌شوند. این محدودیت در آینده برطرف خواهد شد.

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5٫00 out of 5)
Loading...
counter customizable free hit