React重新渲染是什么？
React重新渲染指的是已经在屏幕上的组件的第二次和任何连续渲染。React重新渲染时，在类函数中，会重新执行render函数。通常，用户与应用程序交互、通过异步请求或某些订阅模型传入的一些外部数据会发生重新渲染。
为什么要重新渲染？
为了展示最新的、维持一致的UI。
什么情况会重新渲染？
组件自身重新渲染的情况可以分为四种：状态更改、父（或子）重新渲染、上下文更改,hooks更改。（也有别的分法）
状态变化
当组件的状态变化时，React需要改变UI，使其和新的状态同步。通常发生在回调 or useEffect hook
const Component = () => {
const [state, setState] = useState();
return ...
};
父（或子）组件重新渲染
组件重新渲染时，其子组件也会重新渲染，不论这个子组件是否接收了一个prop
const Parent = () => {
rturn <Child />
};
context 变化
当Context Provider中的值发生变化时，所有使用此Context的组件都将重新渲染。
const useValue = useContext(Context)
const Component1 = () => {
const value = useValue();
return ...
}
const Component2 = () => {
const value = useValue();
return ...
}
Context中的value发生改变的根本原因还是状态改变，当通过Context传递的状态发生改变时，订阅这个Context的所有子组件也都要重新渲染。
hooks 变化
hooks内发生的所有事情都“属于”使用它的组件，本质上也是一种状态变化。
总结：重新渲染看似是四种情况但其实是两种原因
第一种：状态改变
第二种：forceUpdate
React class组件，可以使用继承自React.Component的forceUpdate方法更新一个组件：
class MyComponent extends React.Component {
handleInput() {
this.forceUpdate();
}
}
如果一颗 React 树中所有的 class 组件都没有使用 forceUpdate 方法，那么状态改变是这颗 React Tree 内部发生更新的唯一原因。
参考：
1.https://blog.skk.moe/post/react-re-renders-101/
2. https://www.developerway.com/posts/react-re-renders-guide
|