Эквивалент componentDidMount для функции React / компонента Hooks? - PullRequest
Новая
       7

Эквивалент componentDidMount для функции React / компонента Hooks?

0 голосов
/ 27 декабря 2018

Существуют ли способы имитации componentDidMount в функциональных компонентах React, возможно, с помощью хуков?

Ответы [ 4 ]

0 голосов
/ 12 февраля 2019

Для стабильной версии крючков (React Version 16.8.0 +)

Для componentDidMount

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

Для componentDidUpdate

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

ДляcomponentWillUnmount

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

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

const [count, setCount] = useState(0);

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

useEffect(() => {
    // <div>{count}</div>
  }, [count]);

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

0 голосов
/ 27 декабря 2018

Вы хотите использовать useEffect(), который, в зависимости от того, как вы используете функцию, может действовать так же, как componentDidMount ().

Например.Вы можете использовать пользовательское свойство состояния loaded, которое изначально установлено в false, и переключать его в true при рендеринге, и запускать эффект только при изменении этого значения.

Документация

0 голосов
/ 30 декабря 2018

На функциональных компонентах нет componentDidMount, но React Hooks предоставляют способ, которым вы можете эмулировать поведение, используя useEffect hook.

Передайте пустой массив в качестве второго аргумента useEffect() длязапускать только обратный вызов только при монтировании.

Пожалуйста, прочитайте документацию на useEffect. 

function ComponentDidMount() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('componentDidMount');
  }, []);

  return (
    <div>
      <p>componentDidMount: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <ComponentDidMount />
  </div>,
  document.querySelector("#app")
);
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>
0 голосов
/ 27 декабря 2018

Да, методы жизненного цикла, такие как componentDidMount, доступны только в компонентах класса.

Компоненты класса не следует считать устаревшими, даже после появления хуков они останутся существенной частью React.

...