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

目录

哪些方法会触发 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. 数据获取和异步操作：当组件依赖的数据发生变化或进行异步操作后返回新的数据时，可以通过setState更新组件的状态，从而触发重新渲染。
3. 条件渲染：通过更新组件的状态，可以实现条件渲染，根据不同的状态值显示不同的内容。

案例需求

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

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

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

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

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

总结

在React中，

setState

方法用于更新组件的状态，并触发重新渲染。通过

setState

方法，我们可以根据不同的需求更新组件的状态，使得页面能够及时显示最新的数据和交互效果。在使用

setState

时，需要注意更新状态的方式和时机，以及遵循React的一些规范和最佳实践，以保证代码的可读性、性能和可靠性。

forceUpdate()

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

forceUpdape()

方法。

在实际工作项目中，可能会遇到以下情况需要使用

forceUpdate()

方法：

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

案例需求

假设我们有一个按钮组件，点击按钮时需要在组件内部记录点击次数并重新渲染。我们可以使用

forceUpdate()

方法实现该功能。

import React,{ Component }from'react'classAppextendsComponent{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>)}}exportdefault App

以上代码是一个按钮组件，内部有一个

clickCount

的状态，记录了按钮被点击的次数。在构造函数中初始化了状态为0，并绑定了按钮的点击事件处理函数

handleButtonClick

。在

handleButtonClick

函数中，每次点击按钮时，通过直接修改内部状态

clickCount

的值来增加点击次数。然后，通过调用

forceUpdate()

方法，强制执行重新渲染，以便更新UI展示。

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

总结

forceUpdate()

方法是React提供的一种手动触发组件重新渲染的方式。它允许绕过React的自动重新渲染机制，强制执行组件的更新。但需要注意，使用

forceUpdate()

可能引起性能问题和不可预测的行为，所以应该谨慎使用，并优先考虑使用

setState()

来管理组件的状态。

props改变

在React中，组件的

props

是从父组件传递给子组件的数据。当父组件的

props

发生变化时，子组件会接收新的

props

，并进行重新渲染。这是因为React会自动比较新旧

props

的值，并根据变化情况来决定是否重新渲染组件。

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

案例需求

假设我们有一个名为

User

的组件，它接收一个

name

属性，并将其显示在界面上。我们希望当

name

属性发生变化时，

User

组件能够重新渲染，以显示最新的

name

。

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

在另一个父组件中，我们可以通过更改

name

属性的值来触发

User

组件的重新渲染。

import React,{ Component }from'react'import User from'./User'classAppextendsComponent{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>)}}exportdefault App

在上述代码中，父组件

App

通过

this.state.name

的值控制了

User

组件接收的

name

属性。初始情况下，

name

属性的值为’John’。在

componentDidMount

生命周期方法中，通过设置定时器模拟异步操作，2秒后将

name

属性的值更改为’Jane’。这会触发

User

组件的重新渲染，并将新的

name

值显示在界面上。

1. 当父组件的props发生变化时，子组件会重新渲染，但子组件内部的状态不会受到影响。如果需要在子组件内部响应props的变化，可以使用生命周期方法componentDidUpdate()来进行逻辑处理。
2. 在User组件中，使用了this.props.name来获取name属性的值。通过props可以将数据从父组件传递到子组件，并在子组件中使用。
3. 在实际应用中，可以根据需要使用不同的生命周期方法来处理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()constApp=()=>{const[theme, setTheme]=useState('light')consttoggleTheme=()=>{setTheme(prevTheme=>(prevTheme ==='light'?'dark':'light'))}return(<ThemeContext.Provider value={{ theme, toggleTheme }}><div><h1>主题切换器</h1><button onClick={toggleTheme}>切换主题</button><ThemedContent /></div></ThemeContext.Provider>)}constThemedContent=()=>{const{ theme }=useContext(ThemeContext)return(<div style={{background: theme ==='light'?'#f0f0f0':'#333',color: theme ==='light'?'#333':'#f0f0f0'}}><p>这是一个主题内容!</p></div>)}exportdefault App

在上述代码中，我们创建了一个

ThemeContext

，并在

App

组件中使用

useState

来管理当前主题的状态。通过

ThemeContext.Provider

将主题信息传递给子组件。当用户点击按钮切换主题时，会触发

toggleTheme

函数更新主题状态，从而导致

ThemedContent

组件重新渲染。

在

ThemedContent

组件中，通过

useContext(ThemeContext)

来订阅

ThemeContext

中的主题信息。根据当前主题的值，动态改变内容区域的背景色和文字颜色，实现主题切换的效果。

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

总结

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

持续学习总结记录中，回顾一下上面的内容：
**在React中，组件的重新渲染可以通过

setState()

、

forceUpdate()

、props或state的改变、父组件的重新渲染以及context的改变来触发。当组件重新渲染时，React会执行

render

方法，生成新的虚拟DOM树。然后，React会比较新旧的虚拟DOM树，找出差异，计算需要更新的部分，最后只更新这些部分到实际的DOM上。这个过程确保了只有必要的部分会被实际更新，从而提高性能和效率。**