如何在不改变状态的情况下重新渲染组件| React forceUpdate方法

在react应用中，State和props被用来保存组件的数据。

如果一个组件的状态/道具改变了，会发生什么？

通常状态会通过setState方法和新的状态对象来改变其值。

每当状态发生变化时，React框架都会进行以下一系列步骤

• 调用shouldComponentUpdate方法
• 如果shouldComponentUpdate包含条件逻辑，返回false，这意味着不调用render方法，如果返回true，则调用render方法
• 最后重新加载组件

这是一个在点击按钮时重新渲染组件的例子，因为点击按钮会更新状态。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };

  }
  onClick = () => {
    //this.forceUpdate();
    this.setState({ counter: 1 })

  };

  render() {
    console.log('Render called');

    return (
       {this.state.counter}

        Click

      
    )
  }
}

export default App;

如何在不改变状态的情况下重新呈现一个组件？

这意味着，在重新渲染一个组件时，不调用程序化的setState change。

forceUpdate方法被用在一个组件中，尽管这种方法在react架构中是被避免的。

如果在React组件中调用forceUpdate，会发生什么？

• shouldComponentUpdate方法被忽略了
• 它调用重新渲染组件，无论shouldComponentUpdate是否返回true/false。

import './App.css';
import { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };

  }
  onClick = () => {
    this.forceUpdate();

  };

  render() {
    console.log('Render called');

    return (
       {this.state.counter}

        Click

      
    )
  }
}

export default App;

以上是react组件中forceUpdate的一个例子。