javascript - 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;

每当我添加新的 todo 时，两者AddTodo都TodoList在重新渲染（我正在使用 React DevTools >> Highlight Updates 来查找哪些组件重新渲染）。但是AddTodo重新渲染没有意义，因为在render方法及其不受控制的组件内部没有关联状态。

虽然，我补充说shouldComponentUpdate，仍然是它的重新渲染。

form当我在屏幕截图中输入新的待办事项时，您可以看到突出显示

演示可在代码沙箱获得

我的问题是：

添加新待办事项时导致AddTodo组件重新渲染的原因是什么？
我怎样才能防止重新渲染AddTodo？？

谢谢！

标签： javascriptreactjs

javascript - ReactJS - 防止浪费渲染发生

问题描述

解决方案

推荐阅读