在React类组件中进行分解

Question

是否有另一种方法可以在React Class组件中使用ES6解构，而不必在每种方法中都这样做？

我在constructor ， componentDidMount() ， componentDidUpdate()和render()方法中使用了相同的道具（ this.prop.page ）：

class SinglePage extends React.Component {

  constructor(props) {
    super(props);
    const { page } = this.props;
    //...
  }

  componentDidMount() {
    const { page } = this.props;
    //...
  }

  componentDidUpdate() {
    const { page } = this.props;
    //...
  }

  render() {
    const { page } = this.props;
    return (
     //...
    );
  }
}

exports default SinglePage;

有没有办法做到一次？

Answer 1

是否可以使用带有钩子的最新react版本。 UseEffect将替换didMount和didUpdate，并且也不会使用功能组件来构造函数。 我建议阅读有关useEffect挂钩的本文。 https://overreacted.io/a-complete-guide-to-useeffect/

Answer 2

useEffect可以处理在类组件中使用生命周期方法的情况。 您可以根据需要使用一个或多个。

import React, { useEffect } from React;

function SinglePage({ page }) {

  useEffect(() => {
    // componentDidMount() {
  }, []); // empty array here means it'll only run after the first render

  useEffect(() => {
    // componentDidMount() {
    // componentDidUpdate() {
  }); // no second are means it runs after every render

  useEffect(() => {
    // componentDidMount() {
    // componentDidUpdate() {
  }, [page]); // runs on initial render and whenever `page` changes

  useEffect(() => {
    return () => cancelTheThings(); // componentWillUnMount() {
  }); // return a function from your useEffect function to have it run before unmount

  return {
    //...
  }
}

export default SinglePage;