在React类组件中进行分解

Question

Is there another way of using ES6 destructuring in a React Class component without having to do it in each method?

I am using the same prop ( this.prop.page ) in the constructor , componentDidMount() , componentDidUpdate() and render() methods:

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;

Is there a way of do it just once?

Answer 1

There is if you can use latest react version with hooks. UseEffect will replace didMount and didUpdate and also no constructor with functional component. I recommend to read this article about useEffect hook. https://overreacted.io/a-complete-guide-to-useeffect/

Answer 2

useEffect is there to handle the cases you would use lifecycle methods for in class components. You can use one or more, depending on your needs.

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;