Question

如果我有这样的组件：

const Todos = (props) => {
  const [selectedTodo, setSelectedTodo] = useState(null);

  return
    <>
      {todos.map(todo => <Todo key={todo.id} />)}
      {selectedTodo && <Modal />}
    </>
}

让我们假设这是<Todo />

const Todo = (props) => {

  return <div>{props.name}</div>
}

比方说selectedTodo触发显示模式或其他内容。

如果我更新selectedTodo值，则所有待办事项都将重新渲染。如果将console.log放在<Todo>组件中，则可以看到每次状态改变时它都会渲染，这是有意义的。但是，如果我有很多待办事项，那会不会影响性能？

有没有办法让我更新selectedTodos时不重新渲染每个待办事项？

Answer 1

使用React.memo，您可以将组件视为昂贵的函数，该函数返回要保留其结果（视图）直到更改数据（待办事项）

const TodoList = React.memo(({ todos }) => {
    return (<>
        {todos.map(todo => <Todo key={todo.id} />)}
    </>)
})

然后只需正常使用TodoList

return (<>
    <TodoList todos={todos} />
    <div>{selectedTodo && <p>hi</p>}</div>
</>)

https://reactjs.org/docs/react-api.html#reactmemo

阵列重新渲染问题

1 个答案: