《为什么React会重新渲染》

原文地址：Why React Re-Renders

React的核心循环

• 每个React重新渲染都始于状态变化。这是组件重新渲染的唯一“触发器”
• 组件重新渲染时，它也会重新渲染其所有子组件

误解

1. 每次状态变量变化时，整个应用都会重新渲染。实际上，只有拥有该状态的组件及其子组件会重新渲染。
2. 组件会因为其 props 变化而重新渲染。实际上， props 的变化并不是重新渲染的原因，而是状态变化导致的子组件重新渲染。

Why？

React 的主要工作是保持应用 UI 与 React 状态同步。重新渲染的目的是 找出需要改变什么

创建纯净组件

• React.memo 和 React.PureComponent 允许我们忽略某些重新渲染请求。
• 使用 memoization 技术，如果组件的 props 没有变化， React 会用旧的快照而不是生成一个新的。

上下文

• 上下文对于组件重新渲染的行为没有太大影响。如果组件的状态通过上下文提供给所有子组件，无论如何这些组件都会重新渲染
• 对于纯组件，上下文类似于 ”不可见的 props“

有时候即使没有明显的变化，纯组件也会重新渲染，这是因为组件是 JavaScript 函数，每次渲染都会重新创建函数内部定义的任何东西。例如:

function App() {
	const user = {
		name: 'Y',
		age: 12
	}
	return (
		<User user={user} />
	)
}