如何优化 React 组件来渲染它？

ReactJS 主要依赖于 props（传递给它）和组件的状态。因此，为了减少组件渲染的次数，我们可以减少它所依赖的 props 和 state。这可以通过将一个组件的逻辑分成几个单独的子组件来轻松完成。

子组件将管理自己的状态，因此如果任何子组件更改其状态，则不会调用父组件。

为了演示它，我们将创建一个 Demo React App。

第 1 步：通过运行命令创建一个新的 React Native 项目

npx create-react-app demo

第 2 步：现在进入您的项目文件夹，即语言演示。

cd demo

项目结构：它将如下所示。

项目结构

App.js

import logo from "./logo.svg";
import "./App.css";
import React from "react";
import Parent from './screens/parent';
  
function App() {
  
    return (
        

            
        
    );
}
  
export default App;

现在我们将创建 3 个组件Parent.js、Child1.js和Child2.js

父.js

import React, { Component } from "react";
import Child1 from "./child1";
import Child2 from "./child2";
export class parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            countInParent: 0,
        };
    }
    render() {
        console.log("Parent is rendered");
        return (
            

                
Count In Parent {this.state.countInParent}
                 this.setState({ 
                        countInParent: this.state.countInParent + 1 
                    })}
                >
                    button in Parent
                
                
                
            
        );
    }
}
  
export default parent;

Child1.js

import React, { Component } from "react";
  
export class child1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            countInChildOne: 0,
        };
    }
    render() {
        console.log("Child 1 is rendered");
        return (
            

                
Count In Child One {this.state.countInChildOne}
                
                        this.setState({ 
                            countInChildOne: this.state.countInChildOne + 1 
                        })
                    }
                >
                    Button in Child One
                
            
        );
    }
}
  
export default child1;

Child2.js

import React, { Component } from "react";
  
export class child2 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            countInChildTwo: 0,
        };
    }
    render() {
        console.log("Child 2 is rendered");
        return (
            

                
Count In Child Two {this.state.countInChildTwo}
                
                        this.setState({ 
                            countInChildTwo: this.state.countInChildTwo + 1 
                        })
                    }
                >
                    Button In Child Two
                
            
        );
    }
}
  
export default child2;

工作：我们现在有三个组件，分别命名为 Parent.js、Child1.js 和 Child2.js。我们已经在这三个组件中声明了一个计数器状态，还声明了一个按钮来增加计数的值。

1. 当应用程序第一次加载时，所有三个组件都第一次被渲染。
2. 现在，当我们单击 Parent 的 Button 时，父组件的计数器状态会增加 1，这会导致 Parent 组件的渲染，因为 Child1 和 Child2 在同一个组件中渲染，它们也会被渲染。
3. 现在我们点击 Child1 中的 Button，它改变了 Child1 组件的计数器状态，但这次只有 Child1 组件被渲染。这是因为 Parent 和 Child2 组件都与 Child1 呈现逻辑分开。
4. 现在我们点击 Child2 中的 Button，它改变了 Child2 组件的计数器状态，只有 Child2 组件被渲染。这是因为 Parent 和 Child1 组件都与 Child2 呈现逻辑分开。

输出：

因此，我们可以轻松地分离组件和状态以减少渲染。

当我们在一个组件中有多个列表时，它很有用。如果我们只是在同一个组件中渲染每个列表，那么在一个列表中的更改也会导致另一个列表重新渲染。这会减慢应用程序的速度。因此，在其自己的组件中分离每个列表将减少重新渲染。

React 经常抛出“VirtualizedList：你有一个更新缓慢的大列表”的警告，这也可以通过使用单独的组件来渲染每个子级来解决。