<think>我们正在讨论
React.memo在函数组件中如何比较props。根据引用，我们可以总结如下：
1
. React.memo是一个高阶组件，用于包装函数组件以避免不必要的重新渲染。
2
. 它通过比较前后props的变化来决定是否重新渲染组件。
3
. 默认情况下，
React.memo会对props进行浅比较（shallow compar
ison）。
4
. 开发者也可以自定义比较函数作为第二个参数，以控制比较逻辑。
### 浅比较机制
浅比较意味着
React.memo会检查前后props的每一个属性是否相等（使用Object
.is比较）。如果所有属性都相等，则不会重新渲染；否则，会重新渲染。
需要注意的是，对于引用类型的属性（如对象、数组），浅比较只比较引用（即内存地址），而不比较内容。因此，即使对象的内容相同，如果引用不同，也会被认为是不同的props，导致组件重新渲染。
### 自定义比较函数
如果默认的浅比较不满足需求，我们可以提供第二个参数，这是一个比较函数，其签名如下：
```javascript
(prevProps, nextProps) => boolean
```
- 如果返回`true`，则表示props相等，组件不会重新渲染。
- 如果返回`false`，则表示props不相等，组件会重新渲染。
注意：这个函数的逻辑与`shouldComponentUpdate`相反。在`shouldComponentUpdate`中，返回`true`表示要更新，而在这里，返回`true`表示不需要更新（因为props相等）。
### 使用场景和注意事项
1
. **使用场景**：
- 当组件接收的props经常不变，但父组件的重新渲染会导致子组件也跟着重新渲染时，使用
React.memo可以避免这种不必要的渲染。
- 当组件渲染成本较高（例如，包含大量计算或复杂的DOM结构）时，使用
React.memo可以提升性能。
2
. **注意事项**：
- **引用类型props**：如果传递的是对象或数组，并且它们在父组件每次渲染时被重新创建（即使内容相同），那么浅比较会认为props发生了变化。为了避免这种情况，可以使用`use
Memo`或`useCallback`来缓存这些引用类型的值。
- **不要过度使用**：因为
React.memo本身也有比较的开销，所以不应该在所有组件上都使用。通常只在性能关键路径上的组件使用。
- **配合useCallback和use
Memo**：当props中包含回调函数或复杂数据结构时，确保这些值被记忆化，以避免因为父组件重新渲染时重新创建而导致子组件不必要的重新渲染。
### 示例代码
以下是一个使用
React.memo的示例，其中包含了自定义比较函数和use
Memo的使用：
```jsx
import
React, {
memo, useState, use
Memo } from '
react';
// 子组件
const ChildComponent =
memo(({ l
ist, onClick }) => {
console
.log('ChildComponent rendered');
return (
<div>
<ul>
{l
ist
.map(item => <li key={item}>{item}</li>)}
</ul>
<button onClick={onClick}>Click me</button>
</div>
);
}, (prevProps, nextProps) => {
// 自定义比较：只有当l
ist的长度和onClick引用不变时，才认为props相等
return prevProps
.l
ist
.length === nextProps
.l
ist
.length &&
prevProps
.onClick === nextProps
.onClick;
});
// 父组件
function ParentComponent() {
const [count, setCount] = useState(0);
const [items, setItems] = useState([1, 2, 3]);
// 使用use
Memo记忆化列表，避免每次渲染都创建新的数组（除非items改变）
const
memoizedL
ist = use
Memo(() => items, [items]);
// 使用useCallback记忆化回调函数，避免每次渲染都创建新函数
const handleClick = useCallback(() => {
console
.log('Button clicked');
}, []); // 依赖数组为空，表示该回调不会改变
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment count: {count}</button>
<button onClick={() => setItems([
...items, items
.length + 1])}>Add item</button>
<ChildComponent l
ist={
memoizedL
ist} onClick={handleClick} />
</div>
);
}
```
在这个例子中：
- `ChildComponent`被`
React.memo`包裹，并且提供了自定义比较函数。该函数比较`l
ist`的长度和`onClick`函数的引用。
- 在父组件中，`
memoizedL
ist`通过`use
Memo`缓存，只有当`items`改变时才会更新。
- `handleClick`通过`useCallback`缓存，确保它在父组件重新渲染时保持不变。
这样，当父组件因为`count`状态改变而重新渲染时，`ChildComponent`的props（`
memoizedL
ist`和`handleClick`）不会改变，因此子组件不会重新渲染。
### 总结
使用
React.memo时，props的比较机制可以通过默认的浅比较或自定义比较函数来控制。对于引用类型的props，需要配合`use
Memo`和`useCallback`来确保其稳定性，以避免不必要的重新渲染。
§§相关问题§§
1
. 在什么情况下使用
React.memo可能导致性能反而下降？
2
. 如何避免因传递新的回调函数而导致的子组件重新渲染？
3
. React.memo和类组件的PureComponent有什么异同？</think>###
React.memo 的 Props 比较机制详解
在
React 函数组件中，`
React.memo` 通过以下机制比较前后 props 来决定是否重新渲染组件：
#### 1
. **默认行为：浅比较（Shallow Compar
ison）**
当不提供第二个参数时，`
React.memo` 会对新旧 props 进行浅比较：
```jsx
const
MemoizedComponent =
React.memo(MyComponent);
```
- **比较规则**：
- 基本类型（字符串、数字等）直接比较值
- 引用类型（对象、数组）比较内存地址
- 即使对象内容相同，只要引用地址不同即视为 props 变化
- **示例场景**：
```jsx
function Parent() {
const [count, setCount] = useState(0);
// 每次渲染都会创建新数组（新引用）
const items = [1, 2, 3];
return (
<>
<button onClick={() => setCount(c => c+1)}>Render</button>
<
MemoizedChild items={items} /> // 每次点击都会重新渲染
</>
);
}
```
#### 2
. **自定义比较函数**
通过第二个参数可覆盖默认比较逻辑：
```jsx
const
MemoizedComponent =
React.memo(
MyComponent,
(prevProps, nextProps) => {
// 返回 true 表示跳过渲染（props "相等"）
return prevProps
.id === nextProps
.id;
}
);
```
- **典型用例**：
- 仅比较特定关键属性（如 ID）
- 深比较特定嵌套对象（需自行实现）
- 忽略不影响渲染的 props 变化
#### 3
. **引用类型 Props 的陷阱与解决方案**
当传递对象/数组/函数时需特别注意：
- **问题**：父组件每次渲染创建新引用 → 触发子组件重新渲染
- **解决方案**：
```jsx
function Parent() {
const [count, setCount] = useState(0);
// 用 use
Memo 缓存数组
const items = use
Memo(() => [1, 2, 3], []);
// 用 useCallback 缓存函数
const handleClick = useCallback(() => {}, []);
return (
<
MemoizedChild
items={items}
onClick={handleClick}
/>
);
}
```
通过 `use
Memo` 和 `useCallback` 保持引用稳定[^3][^4]。
#### 4
. **性能优化实践**
| 场景 | 推荐方案 |
|------|----------|
| 基本类型 props | 直接使用 `
React.memo` |
| 对象/数组 props | `use
Memo` + `
React.memo` |
| 函数 props | `useCallback` + `
React.memo` |
| 复杂比较逻辑 | 自定义比较函数 |
#### 5
. **注意事项**
1
. **不要过度优化**：仅在高开销组件或频繁渲染场景使用
2
. **浅比较局限**：无法检测对象/数组内部变化
3
. **引用稳定性**：配合 `use
Memo/useCallback` 才能发挥最大效果
4
. **新 props 引用**：即使内容相同，新引用也会触发渲染[^3]
> 示例：引用类型导致的渲染
> ```jsx
> // 父组件
> const App = () => {
> const [count, setCount] = useState(0);
> const arr = [1, 2, 3]; // 每次渲染新建数组
>
> return (
> <>
> <
MemoChild l
ist={arr} />
> <button onClick={() => setCount(c => c+1)}>Render</button>
> </>
> );
> };
>
> // 子组件 (即使内容相同也会重新渲染)
> const
MemoChild =
React.memo(({ l
ist }) => {
> console
.log("子组件渲染!"); // 每次点击都会打印
> return <div>{l
ist
.join(",")}</div>;
> });
> ```
> 通过 `use
Memo` 修复：
> ```jsx
> const arr = use
Memo(() => [1, 2, 3], []); // 引用保持稳定
> ```
### 总结流程图
```mermaid
graph TD
A[父组件渲染] --> B{传递新 props}
B -->|基本类型| C[值比较]
B -->|引用类型| D[引用地址比较]
C --> E{值相等?}
D --> F{地址相等?}
E -->|是| G[跳过渲染]
E -->|否| H[执行渲染]
F -->|是| G
F -->|否| H
```
博客给出解决办法，需将 React 升级到 16.6.0 以上，版本要求为“^16.6.0”，聚焦于 React 版本升级问题。
扫一扫
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
