前端React篇之哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？

176 阅读 0 评论 0 点赞

在React中，组件的重新渲染是一个非常重要的概念。理解哪些情况会导致组件重新渲染，以及在渲染过程中会发生什么，可以帮助开发者更好地优化性能，提升用户体验。本文将详细讨论触发React重新渲染的方法及其过程。

组件状态改变（setState）当组件的状态（state）发生改变时，React会触发重新渲染。无论是通过setState方法显式更新状态，还是通过异步操作（如API请求）修改状态。

```jsx import React, { useState } from 'react';

function Counter() { const [count, setCount] = useState(0);

 return (
   <div>
     <p>当前计数：{count}</p>
     <button onClick={() => setCount(count + 1)}>增加</button>
   </div>
 );

} ```

```jsx function Parent() { const [parentCount, setParentCount] = useState(0);

 return (
   <div>
     <button onClick={() => setParentCount(parentCount + 1)}>父组件增加</button>
     <Child />
   </div>
 );

}

function Child() { console.log('Child rendered'); return

我是子组件

; } ```

```jsx class MyComponent extends React.Component { forceRerender = () => { this.forceUpdate(); };

 render() {
   return (
     <div>
       <p>组件内容</p>
       <button onClick={this.forceRerender}>强制重新渲染</button>
     </div>
   );
 }

} ```

context 和 memo 如果组件使用了React的Context API，任何上下文的变化都会导致使用该上下文的组件重新渲染。此外，使用React.memo包装的组件只有在其props发生变化时才会重新渲染。

```jsx const MyContext = React.createContext();

function MyComponent() { const value = React.useContext(MyContext); return

{value}

; } ```

当组件重新渲染时，React会执行以下步骤：

调用 render 方法
React首先会调用组件的render方法（或函数组件直接执行函数），并生成一个新的虚拟DOM。
比较虚拟DOM（Diff算法）
React使用高效的Diff算法比较新旧虚拟DOM间的差异，找出需要更新的部分。
更新真实DOM
仅将变化的部分更新到真实DOM以提高性能，而不是重新渲染整个DOM。这种局部更新机制使得React能够高效地管理UI。
调用生命周期方法
对于类组件，组件的生命周期方法（如componentDidUpdate）在重新渲染后被调用；对于函数组件，useEffect钩子会在渲染完毕后执行。

理解触发组件重新渲染的条件及过程是开发React应用的重要基础。掌握这些知识能够帮助开发者在写代码时更好地进行性能优化，比如避免不必要的渲染，从而提升应用的响应速度和用户体验。

点赞(0) 打赏