Пакетное обновление в React


Что такое пакетное обновление?

Пакетное обновление в React — это когда React группирует несколько изменений состояния в одно обновление для повышения производительности.

Каждый раз, когда мы меняем состояние, React рендерит компоненты страницы.

В приведенном примере мы меняем состояние 3 раза, но рендеринг произойдет только один раз.

import React from "react";
class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            name: '',
            likes: '',
            product: ''
        };
    }
    handleClick = () => {
        this.setState({
            name:"john",
        })
        this.setState({
            likes:"cricket",
        })
        this.setState({
            product:"bat"
        })

    }

    render() {
        console.log("rendering");

        return (
            <div className="App">
                <div>
                    <button onClick={this.handleClick}>Next</button>
                </div>
            </div>
        );
    }
}
export default App;
Вход в полноэкранный режим Выход из полноэкранного режима

Когда мы нажимаем на кнопку, состояние изменяется с помощью this.setSate, а реакт собирает все эти изменения и рендерит их за один раз.

В предыдущих версиях React пакетная обработка выполнялась только для обработчиков событий.

React v18 гарантирует, что обновления состояния, сделанные из любого места, будут пакетными по умолчанию. Это позволяет пакетно обрабатывать обновления состояния, включая собственные обработчики событий, асинхронные операции, таймауты и интервалы.

В этом примере, если мы используем React v17, React изменит состояние компонентов, на которых мы работаем, и поэтому, когда мы console.log(this.state) видим React 17 : { counter1: 1, counter2: 0 } потому что состояние было и отрисовано для первого изменения состояния.

import React from "react";
class App extends React.Component {
    state = {
        counter1: 0,
        counter2: 0
    }

    handleClick = () => {
        setTimeout(() => {
            this.setState(({ counter1 }) => ({ counter1: counter1 + 1 }));
            console.log(this.state);
            //React 17 : { counter1: 1, counter2: 0 }
            //React 18 with createRoot : { counter1: 0, counter2: 0 } 
            this.setState(({ counter2 }) => ({ counter2: counter2 + 1 }));
        });
    };

    render() {
        console.log('Rerendered');
        console.log(this.state);
        // {counter1: 1, counter2: 1}
        return (
            <div className='App'>
                <button onClick={this.handleClick}>Click me</button>
            </div>
        )
    }
}

export default App;

Вход в полноэкранный режим Выход из полноэкранного режима

В react v18

Ссылки

  • https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

  • Simplifying state management in React apps with batched updates

  • https://blog.bitsrc.io/automatic-batching-in-react-18-what-you-should-know-d50141dc096e#:~:text=React%20использует%20batching%20to%20group,support%20batching%20for%20browser%20events.

  • https://blog.saeloun.com/2021/07/22/react-automatic-batching.html

Оцените статью
devanswers.ru
Добавить комментарий