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

目录

• 哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？
• • setState()
  • • 案例需求
    • 总结
  • forceUpdate()
  • • 案例需求
    • 总结
  • props改变
  • • 案例需求
    • 总结
  • context改变
  • • 案例需求
    • 总结

---

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

在React中，以下方法会触发重新渲染：

1. setState()：当调用组件的setState方法并传入新的状态值时，React会触发重新渲染。
2. forceUpdate()：可以强制组件重新渲染，不管组件的状态是否发生变化。
3. props改变：当组件接收到新的props时，它会进行重新渲染。
4. context改变：如果使用了context API，在context值发生变化时，会触发依赖于该context的组件重新渲染。

当React组件重新渲染时，render方法会执行以下操作：

1. 比较虚拟DOM：React会比较前后两次渲染生成的虚拟DOM树，找出差异。
2. 计算需要更新的部分：React会确定哪些部分需要进行实际的DOM更新。
3. 应用更新：React将只更新需要更改的部分，而不是整个DOM树。这种优化称为“协调”（Reconciliation）。
4. 调用生命周期方法：如果有需要，React会调用相应的生命周期方法，如componentDidUpdate，以便进行一些额外的操作。

总的来说，重新渲染过程包括对比虚拟DOM、计算更新部分以及应用更新，以确保只有必要的部分会被实际更新，从而提高性能和效率。

setState()

setState是React组件中用于更新状态的方法。当调用setState并传入新的状态值时，React会自动比较新旧状态的差异，并执行相应的更新操作。

在实际工作项目中，setState通常用于处理以下需求：

1. 用户交互：当用户与页面进行交互时，组件的状态可能需要更新，如表单输入、按钮点击等。

2. 数据获取和异步操作：当组件依赖的数据发生变化或进行异步操作后返回新的数据时，可以通过setSt