React Hooks Async Best Practice - PullRequest
Новая
       8

React Hooks Async Best Practice

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

Теперь при использовании useEffect s вместо componentDidMount в React Component with Hooks есть замена.

Сценарий «Первоначальный уникальный вызов серверу»:

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

это означает, что это лучшая практикаto getData 

useEffect(() => {
  console.log("useEffect, fetchData here");
}, []);

Рекомендуется ли использовать [] в качестве параметра DependencyList для отключения сервера, запрашивающего каждое изменение состояния?

Ссылка на github https://github.com/facebook/react/issues/14326

Ответы [ 2 ]

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

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

Однако, если вы, например, отображаете страницу профиля пользователя, где каждая страница имеет состояние / проповеди userID,Вы должны передать этот идентификатор в качестве значения во второй параметр useEffect, чтобы данные были повторно получены для нового идентификатора пользователя.componentDidMount здесь недостаточно, так как компонент может не нуждаться в перемонтировании, если вы переходите непосредственно от пользователя A к профилю пользователя B.

Традиционным способом классов вы должны сделать: 

componentDidMount() {
  this.fetchData();
}

componentDidUpdate(prevProps, prevState) {
  if (prevState.id !== this.state.id) {
    this.fetchData();
  }
}

Для хуков это будет: 

useEffect(() => {
  this.fetchData();
}, [id]);

Попробуйте запустить приведенный ниже код и посмотрите результат.Например, измените id на 2, чтобы увидеть, что useEffect запускается снова. 

function Todo() {
  const [todo, setTodo] = React.useState(null);
  const [id, setId] = React.useState(1);
  
  React.useEffect(() => {
    if (id == null || id === '') {
      return;
    }
    
    fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
      .then(results => results.json())
      .then(data => {
        setTodo(data);
      });
  }, [id]); // useEffect will trigger whenever id is different.

  return (
    
       setId(e.target.value)}/>
      

      {JSON.stringify(todo, null, 2)}
);} ReactDOM.render (, document.querySelector ('# app')); 
<script src="https://unpkg.com/react@16.8.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.1/umd/react-dom.development.js"></script>

<div id="app"></div>

Вы должны прочитать о useEffect, чтобы вызнать, что вы можете / не можете делать с этим.

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

Да.Это лучший подход.

Из реакции документы :

Передача в пустом массиве [] входных данных сообщает React, что ваш эффект не зависит от каких-либо значений компонента, так что эффект будет работать только при монтировании и очищаться при размонтировании;обновления не запускаются.

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

...