Pitfall

אנחנו ממליצים להגדיר קומפוננטות כפונקציות במקום שיעורים. ראו איך לבצע מיגרציה.

PureComponent דומה ל-Component אבל מדלגת על רינדורים חוזרים עבורם props ו-state. כיתת קומפוננטות עדיין נתמכות ב-React, אבל אנחנו לא ממליצים להשתמש בקוד חדש.

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

הפניה

PureComponent

כדי לדלג על רינדור חוזר של רכיב המחלקה עבורם props ו-state, הרחיבו את PureComponent במקום את Component:

import { PureComponent } from 'react';

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

PureComponent היא תת-מחלקה של Component ותומכת בכל ה-APIs של Component. הרחבה של PureComponent שק לולה הגדרת מתודת [shouldComponentUpdate](/reference/hould/component את#) ווה אישי/react/Component את# ה-props וה-state.

עוד דוגמאות נוספות.

שימוש

דילוג על רינדורים חוזרים מיותרים עבור רכיבי הכיתה

React בדרך כלל מרנדרת קומפוננת מחדש בכל פעם שהורה שלה מרונדר מחדש. כאופטימיזציה, אפשר ליצור פוננטה ש-React לא תרנדר מחדש כשההורה מרונדר מחדש, כל עוד ה-props וה-state החדשים שלהן לישנים. רכיבי כיתה יכולים להצטרף להתנהגות הזו על ידי הרחבת PureComponent:

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

לקומפוננטת React תמיד צריכה להיות לוגיקת רינדור טהורה. כלומר, היא חייבת להחזיר אותו פלט אם ה-props, ה-state וה-הקשר לא השתתנו. בשימוש ב-PureComponent אתם מצירים בפני React שהקומפוננתה עומדת בדרישה הזו, לכן React לא צריכה לרנדר מחדש כל עוד ה-props וה-state לא השתנתנו. עם זאת, הקומפוננטה עדיין תרונדר מחדש אם ההקשר שבו היא משתמשת.

בדוגמה הזו שימו לב שקומפונטת Greeting מרונדרת מחדש בכל פעם ש-name ranking (כי זה אחד ה-props שלה), אבל לא כש-address (כי הוא לא מועבר ל-Greeting כ-prop):

import { PureComponent, useState } from 'react';

class Greeting extends PureComponent {
  render() {
    console.log("Greeting was rendered at", new Date().toLocaleTimeString());
    return <h3>Hello{this.props.name && ', '}{this.props.name}!</h3>;
  }
}

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Name{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Address{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

Pitfall

אנחנו ממליצים להגדיר קומפוננטות כפונקציות במקום שיעורים. ראו איך לבצע מיגרציה.

חלופות

מיגרציה מ-PureComponent class component לפונקציה

אנחנו ממליצים להשתמש בקומפוננטות פונקציה במקום רכיבי כיתה בקוד חדש. אם יש לכם רכיבי כיתה קיימות שמשתמשות ב-PureComponent, כך אפשר להמיר אותן. זה הקוד המקורי:

import { PureComponent, useState } from 'react';

class Greeting extends PureComponent {
  render() {
    console.log("Greeting was rendered at", new Date().toLocaleTimeString());
    return <h3>Hello{this.props.name && ', '}{this.props.name}!</h3>;
  }
}

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Name{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Address{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

כש-ממירים את הקומפוננטה הזו מ-class לפונקציה, עטפו אותה ב-memo:

import { memo, useState } from 'react';

const Greeting = memo(function Greeting({ name }) {
  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
  return <h3>Hello{name && ', '}{name}!</h3>;
});

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Name{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Address{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

Note

נדרש ל-PureComponent, memo לא משווה בין state חדש לישן. בקומפוננטות פונקציה, קריאה ל-פונקציית set עם אותו state כבר מונעת רינדורים חוזרים כברירתם מחדל, גם בלי memo.

PreviousisValidElement

How do you like these docs?