Як використовувати компонентWillMount () в React Hooks?

В офіційних документах React це згадується -

Якщо ви знайомі з методами життєвого циклу класу React, ви можете подумати про використанняEffect Hook як компонентDidMount, компонентDidUpdate та компонентWillUnmount.

Моє запитання - як ми можемо використовувати componentWillMount()метод lifecyle в гачку?

Ви не можете використовувати будь-якого з існуючих методів життєвого циклу ( componentDidMount, componentDidUpdate, і componentWillUnmountт.д.) в гаку. Їх можна використовувати лише в класних компонентах. А з гачками можна використовувати лише функціональні компоненти. Рядок нижче походить від документа React:

Якщо ви знайомі з React методи життєвого циклу класу, ви можете думати про useEffectгачку componentDidMount, componentDidUpdateі в componentWillUnmountпоєднанні.

Ви можете імітувати цей метод життєвого циклу з класового компонента у функціональні компоненти.

Код всередині 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', () => {})
  }
}, [])

useComponentDidMount гачок

У більшості випадків useComponentDidMountце інструмент для використання. Він запуститься лише один раз після встановлення компонента (початкове візуалізація).

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

useComponentWillMount

Важливо зазначити, що в класі компоненти componentWillMountвважаються застарілими. Якщо вам потрібен код для запуску лише один раз, перш ніж компонент змонтується, ви можете використовувати конструктор. Більше про це тут . Оскільки функціональний компонент не має еквівалентного конструктора, використання гачка для запуску коду лише один раз, перш ніж компоненти компонентів можуть мати сенс у певних випадках. Ви можете досягти цього за допомогою спеціального гачка.

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

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

  willMount.current = false;
};

Однак є і підводний камінь. Не використовуйте його для асинхронного встановлення свого стану (наприклад, після запиту сервера. Так як ви можете очікувати, що це вплине на початкове відображення, яке не буде). Такі справи мають бути вирішені 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>
  );
}

Повна демонстрація

За інформацією reactjs.org, компонентWillMount надалі не підтримуватиметься. https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

Немає необхідності використовувати компонентWillMount.

Якщо ви хочете щось зробити перед монтуванням компонента, просто зробіть це в конструкторі ().

Якщо ви хочете робити мережеві запити, не робіть цього в компонентWillMount. Це тому, що це призведе до несподіваних помилок.

Мережеві запити можна виконувати в компонентDidMount.

Сподіваюся, це допомагає.

оновлено 03.03.2019

Причина, чому ви запитуєте компонентWillMount, ймовірно, полягає в тому, що ви хочете ініціалізувати стан перед рендерінгами.

Просто зробіть це в useState.

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

або, можливо, Ви хочете запустити функцію в компонентWillMount, наприклад, якщо ваш початковий код виглядає так:

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

за допомогою гачка, все, що вам потрібно зробити, - це видалити спосіб життєвого циклу:

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

Я просто хочу додати щось до першої відповіді про useEffect.

useEffect(()=>{})

useEffect працює на кожному візуалізації, це комбінація компонентівDidUpdate, компонентDidMount та ComponentWillUnmount.

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

Якщо ми додамо порожній масив у useEffect, він запускається саме тоді, коли компонент встановлений. Це тому, що UseEffect порівняє масив, який ви передали йому. Таким чином, він не повинен бути порожнім масивом. Це може бути масив, який не змінюється. Наприклад, це може бути [1,2,3] або ['1,2']. useEffect все ще працює лише при встановленні компонента.

Від вас залежить, чи хочете ви, щоб він запускався лише один раз або працює після кожного візуалізації. Це не небезпечно, якщо ви забули додати масив, поки ви знаєте, що робите.

Я створив зразок для гачка. Будь ласка, перевірте це.

https://codesandbox.io/s/kw6xj153wr

оновлено 21.08.2019

Це було білим з моменту написання вищезгаданої відповіді. Я думаю, що на це потрібно звернути увагу. Коли ви використовуєте

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

Коли react порівнює значення, які ви передали масиву [], він використовує Object.is () для порівняння. Якщо ви передаєте йому об’єкт, наприклад

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

Це точно те саме, що:

useEffect(()=>{})

Він буде повторно відображатися кожен раз, оскільки коли Object.is () порівнює об'єкт, він порівнює його посилання, а не саме значення. Це те саме, що чому {} === {} повертає помилкові, оскільки їх посилання різні. Якщо ви все ще хочете порівнювати сам об'єкт не з посиланням, ви можете зробити щось подібне:

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

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

наприклад:

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

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

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

Я думаю, що особисто useMemoце добре в деяких нішевих випадках, коли вам потрібно зробити щось важке - доки ви пам’ятаєте, що це виняток проти норми.

Ось так я моделюю конструктор у функціональних компонентах за допомогою useRefгачка:

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

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

Ось приклад життєвого циклу:

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

function Component(props) {

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

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

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

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

    useEffect(() => {
        console.log('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 через різні концепції функцій та класів.

Я написав спеціальний гачок, який запустить функцію один раз перед першим візуалізацією.

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>
  )
}

Існує приємний спосіб вирішити componentDidMountі componentWillUnmountз ним useEffect.

Виходячи з документації, useEffectможна повернути функцію "очищення". ця функція не буде використовуватися під час першого useEffectдзвінка, лише при наступних дзвінках.

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

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

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

Виклик функції повернення очищення викликається лише тоді, коли компонент відключений.

Сподіваюся, це допомагає.

Ви можете зламати гачок useMemo, щоб імітувати подію життєвого циклу компонента WillMount. Просто зробіть:

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

Вам потрібно буде тримати гачок useMemo перед тим, що взаємодіє з вашою державою. Це не так, як це задумано, але воно працювало на мене для всіх проблем компонента WillMount.

Це працює, тому що useMemo не вимагає фактичного повернення значення, і вам не потрібно використовувати його як будь-що, але оскільки воно запам'ятовує значення, засноване на залежностях, яке запускатиметься лише один раз ("[]") і його поверх нашого компонента запускається один раз, коли компонент монтується раніше всього.

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

Пам'ятайте, що функція, передана для використанняMemo, виконується під час надання. Не робіть нічого, чого зазвичай не робили під час візуалізації. Наприклад, побічні ефекти належать до використанняEffect, а не до використанняMemo.

Відповідь Бен Карпа здається мені єдиною справедливою.

Але оскільки ми використовуємо функціональні способи, від закриття та HoC може бути корисний інший підхід:

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

Потім використовуйте його:

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

Коротка відповідь на ваше первісне запитання, як componentWillMountможна користуватися React Hooks:

componentWillMountє застарілим і вважається спадщиною . Реагувати рекомендації :

Як правило, ми рекомендуємо використовувати конструктор () замість цього для ініціалізації стану.

Тепер у FAQ Hook ви дізнаєтесь, що таке еквівалент конструктора класів для функціональних компонентів:

конструктор: Функціональні компоненти не потребують конструктора. Ви можете ініціалізувати стан у виклику useState. Якщо обчислення початкового стану дороге, ви можете передати функцію 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; };

Просто додайте порожній масив залежностей у useEffect, він буде працювати componentDidMount.

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

Існує простий трюк для імітації componentDidMountта componentWillUnmountза допомогою useEffect:

useEffect(() => {
  console.log("componentDidMount");

  return () => {
    console.log("componentWillUnmount");
  };
}, []);