Javascript 当任何状态发生更改时，在React组件的render函数中调用返回JSX的方法是否会影响性能？

每次我在输入中键入内容时，

state.addTodo

都会更新，导致调用

render

，这也会调用

alltodo

，即使它不使用

state.addTodo

。这会给你的表演带来冲击吗？如果是，我如何修复它？

---

（在

中调用函数是否会导致性能下降，或者不是因为它只是在更新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>
    );
  }
}

类应用程序扩展组件{
状态={
待办事项：{}，
addTodo:“
};
所有待办事项=（）=>{
if（Object.keys（this.state.todos）.length==0）
返回null；
const jsx=Object.keys（this.state.todos.map）（时间戳=>(
{this.state.todos[timestamp].todo}
));
返回jsx；
};
onSubmitHandler=e=>{
e、 预防默认值（）；
const timestamp=Date.now（）*10000+Math.random（）*10000；
this.setState（prevState=>({
todos:{…prevState.todos，
[时间戳]：{
todo:prevState.addTodo，
完成：错误
}
},
addTodo:“
}));
e、 target.reset（）；
};
onChangeHandler=e=>{
const name=e.target.name，value=e.target.value；
this.setState（prevState=>({
[名称]：值
}));
}
render（）{
返回(
所有待办事项
{this.allTodos（）}
添加
);
}
}
您注意到所有TODO都被重新呈现是正确的，即使您没有更改state.todos。如果不想重新渲染这些TODO，可以制作一个全新的组件，只渲染这些TODO。例：

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>
    );
  }
}

在
中调用函数是否会降低性能，或者不是因为它只更新V-DOM而不是DOM？在不使用额外组件的情况下调用render会更新虚拟DOM和DOM，因为React认为需要重新渲染TODO。作为回应，对这两个节点使用单个类意味着它们只有一个v-dom节点，并且认为应该重新渲染。
this.setState({
    todos: {},
    addTodo: "",
})