ReactJS - предотвращение бесполезного рендеринга

Я пытаюсь отладить простое приложение React ToDo. Я создал два компонента AddTodo (для ввода ввода) и TodoList (для визуализации списка задач).

Полный код:

import React from 'react';

class AddTodo extends React.Component {

  constructor() {
    super();
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleFormSubmit(event) {
    event.preventDefault();
    const val = event.target.elements.todo.value;
    this.props.onTodoAdd(val);
    event.target.reset();
  };

  shouldComponentUpdate() {
    return false;
  }

  render() {
    return (
      <form action = "#" method = "get" autoComplete = "off" onSubmit = {this.handleFormSubmit}>
        <input type = "text" name = "todo" id = "newTodo" />
      </form>
    );
  }
};

const TodoList = ({ todos }) => {
  return (
    <ul>
      {todos.map(todo => <li key = {todo.id}>{todo.text}</li>)}
    </ul>
  )
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: [],
    };
    this.handleTodoAdd = this.handleTodoAdd.bind(this);
  }

  handleTodoAdd(todo) {
    this.setState(({ todos }) =>  ({ todos: [...todos, { text: todo, id: new Date().getTime() }]}));
  }

  render() {
    return (
      <>
        <AddTodo onTodoAdd = {this.handleTodoAdd} />
        <TodoList todos = {this.state.todos} />
      </>
    );
  }
};

export default App;

Каждый раз, когда я добавляю новое задание, и AddTodo, и TodoList подвергаются повторному рендерингу (я использую React DevTools >> Highlight Updates, чтобы определить, какие компоненты повторно рендерируются). Но повторный рендеринг AddTodo не имеет смысла, потому что внутри метода render и его неконтролируемого компонента нет состояния.

Хотя, я добавил shouldComponentUpdate, все равно его повторный рендеринг.

вы можете видеть, что form выделен, когда я ввел новое задание на скриншоте ReactJS - предотвращение бесполезного рендеринга

демо доступно на коды

Мои вопросы:

  1. Что заставляет компонент AddTodo повторно визуализироваться при добавлении нового задания?
  2. Как я могу предотвратить повторный рендеринг AddTodo ??

Спасибо!

Уверены ли вы? Я действительно вижу повторный рендеринг App и ToDoList, но не AddTodo.

Akrion 18.11.2018 06:32

@Akrion Я использую хром с React Developer Tools (v3.4.2) для отладки. Я вижу, что форма подсвечивается всякий раз, когда я нажимаю клавишу ВВОД, чтобы добавить задачу. Я обновил вопрос скриншотом основных моментов

REDDY PRASAD 18.11.2018 07:11
AddTodo не перерисовывает, когда мы добавляем задачу. codeandbox.io/s/llx3zqo489imgur.com/a/yncTmhO
Hardik Modha 18.11.2018 07:27

@HardikModha, вы правы, метод render не вызывается при добавлении нового todo. но DevTools выделяет элемент формы в браузере. Думаю, мне нужно задать отдельный вопрос, что означает «Выделить обновления» в React Developer Tools

REDDY PRASAD 18.11.2018 07:42

Какую версию react-devtools и response вы используете?

Hardik Modha 18.11.2018 07:51

@HardikModha Я использую React (^ 16.7.0-alpha.2) и React Developer Tools (v3.4.2)

REDDY PRASAD 18.11.2018 08:01
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
140
1

Ответы 1

Вы отслеживаете список задач в компоненте приложения, и при его повторном рендеринге все дочерние компоненты будут повторно отрисованы. Чтобы избежать этого, переместите состояние списка задач в компонент списка задач.

Другие вопросы по теме