В чем разница между useEffect и componentDidMount / componentWillUnmount? В чем разница между хуками и this.setState? - PullRequest
Новая
       11

В чем разница между useEffect и componentDidMount / componentWillUnmount? В чем разница между хуками и this.setState?

0 голосов
/ 18 июня 2020

Цель следующего кода - отобразить цитаты, полученные от наблюдаемого объекта, в таблице. У меня есть две версии кода: одна - функция реакции с использованием хуков и useEffect, а другая - класс реакции с использованием setState, componentDidMount и componentWillUnmount. С функцией реакции кавычки вообще не отображаются. С классом реакции таблица постоянно обновляется. Если я делаю что-то не так с функцией, что это? Если я использую его правильно, в чем разница между хуками и useEffect в том, что он не работает, и componentDidMount / willUnmount в том, что он работает?

function: 

function DisplayQuotes() {
  const [storedQuotes, setQuotes] = useState({});
  useEffect(() => {
    let subscription = SymbolsObservable.subscribe(setQuotes);
    return () => subscription.unsubscribe();
  }, [storedQuotes, setQuotes]);
  return (
    <div>
      <QuotesTable values={storedQuotes} />
    </div>
  );
}

class: 

class DisplayQuotes extends React.Component {
  constructor(props) {
    super(props);
    this.state = { storedQuotes: {} };
  }
  componentDidMount() {
    this.subscription = SymbolsObservable.subscribe((quotes) =>
      this.setState({ storedQuotes: quotes })
    );
  }
  componentWillUnmount() {
    this.subscription.unsubscribe();
  }
  render() {
    return (
      <div>
        <QuotesTable values={this.state.storedQuotes} />
      </div>
    );
  }
}

1 Ответ

0 голосов
/ 18 июня 2020

Из того, что я вижу, вы пытаетесь подписаться на SymbolsObservable, когда компонент смонтирован, и отписаться от подписки Rx JS, когда компонент отключен.

Следовательно, эквивалент для он в перехватчиках реакции будет использовать пустой массив зависимостей для перехватчика useEffect: 

useEffect(() => {
  let subscription = SymbolsObservable.subscribe(setQuotes);
  return () => subscription.unsubscribe();
}, []);
...