为什么 React 中使用控制反转不会触发重新渲染

最新推荐文章于 2024-05-29 08:48:58 发布

东方睡衣

最新推荐文章于 2024-05-29 08:48:58 发布

阅读量385

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/web2022050903/article/details/128247084

版权

控制反转，是面向对象编程中的一种设计原则，可以用来减低计算机代码之间的耦合度。

控制反转的应用

首先来看一段常见的 React 代码

import { useState } from "react"

const Father = () => {const [count, setCount] = useState(0);console.log("Father rendered");return (<><p>I am Father p tag, {count}</p><button onClick={() => setCount(count + 1)}>Add Count</button><br /><Children /></>);
};

const Children = () => {console.log("Children rendered");return <p>I am Children p tag</p>;
};

这段代码最终会在屏幕上显示出几个 p 标签，打开 Chrome DevTool 中的 Console，会显示父组件和子组件在首次渲染时的打印。这里父组件和子组件分别对应 Father 和 Children，下文中统称父组件和子组件。