App {
handleClick = () => {}
render() {
return <button onCLick=(this.handleClick)>
}
}
При каждом рендере компонента будет создана новая функция
class App {
render() {
return <button onCLick=(() => {})>
}
}
Тут будет создаваться каждый раз новая функция ?
const Test = () => {
return <button onCLick=(() => {})>
}
Ой не мы тут классы не юзаем
const App = () => { const fn = () => {} return <Child fn={fn} /> } const App = () => <Child fn={() => {}} /> два абсолютно идентичных компонента с идентичным поведением
Будет создаваться новая функция и в том и в том случае
class App { // Присваиваем полю класса функцию; // поле класса неизменно между рендерами // (если мы явно не изменяем), // поэтому сохраняется ссылочное равенство handleClick = () => {}; render() { return <button onClick={this.handleClick} {...this.props} />; } } class App { render() { // Каждый рендер создаём новую функцию; // теряем ссылочное равенство // между рендерами const handleClick = () => {}; return <button onClick={handleClick} {...this.props} />; } } class App { render() { // Каждый рендер создаём новую функцию; // теряем ссылочное равенство // между рендерами return <button onClick={() => {}} {...this.props} />; } } // Помни! // Функциональный компонент — просто // метод render без класса! (Ментальная модель такая, // в действительности всё может быть чуточку сложнее) const App = (props) => { // Каждый рендер создаём новую функцию; // теряем ссылочное равенство // между рендерами const handleClick = () => {}; return <button onClick={handleClick} {...props} />; } const App = (props) => { // Каждый рендер создаём новую функцию; // теряем ссылочное равенство // между рендерами return <button onClick={() => {}} {...props} />; }
Обсуждают сегодня