React重新渲染（有待更新）

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