Как использовать componentWillMount () в React Hooks?

Согласно responsejs.org, componentWillMount не будет поддерживаться в будущем. https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

Нет необходимости использовать componentWillMount.

Если вы хотите что-то сделать до монтирования компонента, просто сделайте это в конструкторе ().

Если вы хотите выполнять сетевые запросы, не делайте этого в componentWillMount. Это потому, что это приведет к неожиданным ошибкам.

Сетевые запросы можно выполнять в componentDidMount.

Надеюсь, поможет.

обновлено 03.08.2019

Причина, по которой вы запрашиваете componentWillMount, вероятно, связана с тем, что вы хотите инициализировать состояние перед рендерингом.

Просто сделайте это в useState.

const helloWorld=()=>{
    const [value,setValue]=useState(0) //initialize your state here
    return <p>{value}</p>
}
export default helloWorld;

или, может быть, вы хотите запустить функцию в componentWillMount, например, если ваш исходный код выглядит так:

componentWillMount(){
  console.info('componentWillMount')
}

с крючком все, что вам нужно сделать, это удалить метод жизненного цикла:

const hookComponent=()=>{
    console.info('componentWillMount')
    return <p>you have transfered componeWillMount from class component into hook </p>
}

Я просто хочу добавить кое-что к первому ответу о useEffect.

useEffect(()=>{})

useEffect запускается при каждой визуализации, это комбинация componentDidUpdate, componentDidMount и ComponentWillUnmount.

 useEffect(()=>{},[])

Если мы добавим пустой массив в useEffect, он будет запущен сразу после монтирования компонента. Это потому, что useEffect будет сравнивать массив, который вы ему передали. Таким образом, это не обязательно должен быть пустой массив, это может быть массив, который не изменяется. Например, это может быть [1,2,3] или ['1,2']. useEffect по-прежнему работает только при монтировании компонента.

От вас зависит, хотите ли вы, чтобы он запускался только один раз или запускался после каждого рендеринга. Если вы забыли добавить массив, это не опасно, если вы знаете, что делаете.

Я создал образец для крючка. Пожалуйста, проверьте это.

https://codesandbox.io/s/kw6xj153wr

обновлено 21.08.2019

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

useEffect(()=>{},[])

Когда response сравнивает значения, которые вы передали в массив [], он использует для сравнения Object.is(). Если вы передадите ему объект, например

useEffect(()=>{},[{name:'Tom'}])

Это точно так же, как:

useEffect(()=>{})

Он будет повторно визуализироваться каждый раз, потому что, когда Object.is() сравнивает объект, он сравнивает его ссылку, а не само значение. То же самое, почему {} === {} возвращает false, потому что их ссылки разные. Если вы все же хотите сравнить сам объект, а не ссылку, вы можете сделать что-то вроде этого:

useEffect(()=>{},[JSON.stringify({name:'Tom'})])

Обновление от 07.09.2021:

Несколько обновлений о зависимости:

Вообще говоря, если вы используете функцию или объект в качестве зависимости, они всегда будут повторно отрисовываться. Но в React уже есть решение: useCallback и useMemo.

useCallback может запоминать функцию. useMemo может запоминать объект.

См. Эту статью:

https://javascript.plainenglish.io/5-useeffect-infinite-loop-patterns-2dc9d45a253f

Вы не можете использовать какие-либо существующие методы жизненного цикла (componentDidMount, componentDidUpdate, componentWillUnmount и т. д.) В хуке. Их можно использовать только в компонентах класса. А хуки можно использовать только в функциональных компонентах. Строка ниже взята из документа React:

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

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

Код внутри componentDidMount запускается один раз при монтировании компонента. Эквивалент ловушки useEffect для этого поведения:

useEffect(() => {
  // Your code here
}, []);

Обратите внимание на второй параметр (пустой массив). Это будет запускаться только один раз.

Без второго параметра - перехватчик useEffect будет вызываться при каждом рендеринге компонента, что может быть опасным.

useEffect(() => {
  // Your code here
});

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

componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

Крюк-эквивалент приведенного выше кода будет следующим

useEffect(() => {
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])

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

Remember that the function passed to useMemo runs during rendering. Don’t do anything there that you wouldn’t normally do while rendering. For example, side effects belong in useEffect, not useMemo.

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

Например:

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

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

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

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

useComponentWillMount хук

const useComponentWillMount = (cb) => {
    const willMount = useRef(true)

    if (willMount.current) cb()

    willMount.current = false
}

Этот перехватчик может спасти, когда возникает проблема с последовательностью (например, запуск перед другим скриптом). Если это не так, используйте useComnponentDidMount, который больше соответствует парадигме перехватчиков React.

useComponentDidMount хук

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

Если вы знаете, что ваш эффект должен запускаться только один раз в начале, используйте это решение. Он будет запущен только один раз после монтирования компонента.

парадигма useEffect

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

function Post({postID}){
  const [post, setPost] = useState({})

  useEffect(()=>{
    fetchPosts(postID).then(
      (postObject) => setPost(postObject)
    )
  }, [postID])

  ...
}

В приведенном выше примере эффект касается получения содержимого сообщения. Вместо определенного момента времени он имеет значение, от которого зависит - postID. Каждый раз, когда postID получает новое значение (включая инициализацию), он запускается повторно.

Компонент будет смонтировать обсуждение

В компонентах класса componentWillMount считается устаревшим (источник 1, источник2). Это устаревший вариант, поскольку он может запускаться более одного раза, и есть альтернатива - использовать конструктор. Эти соображения не имеют отношения к функциональному компоненту.

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

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.info('Do stuff here')
  })

  return (
    <div>
      My component
    </div>
  )
}

Есть хороший обходной путь для реализации componentDidMount и componentWillUnmount с useEffect.

Согласно документации, useEffect может возвращать функцию «очистки». эта функция не будет вызываться при первом вызове useEffect, только при последующих вызовах.

Следовательно, если мы используем ловушку useEffect вообще без зависимостей, ловушка будет вызываться только тогда, когда компонент смонтирован, а функция "очистки" вызывается, когда компонент размонтирован.

useEffect(() => {
    console.info('componentDidMount');

    return () => {
        console.info('componentWillUnmount');
    };
}, []);

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

Надеюсь это поможет.

Ответ Бена Карпа кажется мне единственно верным.

Но поскольку мы используем функциональные способы, закрытие и HoC может принести пользу другому подходу:

const InjectWillmount = function(Node, willMountCallback) {
  let isCalled = true;
  return function() {
    if (isCalled) {
      willMountCallback();
      isCalled = false;
    }
    return Node;
  };
};

Тогда используйте это:

const YourNewComponent = InjectWillmount(<YourComponent />, () => {
  console.info("your pre-mount logic here");
});

Краткий ответ на ваш вопрос оригинал, как componentWillMount можно использовать с React Hooks:

componentWillMount - это устарело и считается устаревшим. Реагировать на рекомендация:

Generally, we recommend using the constructor() instead for initializing state.

Теперь в Крючок FAQ вы узнаете, что эквивалент конструктора класса для функциональных компонентов:

constructor: Function components don’t need a constructor. You can initialize the state in the useState call. If computing the initial state is expensive, you can pass a function to useState.

Итак, пример использования componentWillMount выглядит так:

const MyComp = () => {
  const [state, setState] = useState(42) // set initial value directly in useState 
  const [state2, setState2] = useState(createInitVal) // call complex computation

  return <div>{state},{state2}</div>
};

const createInitVal = () => { /* ... complex computation or other logic */ return 42; };

Вот так я моделирую конструктор в функциональных компонентах с помощью ловушки useRef:

function Component(props) {
    const willMount = useRef(true);
    if (willMount.current) {
        console.info('This runs only once before rendering the component.');
        willMount.current = false;        
    }

    return (<h1>Meow world!</h1>);
}

Вот пример жизненного цикла:

function RenderLog(props) {
    console.info('Render log: ' + props.children);
    return (<>{props.children}</>);
}

function Component(props) {

    console.info('Body');
    const [count, setCount] = useState(0);
    const willMount = useRef(true);

    if (willMount.current) {
        console.info('First time load (it runs only once)');
        setCount(2);
        willMount.current = false;
    } else {
        console.info('Repeated load');
    }

    useEffect(() => {
        console.info('Component did mount (it runs only once)');
        return () => console.info('Component will unmount');
    }, []);

    useEffect(() => {
        console.info('Component did update');
    });

    useEffect(() => {
        console.info('Component will receive props');
    }, [count]);


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

[Log] Body
[Log] First time load (it runs only once)
[Log] Body
[Log] Repeated load
[Log] Render log: 2
[Log] Component did mount (it runs only once)
[Log] Component did update
[Log] Component will receive props

Конечно, в компонентах класса нет шагов Body, поэтому моделирование 1: 1 невозможно из-за различных концепций функций и классов.

Просто добавьте пустой массив зависимостей в useEffect, он будет работать как componentDidMount.

useEffect(() => {
  // Your code here
  console.info("componentDidMount")
}, []);

Вы можете взломать перехватчик useMemo, чтобы имитировать событие жизненного цикла componentWillMount. Просто сделать:

const Component = () => {
   useMemo(() => {
     // componentWillMount events
   },[]);
   useEffect(() => {
     // componentDidMount events
     return () => {
       // componentWillUnmount events
     }
   }, []);
};

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

Это работает, потому что useMemo не требует фактического возврата значения, и вам не нужно фактически использовать его как что-либо, но поскольку он запоминает значение на основе зависимостей, которые будут запускаться только один раз ("[]") и его поверх нашего компонента, он запускается один раз, когда компонент монтируется раньше всего.

Для большинства это может быть ясно, но имейте в виду, что функция, вызываемая внутри тела функционального компонента, действует как beforeRender. Это не отвечает на вопрос о запуске кода на ComponentWillMount (до первого рендеринга), но поскольку он связан и может помочь другим, я оставляю его здесь.

const MyComponent = () => {
  const [counter, setCounter] = useState(0)
  
  useEffect(() => {
    console.info('after render')
  })

  const iterate = () => {
    setCounter(prevCounter => prevCounter+1)
  }

  const beforeRender = () => {
    console.info('before render')
  }

  beforeRender()

  return (
    <div>
      <div>{counter}</div>
      <button onClick = {iterate}>Re-render</button>
    </div>
  )
}

export default MyComponent

Реагировать на методы жизненного цикла в хуках

для простой визуальной ссылки следуйте этому изображению

Как вы можете просто видеть на картинке выше, для ComponentWillUnmount вам нужно сделать вот так

 useEffect(() => {
    return () => {
        console.info('componentWillUnmount');
    };
   }, []);

Как было сказано в реагировать документ:

You might be thinking that we’d need a separate effect to perform the cleanup. But code for adding and removing a subscription is so tightly related that useEffect is designed to keep it together. If your effect returns a function, React will run it when it is time to clean up:

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

поэтому единственное, что нам нужно, чтобы в хуках был componentWillUnmount, - это возвращать функцию внутри useEffect, как описано выше.

Учитывая это

• componentWillMount устарел (1, 2, 3), и что предлагаемая замена выполняет код в constructor
• код, выполняемый перед оператором возврата функционального компонента, который неявно запускается перед его рендерингом
• грубый эквивалент монтирования компонента класса - это первоначальный вызов функционального компонента
• цель состоит в том, чтобы выполнить некоторый код один раз, прежде чем пользовательский интерфейс будет обновлен

Решение было бы

Запуск функции в теле функционального компонента только один раз. Это может быть достигнуто с помощью useState, useMemo или useEffect, в зависимости от времени, необходимого для варианта использования.

Поскольку код должен быть запущен до того, как начальный рендеринг будет зафиксирован на экране, это дисквалифицирует useEffect, поскольку «функция, переданная в useEffect, будет запущена после того, как рендеринг будет зафиксирован на экране». 4.

Поскольку мы хотим гарантировать, что код будет запускаться только один раз, это дисквалифицирует useMemo, поскольку «В будущем React может решить« забыть »некоторые ранее запомненные значения и пересчитать их при следующем рендеринге» 5.

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

Пример с useState:

const runOnceBeforeRender = () => {};

const Component = () => {
  useState(runOnceBeforeRender);

  return (<></>);
}

В качестве кастомного крючка:

const runOnceBeforeRender = () => {};

const useOnInitialRender = (fn) => {
  useState(fn);
}

const Component = () => {
  useOnInitialRender(fn);

  return (<></>);
};

Функция runOnceBeforeRender может дополнительно возвращать состояние, которое будет доступно сразу после первого рендеринга функции, не вызывая повторных рендерингов.

Итак, для хуков React я думаю, что нужно объявить вашу логику до того, как оператор return сможет работать. У вас должно быть состояние, для которого по умолчанию установлено значение true. В моем случае я вызвал состояние componentWillMount. Затем условие для запуска блока кода, когда это состояние истинно (блок кода содержит логику, которую вы хотите выполнить в вашем componentWillMount), последний оператор в этом блоке должен сбрасывать componentWillMountState на false (этот шаг важен, потому что если это не делается, будет происходить бесконечный рендеринг) Пример

// do your imports here

const App = () =>  {
  useEffect(() => {
    console.info('component did mount')
  }, [])
  const [count, setCount] = useState(0);
  const [componentWillMount, setComponentWillMount] = useState(true);
  if (componentWillMount) {
    console.info('component will mount')
    // the logic you want in the componentWillMount lifecycle
    setComponentWillMount(false)
  }
  
  return (
    <div>
      <div>
      <button onClick = {() => setCount(count + 1)}> 
        press me
      </button>
      <p>
        {count}
      </p>
      
      </div>
    </div>
  )
}

Возможно, это не точная альтернатива методу componentWillMount, но вот метод, который можно использовать для достижения той же цели, но с помощью useEffect:

Сначала инициализируйте объект, из которого вы извлекаете данные, пустым значением и определите метод useEffect:

const [details, setDetails] = useState("")

  useEffect(() => {
    retrieveData(); 
  }, []);

const retrieveData = () => {       
       getData()                  // get data from the server 
      .then(response => {
        console.info(response.data);
        setDetails(response.data)
      })
      .catch(e => {
        console.info(e);
      })
  }

Теперь в JSX, куда мы возвращаемся, добавляем теренарный оператор

*return(
  <div>
    { 
   details ? (
   <div class = "">
   <p>add Your Jsx Here</p>
</div>
): (
  <div>
<h4>Content is still Loading.....</h4>
</div>
)
}
  </div>
)*

Это гарантирует, что до тех пор, пока в объекте «детали» не будут данные, будет загружена вторая часть теренарного оператора, который, в свою очередь, запускает метод useEffect, который приводит к установке данных, полученных от сервера, в объекте «детали», следовательно, рендеринг основной JSX

Просто поместите массив зависимостей в React.useEffect () в качестве второго аргумента. Если какая-либо из зависимостей обновится, ловушка вызовет побочный эффект, который запустится и в конечном итоге обновит ваш компонент.

Компонент React - это функция, верно? Так что просто позвольте моменту componentWillMount быть телом функции перед оператором return.

function componentWillMountMomentIsHere() {
  console.info('component will mount')
}


function AnyComponent(){
  const [greeting, setGreeting] = useState('Hello')

  componentWillMountMomentIsHere()

  
  return <h1>{greeting}</h1>
}