Reactjs 渲染两次

Question

在我的 reactjs 项目中，组件被渲染了两次。如果我删除 componentDidMount，问题就解决了。但我在我的项目中需要它。我尝试了网上的解决方案，但我不能。

App.js

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: []
    };
  }
  componentDidMount() {
    fetch("https://reqres.in/api/users?page=2")
      .then(res => res.json())
      .then(result => {
        this.setState({
          users: result.data
        });
      });
  }

  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" render={() => <Home />} />
        </Switch>
      </BrowserRouter>
    );
  }
}

Home.js

export default class Home extends Component {
  render() {
    console.log("Render");
    return (
      <div>
        <h1>console.log render twice</h1>
      </div>
    );
  }
}

https://codesandbox.io/s/wyjk931z6l

console.log 在 Home.js 上工作两次。

Answer 1

您的 App 组件会重新渲染，因为您在 componentDidMount 中进行的 API 调用会导致 setState 成功。因此，即使它们的道具没有改变，子组件也会重新渲染。为了避免这种情况，您可以通过扩展 React.PureComponent 来编写子组件，它通过浅比较 props 和 state 来实现 shouldComponentUpdate。

export default class Home extends PureComponent {
  render() {
    console.log("Render");
    return (
      <div>
        <h1>console.log render twice</h1>
      </div>
    );
  }
}

Working demo