How to prevent subcomponents from rendering in react
React method to prevent child components from rendering: 1. Use "shouldComponentUpdate(nextProps,nextState){...}" to achieve parent component rendering and child components not to render; 2. Use "PureComponent" to prevent child components from rendering. The component does not render; 3. Introduce memo and wrap the hooks with memo.
The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.
How to prevent child components from rendering in react?
React parent component re-renders and child components do not need to be rendered. Three performance optimization methods (PureComponent, memo, shouldComponentUpdate);
//When using React ordinary functions, you can use Two optimization methods, PureComponent and shouldComponentUpdate
//shouldComponentUpdate
//shouldComponentUpdate
class Foo extends Component {
shouldComponentUpdate(nextProps,nextState){
if(nextProps.count===this.props.count){ //传入的count与组件当前props的count比较,count没改变，return false，不渲染
return false //不渲染
}
return true; //渲染
}
render() {
console.log("组件渲染"); //可以看到，当父组件的name改变时，子组件不会打印，只有count改变，才会打印，优化性能
return null
}
}
class App extends Component {
state = {
count: 0,
name: 0
}
render() {
return (
<Fragment>
<Foo count={this.state.count} ></Foo>
<button onClick={() => { this.setState(() => ({ count:this.state.count+1 })) }}>加count</button>
<button onClick={() => { this.setState(() => ({ name: this.state.count+1 })) }}>加name</button>
</Fragment>
)
}
}//PureComponent
//引入PureComponent
import React, { Component, Fragment, PureComponent} from 'react';
//PureComponent，自动比较组件数据是否改变，注意只能比较一层，比如一个对象，对象中的属性改变，他不会重新渲染，只有对象改变，才重新渲染。
class Foo extends PureComponent {
render() {
console.log("组件渲染");
return null
}
}
class App extends Component {
state = {
count: 0,
name: 0
}
render() {
return (
<Fragment>
<Foo count={this.state.count} ></Foo>
<button onClick={() => { this.setState(() => ({ count:this.state.count+1 })) }}>加count</button>
<button onClick={() => { this.setState(() => ({ name: this.state.count+1 })) }}>加name</button>
</Fragment>
)
}
}//hooks Unique optimization method memo
//引入memo
import React, { Component, Fragment, memo } from 'react';
//用memo把hooks包裹即可
const Foo = memo(function Foo(props) {
console.log("组件渲染");
return <div>count:{props.count}</div>
})
class App extends Component {
state = {
count: 0,
name: 0
}
render() {
return (
<Fragment>
<Foo count={this.state.count} ></Foo>
<button onClick={() => { this.setState(() => ({ count:this.state.count+1 })) }}>加count</button>
<button onClick={() => { this.setState(() => ({ name: this.state.count+1 })) }}>加name</button>
</Fragment>
)
}
}recommended Study: "react video tutorial"
The above is the detailed content of How to prevent subcomponents from rendering in react. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1667
14
1426
52
1328
25
1273
29
1255
24
How to install the Windows 10 old version component DirectPlay
Dec 28, 2023 pm 03:43 PM
Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box
PHP, Vue and React: How to choose the most suitable front-end framework?
Mar 15, 2024 pm 05:48 PM
PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.
Angular components and their display properties: understanding non-block default values
Mar 15, 2024 pm 04:51 PM
The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.
How to open the settings of the old version of win10 components
Dec 22, 2023 am 08:45 AM
Win10 old version components need to be turned on by users themselves in the settings, because many components are usually closed by default. First we need to enter the settings. The operation is very simple. Just follow the steps below. Where are the win10 old version components? Open 1. Click Start, then click "Win System" 2. Click to enter the Control Panel 3. Then click the program below 4. Click "Enable or turn off Win functions" 5. Here you can choose what you want to open
Integration of Java framework and front-end React framework
Jun 01, 2024 pm 03:16 PM
Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.
Vue.js vs. React: Project-Specific Considerations
Apr 09, 2025 am 12:01 AM
Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.
Vue component development: Pop-up component implementation method
Nov 24, 2023 am 09:28 AM
Vue component development: pop-up component implementation method Introduction: In front-end development, pop-up component is a common and important component type. It can be used to display interactive content such as prompt information, confirmation or input boxes on web pages. This article will introduce how to use the Vue framework to develop a simple pop-up component and provide specific code examples. 1. Component structure design When designing the structure of the pop-up window component, we need to consider the following elements: Pop-up window title: used to display the title information of the pop-up window. Pop-up window content: used to display the specific content of the pop-up window. bomb
React's Role in HTML: Enhancing User Experience
Apr 09, 2025 am 12:11 AM
React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.
