Question

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

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

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

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;

在React类组件中进行分解

1 个答案: