Лучший способ передать объект дочернему компоненту
Очень интересно узнать - есть ли разница в производительности между
<Child data = {{...// some props here}}/>
а также
render() {
const data = {...}
return <Child data = {data}/>
}
Я читал о функциях. Что лучше заменить встроенные функции из:
<button
onClick = {() => {
...
}}
/>
К:
handleClick = () = {...}
...
<button
onClick = {this.handleClick}
/>
А что насчет проходящих предметов?
Ответы 3
render() {
const data = {...}
return <Child data = {data}/>
}
data должен быть вне render(), потому что при изменении некоторых состояний метод render() будет вызван, а data будет устанавливаться снова и снова. Так что для производительности лучше объявить это вне render()
Если вы хотите передать все реквизиты дочернему компоненту от родителя, вы можете сделать следующее:
<Child data = {...this.props} />
Но если вы хотите передать некоторые реквизиты этому дочернему компоненту, вы можете извлечь эти реквизиты в некоторую константу и передать эту константу дочернему компоненту, например:
const data = {data1: this.props.data1, data2: this.props.data2};
return <Child data = {data}/>
Если объект не является производным от состояния или реквизита и всегда является постоянным, лучше объявить его вне метода рендеринга, чтобы избежать присвоения значения данным каждый раз, когда вызывается метод рендеринга.
Для сравнения: для передачи объекта в компонент оба варианта (встроенный и присвоение переменной) эквивалентны с точки зрения производительности.
Плохо для обработчиков, а не для передачи данных. :) Полезная ссылка: medium.freecodecamp.org/…