Понимание, когда реагировать на рендеринг и ререндеринг частей наших веб-сайтов.
В Javascript всякий раз, когда мы создаем экземпляр объекта, под капотом Javascript создает этот объект в памяти. Здесь мы создали obj1 с парой имен ключ-значение, теперь мы создадим obj2, который будет указателем, и этот объект будет указывать на ту же память.
let obj1 = {name: "Saima"}
let obj2 = obj1
obj2 === obj1
//True
Когда мы строго сравниваем obj2 и obj1, он возвращает true, так как оба указывают на один и тот же объект в памяти.
Теперь, если мы обновим obj1 до другого имени, а затем напечатаем obj2, он будет иметь то же значение, потому что оба указателя указывают на один и тот же объект в памяти.
obj1.name = "panda"
console.log(obj2)
// {name: "panda"}
В React единственный способ обновить компонент — это когда в памяти есть совершенно другой объект. Здесь мы создаем совершенно новый объект из существующего объекта с помощью этого метода Javascript Object.assign( )
let obj3 = Object.assign({}, obj1)
console.log(obj3)
//{name: "panda"}
ob3 === obj1
//false
obj3 === obj2
//false
Поскольку мы создали совершенно другой объект, он выделил место в памяти. Итак, теперь obj3 указывает на другой объект в памяти. React будет повторно отображать только тогда, когда состояние является совершенно новым объектом, и это достигается методом setState().
Этот метод позволяет нам обновить объект состояния с другим значением, которое запускает функцию рендеринга, и, следовательно, React обновляет или перерисовывает DOM.
Оптимизация:
Проблема:
render() {
return (
<div className="App">
<input
className="search-box"
type="search"
placeholder="search cupackes"
onChange={(event) => {
const searchField = event.target.value
this.setState({searchField})
}}
/>
</div> );
- Каждый раз, когда React нужно обновить DOM, он запускает метод рендеринга. Внутри метода рендеринга, если у нас есть метод onChange во входном элементе JSX, мы можем сказать, что это анонимная функция. Анонимная функция нигде не хранится в переменной. Поэтому всякий раз, когда запускается метод рендеринга, он натыкается на метод onChange и создает для вас функцию, но после этого он отбрасывается. Это важно отметить, потому что каждый раз, когда запускается функция рендеринга, анонимная функция повторно инициализируется или создается заново. Нет памяти для отслеживания этой функции. Это делает наше приложение немного менее производительным, если внутри метода рендеринга много функций, то компонент со временем начнет тормозить.
Решение:
onSearchChange = (event) => {
const searchField = event.target.value.toLowerCase()
this.setState({
searchField
})
}
render() {
return (
<div className="App">
<input
className="search-box"
type="search"
placeholder="search cupcakes"
onChange={this.searchOnChange}
/>
</div> );
- Мы делаем совершенно новую функцию вне метода рендеринга, но внутри компонента приложения. Мы переместим функцию обратного вызова из метода onChange в совершенно новую функцию. Компонент класса будет создавать функциональные только при первой инициализации класса. Так что теперь всякий раз, когда Render запускается, он будет ссылаться только на «уже инициализированный метод».
Оптимизация .this
- Уничтожение .this сделает наш код более читабельным.
render() {
//destrucuring
const {cupcakes, searchField} = this.state;
const {onSearchChange} = this;
const filteredCupcakes = cupcakes.filter(cupcake => cupcake.name.toLowerCase().includes(searchField.toLowerCase()))
const mappedFilteredCupcakes = filteredCupcakes.map(cupcake => <h1 key={cupcake.id}>{cupcake.name}</h1> )
return (
<div className="App">
<input
className="search-box"
type="search"
placeholder="search cupcakes"
onChange={onSearchChange}
/>
{mappedFilteredCupscakes}
</div>
);
}
Повторный рендеринг внутри компонентов:
- Компоненты перерисовываются на основе двух условий:
- Когда вызывается setState()
- Когда props() обновляется
Следовательно, если console.log() внутри функции рендеринга, он будет печатать дважды, сначала с пустым массивом, а второй раз с заполненным массивом.
