React Force Render简介
在React中，只要状态或道具有任何变化，React组件就会自动重新渲染。因此，例如，所有的用户界面元素都会通过代码中任何地方的状态的简单更新而自动重新渲染。在这个话题中，我们将学习React强制渲染。然而，在某些情况下，render()方法取决于某个数据。所以，在这些情况下，为了重新渲染，我们可以使用下面的方法。
- 组件的setState()方法被调用。
- 调用组件的forceUpdate()方法。
在这篇文章中，我们将通过工作实例来描述这两种方法，以帮助你理解强制渲染的应用。
React强制渲染的工作原理及实例
下面是用下面提到的例子进行的工作
1.setState()方法
如果我们的组件有一个状态，状态可以被更新到它的当前值；this.setState({ state: this.state })被用来更新状态。
例子 #1
下面的例子有一个setState()方法，每次在文本框中提供输入时都会调用该方法。这被称为重新渲染，它有助于更新屏幕上的文本。下面的例子使用了下面图片中提到的文件。
Wishes.js
import React , { Component } from 'react'; import 'bootstrap/dist/css/bootstrap.css'; class Greeting extends Component { state = { fullname: '', } stateChange = (f) => { const {name, value} = f.target; this.setState({ [name]: value, }); } render() { return ( <div className="text-center"> <div className="border border-primary py-3"> <h4> Happy Birthday, {this.state.fullname}!!</h4> <label htmlFor="fullname"> Personalise According to Name: </label> <input type="text" name="fullname" onChange={this.stateChange} /> </div> </div> ); } } export default Greeting;
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import Greeting from './Wishes'; ReactDOM.render(<Greeting />, document.getElementById('root'));
输出。
例子 #2
在下面的例子中，每次点击 "Press this button "时都会调用setState。而按钮的点击次数会被记录下来并显示在屏幕上。setState还根据IST自动显示时间。
使用setState实现React force render的文件在下面的图片中提到。
index.js
import React from "react"; import { render } from "react-dom"; class CounterButton extends React.Component { state = { clickCounter: 0, currentTimestamp: new Date() }; handleClick = () => { this.setState(prevState => { return { clickCounter: prevState.clickCounter + 1 }; }); }; componentDidMount() { setInterval(() => { this.setState({ currentTimestamp: new Date() }); }, 1000); } render() { return ( <div> <h1>Example 2 of setState() method</h1> <p>Indian Standard Time Right Now: {this.state.currentTimestamp.toLocaleString()}</p> <p>Number of Clicks: {this.state.clickCounter}</p> <button onClick={this.handleClick}>Press this Button</button> </div> ); } } render(<CounterButton />, document.getElementById("root"));
输出。
2.forceUpdate()方法
调用forceUpdate()会跳过shouldComponentUpdate()，并导致组件上的render()被调用。
shouldComponentUpdate()用于在不需要应用新的渲染的情况下从更新周期中退出组件。
这启动了子组件的正常循环方法。每当标记被改变时，只有DOM会被React更新。
例子 #1
在下面的例子中，每当加载时都会生成一个随机数。当我们点击按钮时， forceupdate()被调用，它迫使一个随机的新数字得到渲染。
用forceUpdate实现React强制渲染的文件在下面的图片中提到。
RandomNumber.js
import React , { Component } from 'react'; import 'bootstrap/dist/css/bootstrap.css'; class App extends React.Component{ constructor(){ super(); this.forceUpdateHandler = this.forceUpdateHandler.bind(this); }; forceUpdateHandler(){ this.forceUpdate(); }; render(){ return( <div> <h1>REACT FORCE RENDER USING forceUpdate() METHOD</h1> <button onClick= {this.forceUpdateHandler} > CLICK TO FORCE NEW VALUE</button> <h4>Value 1 displayed Randomly : { Math.random() }</h4> <h4>Value 2 displayed Randomly : { Math.random() }</h4> </div> ); } } export default App
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './RandomNumber'; ReactDOM.render(<App />, document.getElementById('root'));
输出。
例子 #2
在下面的例子中，当点击相应的 "Click to Update Value "按钮时，一个随机数会显示在不同的盒子里。而当点击 "Click to Force Render "按钮时，整个盒子的颜色将被改变。
使用forceUpdate实现React强制渲染所使用的文件在下面的图片中提到。
App.js
import React from "react"; import "./styles.css"; import { runForceUpdate, useForceUpdate } from "react-forceupdate"; let nonReactive = { color: "", background: "" }; let Box = ({ children, id }) => { let forceupdateInfo = useForceUpdate(); console.log("sb.io demo", id, forceupdateInfo); let [value, setValue] = React.useState(Date.now()); return ( <div className="box" style={{ background: nonReactive.background }}> <div>Big Box</div> <div> Value should not change on force update: <p>{value}</p> </div> <button onClick={() => { setValue(Date.now()); }} > Click to Update Value </button> {children} <BoxChild /> </div> ); }; let BoxChild = ({ children }) => { let [value, setValue] = React.useState(Date.now()); return ( <div className="box" style={{ color: nonReactive.color }}> <div>mini-box</div> <div>{value}</div> <button onClick={() => { setValue(Date.now()); }} > Click to update Value </button> {children} </div> ); }; export default function App() { let onForceUpdate = () => { nonReactive.background = nonReactive.background === "#409ddb" ? "#fce990" : "#409ddb"; nonReactive.color = nonReactive.color === "#fc3f9e" ? "#2e282b" : "#fc3f9e"; runForceUpdate(); }; return ( <div className="App"> <button className="btn-main" onClick={onForceUpdate}> Click to Force Render </button> <div> <Box id="1"> <Box id="2" /> </Box> </div> <button className="btn-main" onClick={onForceUpdate}> Click to Force Render </button> </div> ); }
index.js
import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; const rootElement = document.getElementById("root"); ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, rootElement ); styles.css * { box-sizing: border-box; margin: 00; padding: 00; } body { min-height: 101vh; padding: 11px; display: flex; flex-wrap: wrap; justify-content: center; _align-items: center; } .App { font-family: times; padding: 21px; outline: 10px solid #ff6b7f; display: inline-block; margin: 1 auto; max-width: 1201px; color: #a32e4d; } button { font-size: 101%; box-shadow: 0 2.5px 11px #bbf060; background: none; border: 10px solid #4df7be; padding: 21px; cursor: pointer; } .btn-main { background: #f7974d; box-shadow: 0 2px 10px #fffa6b; border: 5px solid #cb6bff; } .box { outline: 5px solid #ff6be6; text-align: left; padding: 3px; margin: 3px; display: inline-block; }
输出。
结论
在上述文章的基础上，我们了解了强制渲染的两种方法，即forceUpdate和setState方法。此外，我们通过一些例子，可以帮助你理解这些方法的工作，以及如何在不同的情况下应用它们。
推荐文章
这是一个关于React Force Render的指南。在这里，我们讨论了React Force Render的工作以及例子和输出，这可以帮助你详细地理解。你也可以看看下面的文章来了解更多
