10、React 状态交互与组件生命周期全解析

React 状态交互与组件生命周期全解析

1. 状态与属性

状态（states）和属性（properties）都是类的属性，分别对应 this.state 和 this.props 。但它们存在显著差异：
- 可变性 ：状态是可变的，而属性是不可变的。
- 定义位置 ：属性由父组件传递，而状态在组件自身中定义。属性在组件创建时决定视图，之后保持静态；状态由对象设置和更新。
- 作用 ：二者目的不同，但都作为组件类的属性可被访问，有助于构建具有不同表示形式（视图）的组件。可以将属性和状态视为一个函数的输入，函数的输出就是视图，不同的属性和状态组合可以产生不同的 UI。

并非所有组件都需要有状态，接下来将介绍无状态组件如何使用属性。

2. 无状态组件

无状态组件没有状态、组件或其他 React 生命周期事件/方法，其目的仅为渲染视图。它是一个简单的函数，输入为属性，输出为 UI 元素。使用无状态组件的好处在于其可预测性，因为一个输入决定一个输出，这使得它们更易于理解、维护和调试。在 React 开发中，应尽量多使用无状态组件，少使用有状态组件。

以下是一些无状态组件的示例：

// 类形式的无状态组件
class HelloWorld extends React.Component {
    render() {
        return <