Я пытаюсь отладить простое приложение 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 выделен, когда я ввел новое задание на скриншоте

демо доступно на коды
Мои вопросы:
AddTodo повторно визуализироваться при добавлении нового задания?AddTodo ??Спасибо!
@Akrion Я использую хром с React Developer Tools (v3.4.2) для отладки. Я вижу, что форма подсвечивается всякий раз, когда я нажимаю клавишу ВВОД, чтобы добавить задачу. Я обновил вопрос скриншотом основных моментов
AddTodo не перерисовывает, когда мы добавляем задачу. codeandbox.io/s/llx3zqo489imgur.com/a/yncTmhO@HardikModha, вы правы, метод render не вызывается при добавлении нового todo. но DevTools выделяет элемент формы в браузере. Думаю, мне нужно задать отдельный вопрос, что означает «Выделить обновления» в React Developer Tools
Какую версию react-devtools и response вы используете?
@HardikModha Я использую React (^ 16.7.0-alpha.2) и React Developer Tools (v3.4.2)



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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