نحوه واکنش وضعیت حفظ و تنظیم مجدد

حالت بین اجزاء جدا شده است. React بر اساس جایگاه آنها در درخت UI، وضعیت به کدام مؤلفه تعلق دارد. می‌توانید زمان حفظ حالت و زمان بازنشانی بین رندرهای مجدد را کنترل کنید.

درخت رابط کاربری
مرورگرها از ساختارهای درختی زیادی برای مدل‌سازی رابط کاربری استفاده می‌کنند. DOM نشان دهنده عناصر HTML است، CSSOM همین کار را برای CSS انجام می دهد. حتی یک درخت دسترسی وجود دارد!

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

توجه: برای مشاهده و درک بهتر، تصویر را باز کنید.

از کامپوننت ها، React یک درخت رابط کاربری ایجاد می کند که React DOM از آن برای رندر کردن DOM استفاده می کند

ایالت به موقعیتی در درخت گره خورده است
هنگامی که به یک حالت جزء می دهید، ممکن است فکر کنید که حالت در داخل کامپوننت “زندگی می کند”. اما دولت در واقع در داخل React نگهداری می شود. React هر بخش از حالتی را که نگه می‌دارد با مولفه صحیح در جایی که آن جزء در درخت UI قرار دارد مرتبط می‌کند.

بیایید آن را با کمک یک مثال ببینیم. فرض کنید، یک داریم <Counter /> تگ JSX، اما در دو موقعیت مختلف ارائه می شود:

import { useState } from 'react';

export default function App() {
  const counter = <Counter />;
  return (
    <div>
      {counter}
      {counter}
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className="counter";
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

توجه: برای مشاهده و درک بهتر، تصویر را باز کنید.

اینها دو شمارنده مجزا هستند زیرا هر کدام در موقعیت خاص خود در درخت ارائه می شوند. برای استفاده از React معمولاً لازم نیست به این موقعیت ها فکر کنید، اما درک نحوه عملکرد آن می تواند مفید باشد.

در React، هر کامپوننت روی صفحه دارای حالت کاملا ایزوله است. به عنوان مثال، اگر دو مولفه Counter را در کنار یکدیگر رندر کنید، هر کدام از آنها حالت های مستقل، امتیاز و شناور خود را خواهند داشت.

کد را اجرا کنید و روی هر دو شمارنده کلیک کنید و متوجه شوید که روی یکدیگر تأثیر نمی گذارند:

import { useState } from 'react';

export default function App() {
  return (
    <div>
      <Counter />
      <Counter />
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className="counter";
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

همانطور که می بینید، هنگامی که یک شمارنده به روز می شود، فقط وضعیت آن جزء به روز می شود:

توجه: برای مشاهده و درک بهتر، تصویر را باز کنید.

React وضعیت را تا زمانی که همان کامپوننت را در همان موقعیت رندر کنید، حفظ می کند. برای مشاهده این، شمارنده را افزایش دهید، سپس با برداشتن تیک گزینه “Render the counter” آن را بردارید و سپس با علامت زدن مجدد آن را دوباره اضافه کنید:

import { useState } from 'react';

export default function App() {
  const [showB, setShowB] = useState(true);
  return (
    <div>
      {showB && <Counter />} 
      <label>
        <input
          type="checkbox"
          checked={showB}
          onChange={e => {
            setShowB(e.target.checked)
          }}
        />
        Render the counter
      </label>
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className="counter";
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

توجه: برای مشاهده و درک بهتر، تصویر را باز کنید.

وقتی تیک “Render the counter” را بزنید، یک شمارنده جدید و وضعیت آن از ابتدا مقداردهی اولیه می شود (امتیاز = 0) و به DOM اضافه می شود.

توجه: برای مشاهده و درک بهتر، تصویر را باز کنید.
React وضعیت یک جزء را تا زمانی که در موقعیت خود در درخت UI رندر می شود حفظ می کند. اگر حذف شود، یا کامپوننت دیگری در همان موقعیت رندر شود، React حالت آن را کنار می‌گذارد.

منبع: https://react.dev/learn/preserving-and-resetting-state