forceUpdate 与 setState 有什么区别？

在 React 中，我们通常使用 setState 方法来更新组件的状态。但是，有时候我们需要手动强制组件重新渲染，这时就可以使用 forceUpdate 方法。

setState

setState 是 React 中更新组件状态的主要方式。它会触发组件的重新渲染，从而更新组件的 UI。在 setState 中，我们通常可以传递一个对象或一个函数作为参数。

如果传递的是一个对象，则对象中的属性会被浅合并到组件的状态中。例如：

this.setState({
  count: this.state.count + 1
})

如果传递的是一个函数，则函数会接收先前状态作为参数，并返回一个新的状态对象。例如：

this.setState(prevState => ({
  count: prevState.count + 1
}))

注意，因为 setState 可能是异步的，所以不能保证状态立即更新。如果需要在状态更新后执行一些操作，可以使用回调函数：

this.setState({
  count: this.state.count + 1
}, () => {
  console.log('updated')
})

forceUpdate

有时候，我们不想或无法通过 setState 更新组件的状态，但仍希望强制组件重新渲染。这时可以使用 forceUpdate 方法。

forceUpdate 方法会触发 render 方法的调用，从而重新渲染组件。但是，它并不更新组件状态，也不触发 shouldComponentUpdate 方法。所以，使用 forceUpdate 可能会破坏组件的性能优化，不应当滥用。

this.forceUpdate()

区别和注意事项

总的来说，setState 是 React 更新组件状态的主要方式，用于更新状态和重新渲染组件。而 forceUpdate 用于强制重新渲染组件，但不更新状态，可能破坏性能优化，应慎用。

另外，了解一些注意事项：

• 不要滥用 forceUpdate，应优先使用 setState。
• 如果组件的状态依赖于某个属性，应该将这个属性作为 state 中的一部分，并使用 setState 更新。
• 如果组件状态不依赖于任何属性，但需要强制更新，可以考虑使用 key 强制刷新组件。