В чем преимущество передачи функции setState () в React?

Question

У меня есть функция с именем onRemove, которая написана так:

const [todos, setTodos] = useState(todoData);

const onRemove = useCallback(
    (id) => {
      setTodos(todos.filter((todo) => todo.id !== id));
    },
    [todos]
  );

Затем я заметил, что изменение ее функционала привело к сокращению времени рендеринга.

const onRemove = useCallback(
    (id) => {
      setTodos(todos => todos.filter((todo) => todo.id !== id));
    },
    []
  );

Мой вопрос это:

1. Почему это делает компоненты быстрее?
2. Каковы другие преимущества использования функционала setState()?

Answer 1

В первом случае, когда вы добавляете задачи в качестве зависимости к useCallback, функция будет заново создаваться каждый раз, когда вы вызываете ее, поскольку она сама устанавливает состояние задач и, следовательно, не будет оптимизирована для запоминания

Во втором случае вы используете средство обновления состояния os версии обратного вызова, которое по существу предоставит вам предыдущее состояние в качестве аргумента для обратного вызова, и функция будет создана только один раз.

Это должен быть предпочтительный подход

Чтобы узнать больше о преимуществах функционального setState, пожалуйста, ознакомьтесь со ссылками на пост :

Answer 2

1) почему он рендерит компоненты быстрее?

• прирост производительности второго кода , а не от функционального setState()
• который вы используете * От 1009 * до запоминайте функцию onRemove(), поэтому не будет создаваться каждый раз, когда компонент re-render.
• вы не передаете зависимостей , поэтому функция onRemove() будет создана только один раз - когда компонент монтируется

2) Каковы другие преимущества использования функционал setState ()?

функционал setState() используется для escape closure

• use stati c state

import React, { useState, useEffect } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  console.log('render');

  useEffect(() => {
    console.log('componentDidUpdate')

    const id = setInterval(() => {
      setCount(count)  // count is always 0 because the variable count is closured
    }, 1000);

    return () => {
      clearInterval(id);
      console.log('clean');
    }
  }, []); // run only once when the component mounts

  return (
    <h1>
      {count}
    </h1>
  )
}

export default Counter;

• используйте функционал setState() для чтения fre sh state

import React, { useState, useEffect } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  console.log('render');

  useEffect(() => {
    console.log('componentDidUpdate')

    const id = setInterval(() => {
      setCount(count => count + 1); // read fresh value of count
    }, 1000);

    return () => {
      clearInterval(id);
      console.log('clean');
    }
  }, []); // run only once when the component mounts

  return (
    <h1>
      {count}
    </h1>
  )
}

export default Counter;

Reference

• Полное руководство по использованию эффекта

Answer 3

При использовании хуков вы должны определить массив зависимостей, который при изменениях перезапускает функцию внутри хука.

В первом случае это todos, потому что вы используете его для фильтрации. Теперь, что происходит, когда вы устанавливаете toTos с новым массивом, изменяются ваши todos зависимостей, который снова запускается, и setTodos устанавливает новые todos. Это на самом деле работает бесконечно, что не то, что вы хотите. Вы не должны определять зависимость для ловушки, значение которой устанавливается внутри нее.

Во втором случае нет никакой зависимости, поэтому даже если вы установите setTodos, она не будет перезапущена. Хук setTodos предоставляет свое текущее значение в параметре обратного вызова, который можно использовать, чтобы избежать добавления зависимости. Кроме того, этот способ является правильным способом сделать это.