Оптимизация рендеринга с React.PureComponent

Frontender Libs - обзор библиотек JS / CSS

Оптимизация рендеринга с React.PureComponent

React.PureComponent — это специальный тип компонента в React, который оптимизирует рендеринг за счет автоматического выполнения поверхностного сравнения пропсов и состояния.

В отличие от обычного React.Component, он реализует метод shouldComponentUpdate с поверхностным сравнением пропсов и состояния.

Пример использования:

PureComponent.

class PureComp extends React.PureComponent {
  render() {
    console.log('PureComponent render');
    return <div>{this.props.value}</div>;
  }
}

Родительский компонент.

class ParentComponent extends React.Component {
  state = {
    value: 0
  };

  componentDidMount() {
    setInterval(() => {
      this.setState({ value: this.state.value + 1 });
    }, 1000);
  }

  render() {
    return (
      <div>
        <RegularComponent value={this.state.value} />
        <PureComp value={this.state.value} />
      </div>
    );
  }
}

👉 @sWebDev

👍4

www.tgoop.com/sWebDev/2985

1.62K viewsJul 1, 2024 at 07:43

tgoop.com/sWebDev/2985

Create: 2024-07-01
Last Update: 2025-10-08 09:49:17

class PureComp extends React.PureComponent {
  render() {
    console.log('PureComponent render');
    return <div>{this.props.value}</div>;
  }
}

Родительский компонент.

class ParentComponent extends React.Component {
  state = {
    value: 0
  };

  componentDidMount() {
    setInterval(() => {
      this.setState({ value: this.state.value + 1 });
    }, 1000);
  }

  render() {
    return (
      <div>
        <RegularComponent value={this.state.value} />
        <PureComp value={this.state.value} />
      </div>
    );
  }
}

👉 @sWebDev

BY Frontender Libs - обзор библиотек JS / CSS

Share with your friend now:
tgoop.com/sWebDev/2985

Telegram News

Оптимизация рендеринга с React.PureComponent