Тази статия има за цел да споделя моите собствени преживявания с основно повторно изобразяване на ReactJS.

Повторното изобразяване на ReactJS се отнася до две фази:

  • Откриване на промени
  • Решение за повторно боядисване

По същество има 2 основни промени, които могат да причинят повторно изобразяване:

  • Промени, открити от самия компонент
  • Промени, открити от родителя на компонента

Промени, открити от само себе си

В обхвата на това писание, той използва само компоненти със състояние. Човек може да знае, че Stateful Components са тези, които биха използвали състояние в него.

ReactJS ще го знае, защото компонентите ще използват state и setState (за базирани на клас компоненти) или useState кука (за функционални компоненти).

Ето един пример:

Използване на командата create-react-app за стартиране на нов ReactJS проект

Заменете съдържанието на App.js с:

import './App.css';
import MyComponent from './MyComponent';
import TickingComponent from './TickingComponent';
function App() {
  console.log('App');
  return (
      <>
        <MyComponent />
        <TickingComponent />
      </>
  );
}
export default App;

Създайте два нови файла:

MyComponent.js със следното съдържание:

import React from 'react';
function MyComponent() {
  console.log('MyComponent');
  return (
    <div>MyComponent</div>
  );
}
export default MyComponent;

TickingComponent.js (компонент с проследяване на състоянието) със следното съдържание:

import React, { useEffect, useState } from 'react';
function TickingComponent() {
  const [tickCount, setTickCount] = useState(0);
  useEffect(() => {
    const id = setTimeout(() => {
      setTickCount(tickCount + 1);
    }, 1 * 1000);
    return () => {
      if (id) clearTimeout(id);
    };
  }, [tickCount]);
  console.log(`TickingComponent: ${tickCount}`);
  return (
    <div>{`Tick count: ${tickCount}`}</div>
  );
}
export default TickingComponent;

Ето какво се случва в инструмента за разработка на Chrome

Конзола:

елементи:

Както виждаш:

  • В конзолата App, MyComponent и TickingComponent се извикват за първи път рисуване
  • В конзолата TickingComponent след това се извиква на всеки 1 s (зададено от изчакване)
  • Само TickingComponent DOM елемент е маркиран (прерисуван)

Промени, открити от родителя на компонента

В този случай, всеки път, когато има промяна в компонент, ReactJS ще се опита да открие дали тази промяна също влияе върху това, което ще бъде показано за неговите деца

Нека актуализираме нашия кодов фрагмент, за да видим как работи

Актуализирайте TickingComponent.js, за да получавате props (за tickCount ), вместо да използвате самото състояние

import React from 'react';
function TickingComponent({ tickCount }) {
  console.log(`TickingComponent: ${tickCount}`);
  return (
    <div>{`Tick count: ${tickCount}`}</div>
  );
}
export default TickingComponent;

Актуализиране на App.js, за да стане компонент със състояние (преместване на състоянието към компонента App)

import { useEffect, useState } from 'react';
import './App.css';
import MyComponent from './MyComponent';
import TickingComponent from './TickingComponent';
function App() {
  const [tickCount, setTickCount] = useState(0);
  useEffect(() => {
    const id = setTimeout(() => {
      setTickCount(tickCount + 1);
    }, 1 * 1000);
    return () => {
      if (id) clearTimeout(id);
    };
  }, [tickCount]);
  console.log('App');
  return (
      <>
        <MyComponent />
        <TickingComponent tickCount={tickCount} />
      </>
  );
}
export default App;

И ето какво получаваме:

Конзола

елементи:

И както можете да видите:

  • Всички 3 компонента App, MyComponent и TickingComponent се извикват на всеки 1s
  • В DOM дървото все още има само TickingComponent, което е маркирано (прерисувано)

Така че с тези два основни случая на промени:

  • Фаза на откриване на промяна: функциите за изобразяване ( render метод за базирани на клас компоненти и самата функция (за функционални компоненти) могат да бъдат извикани, за да получат изхода на това, което ще се покаже на екрана.
  • Фаза на вземане на решение за повторно рисуване: След това ReactJS сравнява с последния изход, за да реши дали се нуждае от манипулиране на DOM, за да рисува повторно компонентите в дървото на DOM. В резултат на това и в двата примера само TickingComponent се прерисува на екрана

Заключение:

ReactJS има страхотно представяне чрез Актуализира само това, което е необходимо. Това има смисъл, тъй като манипулирането на DOM е толкова тежка задача и може да причини забавяне на вашето уеб приложение и това, което ReactJS прави, за да подобри производителността, е да намали ненужното манипулиране на DOM чрез този процес на повторно изобразяване.

Освен това можем да видим, че дори компонент няма да бъде пренарисуван на екрана, функциите за изобразяване ще продължат да бъдат извиквани. По-добре е да не пишете тежки JS задачи във функцията render или особено във функционалния компонент.

Много съм благодарен, че отделихте време в четене на тази статия и ми позволихте да се присъединя към вас в изучаването на ReactJS чрез споделяне на опит.

Знам, че има много случаи, които са по-сложни от тези два примера. Въпреки това се надявам, че това ще донесе основна картина на процеса на повторно изобразяване на ReactJS.

Ще се видим скоро.

На Ваше разположение,