29、React 组件的协调、生命周期与组合应用

React 组件的协调、生命周期与组合应用

1. React 组件的协调与生命周期

在 React 开发中，默认情况下，当 counterLeft 或 counterRight 状态数据值发生变化时，两个 Message 组件都会被渲染，这可能导致其中一个组件不必要地渲染内容。通过实现 shouldComponentUpdate 方法，可以覆盖这种默认行为，确保只有受变化影响的组件才会被更新。当点击应用程序中的按钮时，浏览器的 JavaScript 控制台会显示一条消息，表明 shouldComponentUpdate 阻止了其中一个组件的更新。

以下是相关的日志示例：

Render App Component
shouldComponentUpdate Increment Left Counter: Update Allowed
Render Message Component
Render ActionButton (Increment Left Counter) Component
shouldComponentUpdate Increment Right Counter: Update Prevented

1.1 从属性值设置状态数据

getDerivedStateFromProps 方法在挂载阶段的 render 方法之前以及更新阶段的