ReactJS - Чи викликається візуалізація будь-коли, коли викликається "setState"?

Чи React повторно відтворює всі компоненти та допоміжні компоненти щоразу, коли setStateвикликається?

Якщо так, то чому? Я подумав, що ідея полягає в тому, що React надається лише так мало, як потрібно - коли стан змінюється.

У наступному простому прикладі обидва класи відображаються знову при натисканні на текст, незважаючи на те, що стан не змінюється при наступних клацаннях, оскільки обробник onClick завжди встановлює stateоднакове значення:

this.setState({'test':'me'});

Я б очікував, що рендеринг відбуватиметься лише у випадку зміни stateданих.

Ось код прикладу, як JS Fiddle та вбудований фрагмент:

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

[1]: http://jsfiddle.net/fp2tncmb/2/

Чи реагує React всі компоненти та підкомпоненти щоразу, коли викликається setState?

За замовчуванням - так.

Існує метод boolean shouldComponentUpdate (об’єкт nextProps, object nextState) , кожен компонент має цей метод, і він повинен визначити "чи слід оновити компонент (запустити функцію візуалізації )?" щоразу, коли ви змінюєте стан або передаєте нові реквізити від батьківського компонента.

Ви можете написати власну реалізацію методу shouldComponentUpdate для свого компонента, але реалізація за замовчуванням завжди повертає справжнє значення, тобто завжди перезапускати функцію візуалізації.

Цитата з офіційних документів http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

За замовчуванням, shouldComponentUpdate завжди повертає true, щоб запобігти непомітним помилкам, коли стан мутується на місці, але якщо ви обережні завжди ставитесь до стану як до непорушного та для читання лише з реквізиту та стану в рендері (), ви можете переосмислити функцію mustComponentUpdate з реалізація, яка порівнює старі реквізити та стан їх заміни.

Наступна частина вашого запитання:

Якщо так, то чому? Я подумав, що ідея полягає в тому, що React надається лише настільки мало, як потрібно - коли держава зміниться.

Є два кроки того, що ми можемо назвати "візуалізацією":

1. Віртуальна DOM візуалізації: коли метод render називається, він повертає нову віртуальну структуру dom компонента. Як я вже говорив раніше, це роблять метод викликається завжди при виклику SetState () , тому що shouldComponentUpdate завжди повертає істину за замовчуванням. Отже, за замовчуванням тут в Реакті немає оптимізації.

2. Native DOM надає: React змінює реальні вузли DOM у вашому браузері лише у тому випадку, якщо вони були змінені у Virtual DOM та в міру необхідності - це та велика функція React, яка оптимізує реальну мутацію DOM та робить швидку реакцію.

Ні, React не робить все, коли стан змінюється.

• Кожен раз, коли компонент забруднений (його стан змінився), цей компонент та його діти повторно передаються. Це певною мірою полягає в тому, щоб якомога менше рендерингувати. Єдиний час, коли візуалізація не викликається, це коли певна гілка переміщена до іншого кореня, де теоретично нам не потрібно нічого рендерингувати. У вашому прикладі TimeInChildє дочірньою складовою Main, тому вона також отримує повторне відображення, коли стан Mainзмінюється.

• Реакція не порівнює дані про стан. Коли setStateвін викликається, він позначає компонент як брудний (а це означає, що його потрібно повторно винести). Важливо зазначити, що хоча renderметод компонента називається, реальний DOM оновлюється лише у випадку, якщо вихід відрізняється від поточного дерева DOM (він же відрізняється між деревом віртуального DOM та деревом DOM документа). У вашому прикладі, незважаючи на те, що stateдані не змінилися, час останньої зміни відбувся, що зробило Virtual DOM відмінним від DOM документа, отже, чому HTML оновлюється.

Хоча це вказано в багатьох інших відповідях тут, компонент повинен:

• застосовувати shouldComponentUpdateдля візуалізації лише тоді, коли стан або властивості змінюються

• перейти до розширення PureComponent , який вже реалізує shouldComponentUpdateметод внутрішньо для неглибоких порівнянь.

Ось приклад використання shouldComponentUpdate, який працює лише для цього простого випадку використання та демонстраційних цілей. Коли це використовується, компонент більше не відображається при кожному натисканні, а відображається при першому відображенні та після його натискання один раз.

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    shouldComponentUpdate: function(nextProps, nextState) {
      if (this.state == null)
        return true;
  
      if (this.state.test == nextState.test)
        return false;
        
      return true;
  },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

Так. Він викликає метод render () щоразу, коли ми викликаємо setState замість того, коли "shouldComponentUpdate" повертає значення false.

Ще одна причина "втраченого оновлення" може бути наступною:

• Якщо статичний getDerivedStateFromProps визначений, він повторюється в кожному процесі оновлення відповідно до офіційної документації https://reactjs.org/docs/react-component.html#updating .
• тож якщо це значення стану надходить з реквізиту на початку, воно перезаписується в кожному оновленні.

Якщо це проблема, то U може уникнути встановлення стану під час оновлення, слід перевірити таке значення параметра стану, як це

static getDerivedStateFromProps(props: TimeCorrectionProps, state: TimeCorrectionState): TimeCorrectionState {
   return state ? state : {disable: false, timeCorrection: props.timeCorrection};
}

Іншим рішенням є додавання ініціалізованого властивості до стану та встановлення його в перший раз (якщо стан ініціалізовано до ненульового значення.)

Не всі компоненти

stateв компоненті виглядає як джерело водоспаду стан всієї APP.

Тож зміна відбувається звідки дзвонив setState. Дерево rendersтоді дзвонять звідти. Якщо ви використовували чистий компонент, renderзапит буде пропущено.