讲清楚 React 的重新渲染

React 的重新渲染发生在组件的状态或属性更新时。当组件的状态或属性更新时，React 会自动比较新旧属性和状态，并决定是否重新渲染组件。

以下是一个简单的例子，演示了当组件的状态更新时会发生重新渲染：

import React, { useState } from 'react';
 
function ExampleComponent() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
 
export default ExampleComponent;

在这个例子中，ExampleComponent 有一个状态变量 count，用于记录按钮被点击的次数。当用户点击按钮时，setCount 函数被调用，并传递 count + 1 作为新的状态值，React 会自动比较新旧 count 值，并决定是否重新渲染组件。

如果你想阻止不必要的重新渲染，可以使用 React.memo 高阶组件或者使用函数组件中的 React.useMemo 钩子。

例如，使用 React.memo 来记录只有在 prop 更改时才更新的组件：

import React from 'react';
 
function ExpensiveComponent(props) {
  return <div>{props.value}</div>;
}
 
export default React.memo(ExpensiveComponent, (prevProps, nextProps) => {
  // 仅当 `value` 属性更改时，才会重新渲染组件
  return prevProps.value === nextProps.value;
});

在这个例子中，ExpensiveComponent 只会在其 value prop 更改时重新渲染，避免不必要的计算或 DOM 更新。