javascript - 当任何状态发生变化时，在 React 组件的渲染函数中调用返回 JSX 的方法是否会影响性能？

Question

每次我在输入中输入内容时，state.addTodo 都会更新，导致调用 render，它也会调用 allTodos，即使它没有't 使用 state.addTodo。这会影响性能吗？如果是，我该如何解决？(在 render 中调用一个函数会降低性能还是因为它只更新 V-DOM 而不是 DOM？)

此外，是否有任何简单的方法来重置表单以及将所有变量(此处仅 state.addTodo)重置为与该表单关联的默认值？

class App extends Component {
  state = {
    todos: {},
    addTodo: ""
  };

  allTodos = () => {
    if(Object.keys(this.state.todos).length === 0)
      return null;
    const jsx = Object.keys(this.state.todos).map(timestamp => (
      <li key={timestamp}>{this.state.todos[timestamp].todo}</li>
    ));
    return jsx;
  };

  onSubmitHandler = e => {
    e.preventDefault();
    const timestamp = Date.now()*10000 + Math.random()*10000;
    this.setState(prevState => ({
      todos: {...prevState.todos, 
        [timestamp]: {
          todo: prevState.addTodo,
          done: false
        }
      },
      addTodo: ""
    }));
    e.target.reset();
  };

  onChangeHandler = e => {
    const name= e.target.name, value = e.target.value;
    this.setState(prevState => ({
      [name]: value
    }));
  }

  render() {
    return (
      <div>
        <h3>All todos</h3>
        <ul>{this.allTodos()}</ul>

        <form onSubmit={this.onSubmitHandler}>
          <input type="text" name="addTodo" onChange={this.onChangeHandler}/>
          <button type="submit">Add</button>
        </form>
      </div>
    );
  }
}

Answer 1

即使您没有对 state.todos 进行更改，您也正确地注意到所有待办事项都在重新呈现。如果你不想重新渲染那些待办事项，你可以制作一个全新的组件来渲染这些待办事项。例如:

const TodoList = ({ todos }) => {
  if(Object.keys(todos).length === 0)
      return null;
  const todoList = Object.keys(todos).map(timestamp => (
    <li key={timestamp}>{todos[timestamp].todo}</li>
  ));
  return todoList;
}

class App extends Component {
  state = {
    todos: {},
    addTodo: ""
  };

  ...other handlers are the same

  render() {
    return (
      <div>
        <h3>All todos</h3>
        <ul><TodoList todos={this.state.todos} /></ul>

        <form onSubmit={this.onSubmitHandler}>
          <input type="text" name="addTodo" onChange={this.onChangeHandler}/>
          <button type="submit">Add</button>
        </form>
      </div>
    );
  }
}

这是 React 非常常见的情况，也是 React 被认为是“组合式”的原因。现在 todos 在一个新的组件中，React 可以知道组件的 props (todos) 没有改变，它们不会被重新渲染。

就您的第二个问题而言，如果您想重置多个变量，您始终可以使用这些变量的默认值调用 setState。

例如:

this.setState({
    todos: {},
    addTodo: "",
})