React——构建高效组件的基石: state，props，refs

React，作为当下最为流行的前端框架之一，以其声明式的编程风格和高效的虚拟 DOM 机制而备受开发者喜爱。React 组件是构建用户界面的基本单元，而 state、props 和 refs 则是组件实例的三个核心属性。理解和掌握这些属性的使用方法和应用场景，对于编写高效、可复用的组件至关重要。

state：组件内部状态管理

state 是 React 组件实例内部的状态，用于存储组件的临时数据或与用户交互产生的动态数据。state 的值在组件的生命周期中可以被改变，当 state 的值发生变化时，组件将重新渲染。

1. state 的使用场景

• 存储与用户交互产生的动态数据，例如表单输入的值、鼠标位置等。
• 存储组件内部的临时状态，例如当前选中的选项、当前显示的页面等。
• 管理组件的动画或过渡效果，通过改变 state 的值来触发动画或过渡。

2. state 的更新方式

• 使用 this.setState() 方法更新 state。
• this.setState() 方法接受一个对象作为参数，其中包含要更新的 state 属性和值。
• this.setState() 方法是异步的，这意味着 state 的值不会立即更新。
• 使用 this.state 访问 state 的值。

props：组件外部属性管理

props 是 React 组件实例从父组件接收的属性，用于向组件传递数据或配置选项。props 是只读的，子组件不能直接修改 props 的值。

1. props 的使用场景

• 传递数据到子组件，例如父组件将数据列表传递给子组件渲染。
• 配置子组件的行为，例如父组件通过 props 控制子组件的显示或隐藏。
• 在组件之间共享状态，例如父组件通过 props 将状态传递给子组件，子组件通过 props 来访问父组件的状态。

2. props 的传递方式

• 在父组件中，使用 <子组件 propName="prop值" /> 语法传递 props。
• 在子组件中，使用 this.props.propName 访问 props 的值。

refs：组件实例的引用

refs 是 React 组件实例的引用，用于在组件实例之间建立联系，或者在组件实例上执行某些操作。refs 不是必需的，只有在需要在组件实例上执行某些操作时才使用。

1. refs 的使用场景

• 在父组件中访问子组件的实例，例如父组件需要调用子组件的方法。
• 在组件实例上执行某些操作，例如获取组件的 DOM 节点、设置焦点或触发动画。

2. refs 的创建方式

• 使用 ref={this.myRef} 语法创建 ref。
• this.myRef 是一个回调函数，在组件实例挂载后被调用。
• 在回调函数中，将组件实例赋值给 this.myRef。

state、props 和 refs 的区别

属性	作用	可变性	来源	访问方式
state	组件内部状态	可变	组件内部	this.state
props	组件外部属性	只读	父组件	this.props
refs	组件实例的引用	不可变	组件实例	this.refs

结论

React 组件实例的三大核心属性：state、props 和 refs，各有其独特的作用和使用场景。理解和掌握这些属性的使用方法和应用场景，对于编写高效、可复用的组件至关重要。