React函数组件防止重呈现

Question

我有一个类反应组件，如果浏览器pathName是/exp，它使用函数钩子组件

当页面加载时，我的应用程序组件更改的状态大约是3-4次，

如果道具没有改变，如何防止示例钩子重新安装？

import React, { useState } from 'react';

 function Example() {
  console.log("i mounted")
  }

__

export default class App extends Component {
state={key:"value"}   <--------------------------------------MAIN APP STATE CHANGES 3 times
componentDidMount(){
//I change App state 3 times with conditional code 
}

 render() {
    return (
      <Router>
        <Switch>
        <Route path="/exp">
            <Example prop="I have not changed"  />  <-----------------PREVENT MULTIPLE MOUNTINGS
        </Route>
            </Switch>
         </Router>
         )
}

Answer 1

const Chat = React.memo(props => {
  console.log("Greeting Comp render");
  return <></>
});

export default Chat   
//This worked for me

您可以在道具更改时使用React.memo和呈现。

function MyComponent(props) {
  /* render using props */
}

function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

或

应该更新组件 if类组件

shouldComponentUpdate(nextProps, nextState)

注意:此方法仅作为性能优化而存在。不要依赖它来“防止”渲染，因为这会导致错误。