web前端|前端问答 react性能优化是哪个周期函数shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能，如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法，可以极大的提高性能shouldComponentUpdate() 方法格式如下：

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate() 方法会返回一个布尔值，指定 React 是否应该继续渲染，默认值是 true， 即 state 每次发生变化组件都会重新渲染。

shouldComponentUpdate() 的返回值用于判断 React 组件的输出是否受当前 state 或 props 更改的影响，当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。

以下实例演示了 shouldComponentUpdate() 方法返回 false 时执行的操作（点击按钮无法修改）：

class Header extends React.Component {  constructor(props) {    super(props);    this.state = {favoritesite: "runoob"};  }  shouldComponentUpdate() {    return false;  }  changeSite = () => {    this.setState({favoritesite: "google"});  }  render() {    return (      
      
我喜欢的网站是 {this.state.favoritesite}
      修改      
    );  }}ReactDOM.render(
, document.getElementById('root'));

输出结果：

以下实例演示了 shouldComponentUpdate() 方法返回 true 时执行的操作（点击按钮可以修改）：

class Header extends React.Component {  constructor(props) {    super(props);    this.state = {favoritesite: "runoob"};  }  shouldComponentUpdate() {    return true;  }  changeSite = () => {    this.setState({favoritesite: "google"});  }  render() {    return (      
      
我喜欢的网站是 {this.state.favoritesite}
      修改      
    );  }}ReactDOM.render(
, document.getElementById('root'));

输出结果：

点击按钮后：

《react视频教学》