60
задан 25 November 2018 в 07:13

4 ответа

useLayoutEffect мог выполнить это с пустым множеством наблюдателей ([]), если функциональность будет на самом деле схожа componentWillMount то - она будет работать, прежде чем первое содержание добирается до DOM - хотя существует на самом деле два обновления, но они синхронны прежде, чем потянуть на экран.

, например:


function MyComponent({ ...andItsProps }) {
     useLayoutEffect(()=> {
          console.log('I am about to render!');
     },[]);

     return (<div>some content</div>);
}

преимущество более чем useState с инициализатором/методом set или useEffect - то, хотя оно может вычислить передачу рендеринга, нет никакого фактического перерендеринга к DOM, который заметит пользователь, и оно выполняется прежде первый noticable рендеринг, который не имеет место для useEffect. Оборотная сторона является, конечно, небольшой задержкой Вашего первого рендеринга, так как проверка/обновление должна произойти прежде, чем нарисовать для экранирования. Это действительно зависит от Вашего примера использования, все же.

я думаю лично, useMemo прекрасен в некоторых нишевых случаях, где необходимо сделать что-то тяжелое - пока Вы имеете в виду, что это - исключение по сравнению с нормой.

9
ответ дан 31 October 2019 в 16:51

рычаг useComponentDidMount

В большинстве случаев useComponentDidMount является инструментом для использования. Это будет работать только однажды, после того, как компонент смонтируется (начальный рендеринг).

 const useComponentDidMount = func => useEffect(func, []);

useComponentWillMount

важно отметить, что в компонентах класса componentWillMount считается наследием. Если Вы должны кодировать для выполнения только однажды, компонент смонтировался, можно использовать конструктора. [Еще 116] об этом здесь . Так как функциональный компонент не имеет equivelant конструктора, с помощью рычага для выполнения кода только однажды, компонент монтируется, мог бы иметь смысл в определенных случаях. Можно достигнуть его с пользовательским рычагом.

const useComponentWillMount = func => {
  const willMount = useRef(true);

  if (willMount.current) {
    func();
  }

  useComponentDidMount(() => {
    willMount.current = false;
  });
};

Однако существует ловушка. Не используйте его для асинхронной установки состояния (e.x после запроса к серверу. Поскольку Вы могли бы ожидать, что это будет влиять на рендеринг начальной буквы, который это не будет). Такие случаи должны быть обработаны с useComponentDidMount.

Демонстрация

const Component = (props) => {
  useComponentWillMount(() => console.log("Runs only once before component mounts"));
  useComponentDidMount(() => console.log("Runs only once after component mounts"));
  ...

  return (
    <div>{...}</div>
  );
}

Полная Демонстрация

10
ответ дан 31 October 2019 в 16:51

https://reactjs.org/docs/hooks-reference.html#usememo

Помнит, что функция передала выполнениям useMemo во время рендеринга. Don’t делают что-либо там, что Вы wouldn’t обычно делаете при рендеринге. Например, побочные эффекты принадлежат useEffect, не useMemo.

0
ответ дан 31 October 2019 в 16:51

Я записал пользовательский рычаг, который выполнит функцию однажды первый рендеринг.

использование useBeforeFirstRender.js

import { useState, useEffect } from 'react'

export default (fun) => {
  const [hasRendered, setHasRendered] = useState(false)

  useEffect(() => setHasRendered(true), [hasRendered])

  if (!hasRendered) {
    fun()
  }
}

:

import React, { useEffect } from 'react'
import useBeforeFirstRender from '../hooks/useBeforeFirstRender'


export default () => { 
  useBeforeFirstRender(() => {
    console.log('Do stuff here')
  })

  return (
    <div>
      My component
    </div>
  )
}
2
ответ дан 31 October 2019 в 16:51

Другие вопросы по тегам:

Похожие вопросы: