目录
哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？setState()案例需求总结 forceUpdate()案例需求总结 props改变案例需求总结 context改变案例需求总结
哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？
在React中，以下方法会触发重新渲染：
setState()：当调用组件的setState方法并传入新的状态值时，React会触发重新渲染。forceUpdate()：可以强制组件重新渲染，不管组件的状态是否发生变化。props改变：当组件接收到新的props时，它会进行重新渲染。context改变：如果使用了context API，在context值发生变化时，会触发依赖于该context的组件重新渲染。当React组件重新渲染时，render方法会执行以下操作：
总的来说，重新渲染过程包括对比虚拟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 AppuseState钩子函数声明一个名为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可以方便地在React应用中传递全局数据，当Context值发生变化时，订阅了该值的组件会重新渲染。在实际工作中，可以根据需要利用Context来管理全局状态，实现组件之间的数据共享和通信。
持续学习总结记录中，回顾一下上面的内容：
在React中，组件的重新渲染可以通过setState()、forceUpdate()、props或state的改变、父组件的重新渲染以及context的改变来触发。当组件重新渲染时，React会执行render方法，生成新的虚拟DOM树。然后，React会比较新旧的虚拟DOM树，找出差异，计算需要更新的部分，最后只更新这些部分到实际的DOM上。这个过程确保了只有必要的部分会被实际更新，从而提高性能和效率。