Question

以下代码的目标是在表中呈现从可观察到的报价。我有两个版本的代码，一个是使用hooks和useEffect的react函数，另一个是使用setState和componentDidMount和componentWillUnmount的react类。使用react功能时，引号根本不会显示。使用react类，该表会不断更新。如果我在功能上做错了，那是什么？如果我正确使用它，钩子和useEffect不能正常工作，以及componentDidMount / willUnmount可以正常工作有什么区别？

功能：

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

班级：

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

Answer 1

据我所知，您正在尝试在安装组件时订阅SymbolsObservable，并在取消安装组件时取消订阅RxJS订阅。

因此，react挂钩中的等效项是对useEffect挂钩使用empty dependency array：

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

useEffect和componentDidMount / componentWillUnmount之间有什么区别？钩子和this.setState有什么区别？

1 个答案: