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

阅读本书更多章节>>>>

目录

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

---

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

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

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

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

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

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

setState()

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

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

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

数据获取和异步操作：当组件依赖的数据发生变化或进行异步操作后返回新的数据时，可以通过setState更新组件的状态，从而触发重新渲染。

条件渲染：通过更新组件的状态，可以实现条件渲染，根据不同的状态值显示不同的内容。

案例需求

假设我们有一个计数器组件，点击按钮后计数器的值会递增。需要实现以下功能：

初始计数器的值为0。点击按钮后，计数器的值加1。将计数器的值显示在页面上。

import React, { useState } from 'react'function App() {  const [count, setCount] = useState(0)  const increment = () => {    setCount(count + 1)  }  return (    <div>      <h1>Counter: {count}</h1>      <button onClick={increment}>增加</button>    </div>  )}export default App

首先，使用React的useState钩子函数声明一个名为count的状态变量，并将其初始值设置为0。创建一个名为increment的函数，当按钮被点击时，这个函数会在当前计数的基础上加1，并通过调用setCount来更新计数器的值。在组件的返回值中，将计数器的值以文本形式显示在页面上，并将increment函数作为按钮的点击事件处理函数。

在调用setState方法时，传入的新状态不会立即生效，而是在下一次React的重新渲染过程中才会生效。React会使用新的状态值重新渲染组件，并只更新需要更新的部分，以提升性能。setState方法可以接受一个对象或一个函数作为参数。当传入一个函数时，React会将当前状态作为参数传递给这个函数，函数返回的结果将作为新的状态值。在使用函数更新状态时，应该使用回调函数的形式确保获取到最新的状态值。例如：setCount(prevCount => prevCount + 1)。

总结

在React中，setState方法用于更新组件的状态，并触发重新渲染。通过setState方法，我们可以根据不同的需求更新组件的状态，使得页面能够及时显示最新的数据和交互效果。在使用setState时，需要注意更新状态的方式和时机，以及遵循React的一些规范和最佳实践，以保证代码的可读性、性能和可靠性。

forceUpdate()

在React中，组件的渲染是由组件的状态（state）和属性（props）驱动的。当组件的状态或属性发生变化时，React会执行重新渲染，更新组件的UI展示。通常情况下，React会根据状态和属性的变化自动触发重新渲染，但有时候我们需要手动触发重新渲染，这时就可以使用forceUpdape()方法。

在实际工作项目中，可能会遇到以下情况需要使用forceUpdate()方法：

当组件的状态更新依赖于外部因素，而不是通过setState()方法触发的。当组件的某些内部状态无法通过setState()来管理，但需要触发重新渲染。

案例需求

假设我们有一个按钮组件，点击按钮时需要在组件内部记录点击次数并重新渲染。我们可以使用forceUpdate()方法实现该功能。

import React, { Component } from 'react'class App extends Component {  constructor(props) {    super(props)    this.state = {      clickCount: 0    }    this.handleButtonClick = this.handleButtonClick.bind(this)  }  handleButtonClick() {    this.state.clickCount += 1 // 修改内部状态    this.forceUpdate() // 强制重新渲染组件  }  render() {    return (      <div>        <button onClick={this.handleButtonClick}>Click Me</button>        <p>Click Count: {this.state.clickCount}</p>      </div>    )  }}export default App

以上代码是一个按钮组件，内部有一个clickCount的状态，记录了按钮被点击的次数。在构造函数中初始化了状态为0，并绑定了按钮的点击事件处理函数handleButtonClick。在handleButtonClick函数中，每次点击按钮时，通过直接修改内部状态clickCount的值来增加点击次数。然后，通过调用forceUpdate()方法，强制执行重新渲染，以便更新UI展示。

使用forceUpdate()方法时，需要谨慎，因为它会绕过React的状态管理机制，可能导致性能问题和不可预测的行为。尽量避免使用forceUpdate()，除非确实有必要。在大多数情况下，应该优先考虑使用setState()来管理组件的状态，并依赖React的自动重新渲染机制。如果组件的状态更新是由组件外部的因素驱动的（例如父组件的状态发生改变），可以通过将状态作为属性传递给内部组件来触发重新渲染，而不是使用forceUpdate()。

总结

forceUpdate()方法是React提供的一种手动触发组件重新渲染的方式。它允许绕过React的自动重新渲染机制，强制执行组件的更新。但需要注意，使用forceUpdate()可能引起性能问题和不可预测的行为，所以应该谨慎使用，并优先考虑使用setState()来管理组件的状态。

props改变

在React中，组件的props是从父组件传递给子组件的数据。当父组件的props发生变化时，子组件会接收新的props，并进行重新渲染。这是因为React会自动比较新旧props的值，并根据变化情况来决定是否重新渲染组件。

在实际工作项目中，我们经常需要根据不同的数据源来渲染不同的组件。当这些数据源发生变化时，我们希望相应的组件能够获取最新的数据，并进行重新渲染，以确保界面的正确展示。

案例需求

假设我们有一个名为User的组件，它接收一个name属性，并将其显示在界面上。我们希望当name属性发生变化时，User组件能够重新渲染，以显示最新的name。

import React, { Component } from 'react'class User extends Component {  render() {    return (      <div>        <h1>Hello, {this.props.name}!</h1>      </div>    )  }}export default User

在另一个父组件中，我们可以通过更改name属性的值来触发User组件的重新渲染。

import React, { Component } from 'react'import User from './User'class App extends Component {  constructor(props) {    super(props)    this.state = {      name: 'John'    }  }  componentDidMount() {    // 模拟异步更新name属性    setTimeout(() => {      this.setState({ name: 'Jane' })    }, 2000)  }  render() {    return (      <div>        <User name={this.state.name} />      </div>    )  }}export default App

在上述代码中，父组件App通过this.state.name的值控制了User组件接收的name属性。初始情况下，name属性的值为’John’。在componentDidMount生命周期方法中，通过设置定时器模拟异步操作，2秒后将name属性的值更改为’Jane’。这会触发User组件的重新渲染，并将新的name值显示在界面上。

当父组件的props发生变化时，子组件会重新渲染，但子组件内部的状态不会受到影响。如果需要在子组件内部响应props的变化，可以使用生命周期方法componentDidUpdate()来进行逻辑处理。在User组件中，使用了this.props.name来获取name属性的值。通过props可以将数据从父组件传递到子组件，并在子组件中使用。在实际应用中，可以根据需要使用不同的生命周期方法来处理props的变化，例如componentDidUpdate()或useEffect()（对应函数式组件）。

总结

React组件在接收到新的props时会进行重新渲染。通过在父组件改变props的值，可以触发子基本概念:
在React中，组件的属性（props）是从父组件传递给子组件的数据。当父组件更新传递给子组件的属性时，子组件会根据新的属性值进行重新渲染。

context改变

在React中，Context API允许我们在组件树中传递数据，而不必手动通过props一层层传递。当使用了Context API，并且某个组件订阅了特定的context值，当该context值发生变化时，订阅了该值的组件会自动重新渲染，以显示最新的数据。

在实际工作项目中，我们可能会使用Context API来传递全局的数据、主题、用户身份认证等信息。当这些全局数据发生变化时，我们希望依赖于这些数据的组件能够及时更新，以反映最新的状态。

案例需求

假设我们有一个主题切换功能，用户可以选择不同的主题来改变应用的外观。我们需要使用Context API来传递当前主题的信息，并在主题发生变化时，自动重新渲染依赖于主题的组件。

import React, { createContext, useState, useContext } from 'react'const ThemeContext = createContext()const App = () => {  const [theme, setTheme] = useState('light')  const toggleTheme = () => {    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'))  }  return (    <ThemeContext.Provider value={{ theme, toggleTheme }}>      <div>        <h1>主题切换器</h1>        <button onClick={toggleTheme}>切换主题</button>        <ThemedContent />      </div>    </ThemeContext.Provider>  )}const ThemedContent = () => {  const { theme } = useContext(ThemeContext)  return (    <div style={{ background: theme === 'light' ? '#f0f0f0' : '#333', color: theme === 'light' ? '#333' : '#f0f0f0' }}>      <p>这是一个主题内容!</p>    </div>  )}export default App

在上述代码中，我们创建了一个ThemeContext，并在App组件中使用useState来管理当前主题的状态。通过ThemeContext.Provider将主题信息传递给子组件。当用户点击按钮切换主题时，会触发toggleTheme函数更新主题状态，从而导致ThemedContent组件重新渲染。

在ThemedContent组件中，通过useContext(ThemeContext)来订阅ThemeContext中的主题信息。根据当前主题的值，动态改变内容区域的背景色和文字颜色，实现主题切换的效果。

使用Context API可以避免props层层传递的繁琐过程，但应该谨慎使用，避免滥用全局状态。当Context值发生变化时，只有订阅了该值的组件会重新渲染，其他未订阅的组件不会受影响。在实际项目中，可以将Context用于管理全局状态、主题、用户认证等共享数据，以提高组件之间的通信和数据传递效率。

总结

使用Context API可以方便地在React应用中传递全局数据，当Context值发生变化时，订阅了该值的组件会重新渲染。在实际工作中，可以根据需要利用Context来管理全局状态，实现组件之间的数据共享和通信。

持续学习总结记录中，回顾一下上面的内容：
在React中，组件的重新渲染可以通过setState()、forceUpdate()、props或state的改变、父组件的重新渲染以及context的改变来触发。当组件重新渲染时，React会执行render方法，生成新的虚拟DOM树。然后，React会比较新旧的虚拟DOM树，找出差异，计算需要更新的部分，最后只更新这些部分到实际的DOM上。这个过程确保了只有必要的部分会被实际更新，从而提高性能和效率。

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-09/156231.html，文章来源：网络cs，作者：言安琪，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！