هندلرهای بازگشتی و بالابردن وضعیت در React – ارتباط بین کامپوننت‌ها و مدیریت داده‌های مشترک

مقدمه

در React، پراپس‌ها برای انتقال داده از کامپوننت والد به فرزند استفاده می‌شوند. اما برای ارتباط از فرزند به والد، باید از هندلرهای بازگشتی (callback handlers) استفاده کنیم. این هندلرها به‌صورت تابعی از والد به فرزند ارسال می‌شوند و در فرزند فراخوانی می‌شوند تا داده یا رویدادی را به والد اطلاع دهند.

تعریف هندلر بازگشتی

در مثال زیر، کامپوننت App تابعی به نام handleSearch تعریف می‌کند و آن را به کامپوننت Search ارسال می‌کند:

const App = () => {
  const stories = [ ... ];
  const handleSearch = (event) => {
    console.log(event.target.value);
  };

  return (
    

      
      
    
  );
};

در کامپوننت Search، این تابع به‌عنوان پراپس دریافت شده و در هندلر داخلی فراخوانی می‌شود:

const Search = (props) => {
  const [searchTerm, setSearchTerm] = React.useState('');

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
    props.onSearch(event);
  };

  return (
    

      
    
  );
};

بالابردن وضعیت (Lifting State)

اگر کامپوننت والد نیاز به استفاده از دادهٔ وضعیت دارد، بهتر است وضعیت را در همان کامپوننت تعریف کنیم. در اینجا، وضعیت searchTerm از Search به App منتقل می‌شود:

const App = () => {
  const stories = [ ... ];
  const [searchTerm, setSearchTerm] = React.useState('');

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    

      
      
    
  );
};

فیلتر کردن داده‌ها با وضعیت

اکنون می‌توانیم از searchTerm برای فیلتر کردن لیست داستان‌ها استفاده کنیم:

const searchedStories = stories.filter((story) =>
  story.title.includes(searchTerm)
);

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

<List list={searchedStories} />

جمع‌بندی

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