React 是一种用于构建用户界面的 JavaScript 库。在 React 中，组件是一个自成体系的单元，包含状态和道具这两个重要概念。状态和道具是 React 中非常重要的概念，它们都可以影响组件的渲染结果，但它们之间存在着一些不同。
状态
状态是组件内部的数据源。当状态发生变化时，React 会自动重新渲染组件，并更新视图。状态只能由组件本身来修改，外部组件无法直接访问和修改状态。
在 React 中，通过使用 useState 钩子函数来声明组件状态：
-- -------------------- ---- -------
------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
-----
--------- -----------
------- ----------------------------------------
------
--
-在上述示例中，Counter 组件内部定义了一个状态 count 和一个修改状态的方法 setCount。每次点击按钮时，状态 count 的值都会加一，然后使用 setCount 方法更新状态，从而触发组件的重新渲染。
道具
道具是组件参数传递的一种方式。它允许父组件向子组件传递数据，并且子组件无法修改这些数据。道具可以是任意类型的值，包括 JavaScript 基本类型、对象和函数等。
在 React 中，通过在组件上使用属性来传递道具：
-- -------------------- ---- -------
-------- --------------- -
------ -
-----
--------- -----------------
------
--
-
-------- ----- -
------ --------- ------------ ---
-在上述示例中，App 组件向 Greeting 组件传递了一个名为 name 的道具。在 Greeting 组件内部，使用 props.name 来获取道具的值并显示在页面上。
状态和道具的不同
状态和道具在 React 中有着重要的区别：
- 状态只能由组件本身来修改，而道具是外部组件传递给组件的参数。
- 状态会触发组件的重新渲染，而道具不会影响组件内部的渲染结果。
- 道具是只读的，组件无法修改它们的值，而状态是可变的，组件可以通过修改状态来改变渲染结果。
总结
在 React 中，状态和道具都是非常重要的概念。状态是组件内部的数据源，可以影响组件的渲染结果，而道具则是组件参数传递的一种方式，用于向子组件传递数据。状态和道具在用途和行为上存在着重要的区别，开发者应该根据具体场景选择使用合适的方式。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8820
