如何在 ReactJS 中不使用 setState() 方法重新渲染组件？

在React中，要重新渲染具有更新状态的基于类的组件，我们通常使用 setState() 方法。但是，我们可以通过两种不同的方式重新渲染组件：

• 通过更换道具

• 通过使用 forceUpdate() 方法

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

方法一（通过改变props）：如果我们将父组件的状态作为prop传递给子组件，并在父组件上调用setState，会导致子组件随着其props的改变而重新渲染。

下面的代码演示了相同的内容。

Javascript

import React, { Component } from "react";
  
class App extends Component {
  constructor(props) {
    super(props);
  
    // Set initial state of parent
    this.state = { category: "Coder" };
  
    // Binding this keyword
    this.updateState = this.updateState.bind(this);
  }
  
  updateState() {
    // Changing state
    this.setState({ category: "Geek" });
  }
  
  render() {
    return (
      

        
        Click me!
      
    );
  }
}
  
class Child extends Component {
  render() {
    return (
      

        
Hi {this.props.category}!
      
    );
  }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

通过更改道具重新渲染子组件

方法二：使用 forceUpdate() 方法会强制重新渲染组件。

注意：尽管 forceUpdate 解决了我们的问题，但建议使用 setState 或更改 props 重新渲染组件，因为 forceUpdate 方法会跳过组件渲染的正确生命周期。有关详细信息，请参阅此。

下面的代码通过强制重新渲染生成 1 到 10 之间的随机数来演示 forceUpdate 的使用：

Javascript

import React, { Component } from "react";
  
class App extends Component {
  reRender = () => {
  
    // force update
    this.forceUpdate();
  };
  
  render() {
    return (
      

        
Random Number Generator
        
Your Number: {Math.floor(Math.random() * 10) + 1}
        Generate!
      
    );
  }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并访问 http://localhost:3000/，您将看到以下输出：

通过 forceUpdate 方法生成一个随机数

笔记：

对于功能组件，我们应该使用 useState 钩子来重新渲染组件。

参考资料： https://reactjs.org/docs/react-component.html#forceupdate