در این مقاله قصد داریم تا بررسی کنیم که چگونه میتوانیم بدون بازنویسی هیچ کدی و با استفاده از کتابخانه react-codemod
، برنامه React خود را به آخرین نسخه موجود، یعنی نسخه ۱۹ React ارتقا دهیم.
react-codemod
کتابخانهای است که برای خودکارسازی فرآیند ارتقا یک برنامه React به آخرین نسخه، و بازسازی پایگاه کد برای پشتیبانی از design patternهای جدید طراحی شده است.
react-codemod
مجموعهای از اسکریپتها است که الگوهای خاصی را در یک پایگاه کد شناسایی کرده و با کدهای بهروز شده جایگزین میکند. این کتابخانه یک ابزار ضروری برای بازسازی و ارتقا در مقیاس بزرگ بدون نیاز به ویرایش دستی هر فایلی میباشد.
قبل از اینکه پایگاه کد React موجود خود را به جدیدترین APIها و design patternها بهروزرسانی کنیم، ابتدا باید نسخه React پروژه خود را ارتقا دهیم. با اجرای دستور زیر میتوانیم این کار را انجام دهیم:
npm install --save react@latest
در مرحله بعد، باید دایرکتوری پروژه را به عنوان یک Git repository مقداردهی اولیه کنیم، زیرا react-codemod
برای این که به درستی کار کند به یک commit Git نیاز دارد. برای انجام این کار، دستور زیر را اجرا میکنیم:
git init
کتابخانه react-codemod
را نصب میکنیم، که ما را قادر میسازد تا مجموعهای از دستورات را اجرا نماییم که بهطور خودکار پایگاه کد ما را به آخرین APIها و design patternهای React بهروزرسانی کند. برای نصب کتابخانه react-codemod
دستور زیر را اجرا میکنیم:
npm i react-codemod
اکنون، میتوانیم بهروزرسانی پایگاه کد خود را شروع کنیم تا با جدیدترین APIها و design patternهای React هماهنگ شود، بدون اینکه نیاز باشد آنها را به صورت دستی تغییر دهیم. مراحل زیر نشان میدهند که چگونه باید پایگاه کد React موجود خود را با استفاده از دستورات react-codemod
به APIها و design patternهای React 19 ارتقا دهیم.
تبدیل کد createElement
به JSX یک گام مهم در مدرنسازی پایگاه کد React به حساب میآید. JSX روشی بصری، خوانا و قابل نگهداری برای نوشتن کامپوننتهای React در مقایسه با createElement
ارائه میدهد.
کد زیر را به عنوان مثالی در نظر میگیریم. این کد از createElement
برای ایجاد المنتهای React استفاده میکند:
const element = React.createElement( 'div', { className: 'container' }, React.createElement('h1', null, 'Hello, world!'), React.createElement('p', null, 'This is a React application.') );
برای تبدیل کد createElement
بالا به کد JSX معادل آن، ابتدا باید یک Git commit را اجرا کنیم و سپس دستور react-codemod
را برای create-element-to-jsx
با استفاده از دستورات زیر اجرا نماییم:
git add . git commit -m "Commit message" npx react-codemod create-element-to-jsx src/
پس از اجرای دستور بالا، با این سوال Which dialect of JavaScript do you use?
مواجه میشویم که باید گزینه مورد نظر خود را انتخاب کنیم.
پس از آن، با بررسی پایگاه کد خود متوجه میشویم که تمام نمونههای createElement
به نسخههای JSX مربوطه بهروزرسانی شدهاند. به عنوان مثال، کد createElement
بالا به کد JSX زیر تبدیل میشود:
const element = ( <div className="container"> <h1>Hello, world!</h1> <p>This is a React application.</p> </div> );
در کلاس کامپوننتها، استفاده از arrow functionها یک رویکرد مختصر و مدرن ارائه میکند که نیاز به اتصالات صریح را از بین میبرد. با استفاده از react-codemod
میتوانیم به راحتی همه توابع binding در پایگاه کد خود را بدون نیاز به بازنویسی کل کامپوننت به arrow functionها تبدیل کنیم.
در ادامه کامپوننت زیر را بررسی میکنیم که چگونه میتوانیم آن را به arrow functionها تبدیل نماییم.
class MyComponent extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Button clicked!'); } render() { return <button onClick={this.handleClick}>Click me</button>; } }
برای تبدیل توابع binding در کامپوننت بالا به arrow functionها، دستورات زیر را در ترمینال اجرا میکنیم:
git add . git commit -m "Commit message" npx react-codemod manual-bind-to-arrow src/
در این مرحله نیز با این سوال Which dialect of JavaScript do you use?
مواجه میشویم که باید گزینه مورد نظر خود را انتخاب کنیم.
پس از موفقیت آمیز بودن دستور بالا، همانطور که در کد زیر مشاهده میکنیم توابع binding به arrow functionها تبدیل میشوند:
class MyComponent extends React.Component { handleClick = () => { console.log('Button clicked!'); }; render() { return <button onClick={this.handleClick}>Click me</button>; } }
با شروع نسخه React 19، PropTypes
از پکیج React حذف شده و با prop-types
جایگزین میشود. این بدان معنی است که اگر از PropTypes
در پایگاه کد خود استفاده میکنیم، باید آن را بهروزرسانی نماییم و به جای آن از prop-types
استفاده کنیم.
در ادامه کد زیر را از PropTypes
به prop-types
تبدیل کرده و دستور import مناسب را اضافه کنیم:
import React from 'react'; class MyComponent extends React.Component { render() { return <div>{this.props.name}</div>; } } MyComponent.propTypes = { name: React.PropTypes.string.isRequired, };
میتوانیم کد PropTypes
را با اجرای دستور react-codemod
زیر به prop-types
تبدیل نماییم:
git add . git commit -m "Commit message" npx react-codemod manual-bind-to-arrow src/
پس از اجرای دستور بالا، پایگاه کد ما به طور خودکار برای استفاده از prop-types
بهروزرسانی میشود:
import React from 'react'; import PropTypes from 'prop-types'; class MyComponent extends React.Component { render() { return <div>{this.props.name}</div>; } } MyComponent.propTypes = { name: PropTypes.string.isRequired, };
هنگامی که یک کامپوننت parent مجددا رندر میشود، React کامپوننتهای child آن را نیز دوباره رندر میکند. استفاده از PureComponent
به جلوگیری از رندر مجدد غیرضروری کلاس کامپوننتها کمک میکند، تا زمانی که ویژگیها و state کامپوننت بدون تغییر باقی بماند.
به عنوان مثال، در کد زیر همیشه زمانی که کامپوننت parent مجددا رندر میشود، این کامپوننت هم re-render میشود که این موضوع میتواند عملکرد برنامه را کاهش دهد:
import React from 'react'; class MyComponent extends React.Component { render() { return <div>{this.props.name}</div>; } }
برای جلوگیری از رندر شدن مجدد کامپوننتهای child زمانی که ویژگیها و state آنها در طول رندر مجدد کامپوننت parent بدون تغییر باقی میماند، باید کلاس کامپوننتهای برنامه خود را با استفاده از دستور زیر به PureComponent
تبدیل نماییم:
git add . git commit -m "Commit a message" npx react-codemod pure-component src/
با اجرای دستور بالا با سوالات زیر مواجه خواهیم شد:
Which dialect of JavaScript do you use?
گزینه مورد نظر خود را انتخاب میکنیمUse arrow functions?
برای تبدیل هر کامپوننت تابع به arrow function، به این سوال با 'y'
پاسخ میدهیم.Destructure props?
در صورت لزوم، به این سوال با 'y'
پاسخ میدهیم تا به طور خودکار کامپوننتهای موجود در لیست آرگومان تابع را destruct کنیم.هنگامی که دستور کامل شود، کلاس کامپوننتهای پایگاه کد ما به PureComponent
تبدیل میشوند و از رندر مجدد غیرضروری کامپوننتهای child جلوگیری میکنند. همانطور که میبینیم:
import React, { PureComponent } from 'react'; class MyComponent extends PureComponent { render() { return <div>{this.props.name}</div>; } }
در این مقاله بررسی کردیم که چگونه با استفاده از react-codemod
، یک پایگاه کد برنامه React را به آخرین APIهای React یعنی نسخه ۱۹ ارتقا دهیم و design patternها را بدون بازنویسی هیچ کدی بهروزرسانی نماییم.
به روز نگه داشتن پایگاه کد برنامه با جدیدترین APIها و design patternهای React، عملکرد، امنیت و پایبندی به بهترین شیوهها را تضمین میکند.