了解 React 重渲染机制

最新推荐文章于 2023-11-22 22:35:16 发布

法克瓜

最新推荐文章于 2023-11-22 22:35:16 发布

阅读量1k

点赞数 1

分类专栏：学习笔记文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_39607677/article/details/127427247

版权

核心概念

首先，要贯彻一个思想：

唯有 State 改变才会引入 React 重渲染

也就是说，其实 props 和 context 的改变并不会导致重渲染。其实是他们的父级组件 state 改变了，导致所有后代组件都进行了一次重渲染。考虑一个这样的组件结构：

import React from "react";

function App() {
   
  return (
    <>
      <Counter />
      <footer>
        <p>Copyright 2022 Big Count Inc.</p>
      </footer>
    </>
  );
}

function Counter() {
   
  const [count, setCount] = React.useState(0);

  return (
    <main>
      <BigCountNumber count={
   count} />
      <button onClick