استفاده از سه نقطه در تگ کامپوننت های React چه کاری انجام می‌دهد؟

در کد React که شامل JSX است، عملگر ... به عنوان نشانگر گسترش (Spread Operator) شناخته می‌شود، که در ES2015 معرفی و در ES2018 به‌روز شد. این عملگر به ما امکان می‌دهد تا ویژگی‌ها و مقادیر موجود در اشیاء را به راحتی گسترش دهیم و به عنوان پروپرتی‌ها در یک کامپوننت مورد استفاده قرار دهیم.

به عنوان مثال، اگر کد زیر را داشته باشیم:

      <Modal {...this.props} title='Modal heading' animation={false} />

    

این کد به طور داینامیک تمام ویژگی‌های قابل شمارش و خاص (own enumerable properties) موجود در this.props را به عنوان ویژگی‌های مجزا به کامپوننت Modal اضافه می‌کند. به طور ساده‌تر، اگر this.props شامل مقادیری به شکل زیر باشد:

      { a: 1, b: 2 }

    

آن‌گاه کد فوق معادل خواهد بود با:

      <Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false} />

    

این ویژگی تمام ویژگی‌های دیگر را نیز که در this.props وجود دارد، شامل می‌شود و این موضوع برای children نیز صدق می‌کند. به همین دلیل اگر بخواهید عناصری را به کامپوننت Modal اضافه کنید، می‌توانید آن‌ها را بین تگ‌های باز و بسته قرار دهید و این عناصر به ویژگی children منتقل می‌شوند.

استفاده از عملگر گسترش‌دهنده (spread operator) به خصوص در مواردی که نیاز به بروزرسانی وضعیت (state) وجود دارد، بسیار مفید است. برای مثال، در هنگام تنظیم وضعیت جدید، می‌توان از این عملگر برای ایجاد یک شیء جدید با تمام ویژگی‌های یک شیء موجود استفاده کرد بدون اینکه آن شیء را مستقیماً تغییر دهید:

      this.setState(prevState => {
    return { foo: { ...prevState.foo, a: 'updated' } };
});

    

عملگر گسترش همچنین در ایجاد آرایه‌ها بسیار کارآمد است، به عنوان مثال میتوان به موارد زیر اشاره کرد:

      var shooterGames = ['Call of Duty', 'Far Cry'];
var racingGames = ['Need For Speed', 'Gran Turismo'];
var allGames = [...shooterGames, ...racingGames];

    

در اینجا، عملگر ... به ما امکان می‌دهد که آرایه‌ها را به سادگی ترکیب کنیم.

در نهایت، این نوع استفاده از ...، به دلیل قابلیت‌های متنوع آن، می‌تواند در زمان کاهش کد و افزایش خوانایی آن بسیار موثر باشد. همچنین، با استفاده از این عملگر، می‌توان به سادگی ویژگی‌های بسیاری از اشیاء در یک کامپوننت را به آن پاس داد، که به ویژه زمانی که با داده‌های JSON بزرگ سروکار داریم، بسیار کاربردی است.