在 React 中，组件是构建 UI 界面的基本单元。一个组件可以接收来自父组件的属性（props）以及维护自己的内部状态（state）。在本文中，我们将深入探讨这两个概念的含义、用途以及差异。
props
props 是一个组件接收的所有属性的集合。这些属性是不可变的，即组件不应尝试更改它们。通常情况下，props 是从其父组件传递下来的，因此它们提供了组件与其父组件之间的接口。
例如，我们可以创建一个 Greeting 组件：
-------- --------------- - ------ ---------- ------------------- -
该组件会接收一个名为 name 的 props，然后使用它在屏幕上呈现问候语。调用该组件时，我们可以将 name 作为属性传递给它：
--------- ------------ --
这将在屏幕上呈现 "Hello, Alice!"。
在组件内部，我们可以通过 props.name 访问传递的属性。这使得组件更通用，因为它们可以以不同的方式呈现相同的数据，只需接收不同的 props。
state
与 props 不同，state 是组件的内部状态。这是组件自己管理的数据，可以随着时间的推移而更改。当组件的状态更改时，React 将重新呈现该组件。
例如，我们可以创建一个组件，它可以让用户点击一个按钮来增加一个计数器：
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
----------------------- -- -- ------ --------------- - - ----
-
-------- -
------ -
-----
------ ------- ------------------ ---------
------- -------------------------------- -----------
------
--
-
-该组件有一个初始状态 { count: 0 }，并具有一个 handleClick 方法，该方法使用 setState 更新计数器的值。此方法更改了组件的状态，并将新值呈现到页面上。
在组件内部，我们可以通过 this.state.count 访问状态。因为状态可能会更改，所以我们必须将其放在 React 的 state 对象中，并通过 setState 来设置它。
总的来说，props 和 state 两者都用于 React 中的数据管理。然而，它们它们各司其职：props 传递数据，作为组件的输入，而 state 则是用于组件自己内部的状态管理。理解这些概念的有助于写出更具有模块化、可重用性和易于维护的 React 组件。
结论
通过本文章的介绍，我们能够了解 React 中的 props 和 state，以及它们的使用方式。同时，我们也学会了如何在组件中使用组合思想来构建更加灵活的 UI 界面。我们鼓励读者多加练习，并在实践中熟练掌握这两个概念的使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67385c85317fbffedf0fe7fb