Время выполнения функций рендеринга в React

React.js
Время выполнения функций рендеринга в React

Прошло уже почти 3 месяца с тех пор, как я изучил React, и, делясь своим опытом обучения, я буду общаться с вами и каждый день прогрессировать вместе с вами.

Когда я впервые начал изучать React, я думал, что когда состояние компонента или реквизиты изменяются, это вызовет выполнение функции рендеринга компонента. Позже, в результате серии экспериментов, я обнаружил, что выполнение функции рендеринга может быть запущено без изменения состояния, и выполнение функции рендеринга может не обязательно запускаться при изменении реквизита. проиллюстрируйте этот момент.

Состояние также может инициировать выполнение функции рендеринга без изменения состояния.

Перейдите непосредственно к коду:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: 'click button',
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        console.log('Click happen');
        this.setState({});
    }

    render() {
        console.log('App render');
        const { message } = this.state;
        return (
            <button onClick={ this.handleClick }>{ message }</button>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

Идея кода очень проста.Кнопка привязана к событию клика.При нажатии на кнопку выполняется метод setState({}).Поскольку параметр метода setState является пустым объектом, состояние не изменилось.В это время наблюдайте, выполняется ли функция рендеринга.Результат Он выполняется, как показано на рисунке ниже, поэтому пока выполняется метод setState, функция рендеринга будет выполняться.

setState({})执行结果

Изменение реквизита не обязательно запускает выполнение функции рендеринга.

Перейдите непосредственно к коду:

import React, {Fragment} from 'react';
import ReactDOM from 'react-dom';

const obj = {
    message: 'hello world',
};

class App extends React.Component {
    handleClick() {
        console.log('click happen');
        obj.message = 'hello Beijing';
    }

    render() {
        return (
            <Fragment>
                <button onClick={ this.handleClick }>Click</button>
                <Component1 objMessage={ obj } />
            </Fragment>
        );
    }
}

class Component1 extends React.Component {
    render() {
        const { objMessage } = this.props;
        console.log('Component1 render');
        return (
            <div>{ objMessage.message }</div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

Идея кода очень проста, приложение родительского компонента, дочерний компонент Component1 и реквизиты дочернего компонента исходят из внешней переменной obj Когда я нажимаю кнопку родительского компонента, я изменю значение внешней переменной obj, а затем я буду наблюдать за дочерним компонентом Component1.Выполняется ли функция рендеринга, результат не выполняется, как показано на рисунке ниже, поэтому изменение реквизита не обязательно запускает выполнение функции рендеринга.

props改变

Суммировать

В React, пока выполняется метод setState, он инициирует выполнение функции рендеринга; если реквизиты компонента изменяются, это не обязательно инициирует выполнение функции рендеринга, если только значение реквизитов не исходит из состояние родительского компонента или компонента-предка, в этом случае Next изменяется реквизит компонента, что означает изменение состояния родительского компонента или компонента-предка, то есть родительский компонент или компонент-предок выполняет метод setState; то можно сделать вывод, что время выполнения функции рендеринга — это выполнение метода setState.

Во-вторых, выполнение функции рендеринга не обязательно означает, что произошло манипулирование DOM, виртуальная функция рендеринга выполняется только что возвращенным DOM, необходимо решить, произошло ли путем сравнения старого и нового виртуального DOM манипулирование DOM, сравнение старого и нового виртуального DOM, это включает алгоритм diff, который является другой темой.

Категории