Реагируйте на ловушку useEffect () под капотом. Эффект, запланированный с использованием useEffect, блокирует основной поток?

Question

В React DOCs, о хуке useEffect(), мы получаем:

"Эффекты, запланированные с помощью useEffect, не блокируют обновление экрана браузером."

Совет

В отличие от componentDidMount или componentDidUpdate, эффекты, запланированные с помощью useEffect, не блокируют браузер от обновления экрана.

Что именно это означает?

Пример: Представьте, что у меня есть следующее:

• Управляемый вход
• И useEffect после 1-го рендеринга, которое выполняет дорогостоящие синхронные вычисления.

function App() {
  const [inputValue,setInputValue] = React.useState('');

  useEffect(()=>{
    // RUN SOME EXPENSIVE SYNCHRONOUS FUNCTION
  },[]);

  return (
    <input value={inputValue} onChange={()=>setInputValue(event.target.value)}/>
  );

}

Означает ли это, что я вполне мог бы использовать мой input (которыйуправляется React с использованием JS, который является однопоточным), даже когда выполняются тяжелые синхронные вычисления?Если так, как это может быть?

Answer 1

Не блокирует поток пользовательского интерфейса (возможно, для реагирования используются веб-работники).

Кроме того, для дорогих звонков, пожалуйста, используйте:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily