React 是一种流行的 JavaScript 库，用于构建可重用的组件化用户界面。在 React 中，组件有两个非常重要的概念：props 和 state。
props 和 state 是 React 中非常重要的概念，但两者在定义和使用时有很大的区别。在本文中，我们将详细讨论这些概念的区别及其使用场景。
Props
Props 是从父组件传递给子组件的不可变的属性。也就是说，当一个组件从它的父组件中接收一个 prop 后，这个 prop 的值就不能再被它本身修改了。我们可以通过在组件中声明props来接受其传递的值。例如：
function Button(props) {
return <button>{props.label}</button>;
}在上面的例子中，Button 组件接受一个 props 并在按钮上呈现 props.label 的值。
我们可以在组件调用时指定 props 的值。例如：
function App() {
return (
<div>
<Button label="Click me" />
</div>
);
}在上面的例子中，我们将 label 属性设置为 "Click me"。这个值将通过 props 传递到 Button 组件中。
State
State 是组件内部可变的状态。它表示组件在运行时的状态。一个组件可以通过调用 setState() 方法来更新它的状态。例如：
-- -------------------- ---- -------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ -
--
-
-------- -
------ -
-----
-------------------------
------- ----------- -- --------------- ------ ---------------- - - ----
----- --
---------
------
--
-
-在上面的例子中，我们定义一个 Counter 组件，它有一个 count 的状态。我们在组件中声明一个按钮，当点击按钮时，count 状态值会加1。这时我们通过调用 setState() 方法来更新组件的状态。
需要注意的是，我们不能直接修改组件的 state。这是因为当组件的 state 更新时，React 会自动重新渲染组件以反映状态的变化。例如：
this.state.count++; //this is wrong, you can not modify state directly
this.setState({count: this.state.count + 1}); //this is right区别
props 和 state 在 React 中有很大的不同，主要区别如下：
Props 是从父组件传递给子组件的不可变的属性，而 state 代表了组件内部可变的状态。
Props 是只读的，不能在组件中修改 props 的值，而 state 是可以被修改的。但是，我们应该避免直接修改 state。我们应该总是使用 setState() 来更新组件的状态。
Props 是从父组件传递到子组件的，所以 props 是一次性的。也就是说，如果 props 的值发生变化，那么子组件的状态也需要重新渲染。但是，state 是组件内部的一个变量，当其发生变化时，组件也会重新渲染。
使用场景
通常情况下，可以通过以下准则来确定何时使用 props 和 state。
如果某个值是由父组件传递的，并且在组件的生命周期中不会发生变化，那么它应该作为 props 来传递。
如果某个值是在组件内部产生的，并且可能会在组件的生命周期中发生变化，那么它应该作为 state 来维护。
以下是使用 props 和 state 的示例：
-- -------------------- ---- -------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
----- ------
--
-
-------- -
------ -
-----
---------- ----------------------- ------- ----- -- --- ----
----- ---- -- ---------------------- -- ----- ----- -- --- ------
------
--
-
-
----- --- ------- --------------- -
-------- -
------ -
-----
-------- ----------- --
------
--
-
-在上面的例子中，我们定义了一个 Welcome 组件，它接受一个 name 的 props。我们还定义了一个 name 的状态，它的默认值为 "John"。在 Welcome 组件中，我们使用 props 呈现 "Hello, {this.props.name}!"。我们使用 state 呈现 "My name is {this.state.name}." 在 App 组件中，我们将 "Sara" 作为 name props 传递给 Welcome 组件。
总结
props 和 state 是 React 中非常重要的概念。props 是从父组件传递给子组件的不可变的属性，state 是组件内部可变的状态。我们应该始终遵循以下准则以确定何时使用 props 和 state：
如果某个值是由父组件传递的，并且在组件的生命周期中不会发生变化，那么它应该作为 props 来传递。
如果某个值是在组件内部产生的，并且可能会在组件的生命周期中发生变化，那么它应该作为 state 来维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648b00de48841e9894962384