Question

在我的reactjs项目中，组件呈现两次。如果删除componentDidMount，则此问题已解决。但是我在项目中需要它。我在Internet上尝试了解决方案，但没有。

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来编写子组件，该shouldComponentUpdate通过对属性和状态进行浅比较来实现export default class Home extends PureComponent { render() { console.log("Render"); return ( <div> <h1>console.log render twice</h1> </div> ); } }。

{{1}}

Working demo

Answer 2

如果您不希望在App运行Home时重新渲染，尝试在Home组件中实现shouldComponentUpdate。

shouldComponentUpdate(){
return false;
}

ReactJS渲染两次

2 个答案: