React 是一个非常流行的前端框架，它使用组件来构建复杂的界面。在 React 中，组件是拥有自己私有状态（state）和从父组件继承而来的属性（props）的对象。在开发 React 应用程序时，深入理解 props 和 state 的区别非常重要。
Props 和 State 的基本概念
在 React 组件中，props 和 state 是两个非常常见的概念。props 是从父组件传递给子组件的，而 state 是在组件内部定义的。
Props 是组件的属性，一般由外部的组件传值给内部组件使用，props 可以是在组件内部定义的，也可以是父组件传递下来的。父组件通过 props 将数据传递给子组件，这些数据是不可变的。组件只能读取这些数据，不能更改它们。当父组件的 props 改变时，子组件会自动重新渲染并使用新的值。
State 是组件的内部状态，可以在组件内部初始化和更新。state 可以随时被更改，并且在组件内部进行管理。当组件的 state 改变时，它会自动重新渲染。
区别
Props 和 State 之间的区别是状态的可变性。props 必须通过父组件传递，而 state 是在组件内部定义的。props 是只读的，不能更改它们，而 state 可以随时更改。
另一个区别是它们如何影响组件。当 props 改变时，组件刷新并重新渲染。当 state 更改时，组件再次刷新和重新渲染。
在组件生命周期方法中，props 和 state 也扮演着不同的角色。在 componentDidMount() 方法中，我们可以使用 state，但是在 componentWillMount() 方法中不能使用它。相反，在这个早期的生命周中，我们可以使用 props。当 props 或 state 改变时，React 会自动重新渲染组件。
示例如下
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----- ------- --------- -
------------------ -
-------------
---------- - - ------ - - -- --- -----
-
------------------- -
-------------- - ---- ------- ------------------- ------- -- - ----- ------
-
-------------------- -
-------------- - ---- ------- ------------------- ------- -- ----------
-
-------- -
------ -
-----
------ ------- ------------------ ---------- -- -- ----- -
------- ----------- -- --------------- ------ ---------------- - - ----
----- ---
----------- -- ----- -
------
--
-
-上述示例代码中，我们有一个计数器组件，在组件的 state 中定义了一个 count 变量。当用户点击按钮时，组件的计数器值会增加。此外，我们还利用了 componentDidMount() 和 componentDidUpdate() 钩子函数，在组件的生命周期中实时更新标题的值。
总结来看，props 和 state 都是 React 组件中的重要概念，可以使 React 应用程序更加可复用和可扩展。了解它们之间的差异非常重要，因为使用错误的方式来管理它们可能会导致惊人的不良后果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645eded2968c7c53b010d144