来自 React 文档。
从概念上讲，组件就像JavaScript函数。他们接受 任意输入(称为"props"(并返回描述的 React 元素 屏幕上应该显示的内容。
考虑到：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
或
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
将使我们能够做到这一点：
<Welcome name="Luke" />;
<Welcome name="Leia" />;
在DOM中随心所欲地使用，
你好，卢克
你好， 莱娅
现在，当人们规定道具不应该更改时，在我看来，原因与更改图像标签的属性值相同是有道理的吗？
.HTML：
<img id="Executor" alt="Picture of Executor" src="/somepath/vaders-star-destroyer-executor.jpg"/>
.JS：
与此同时，在很久以前在一个遥远的星系中的Javascript文件中......
var imageOfVadersStarDestroyer = document.getElementById('Executor');
imageOfVadersStarDestroyer.src = "/somepath/vaders-star-destroyer-avenger.jpg"
因为如果我们不断更改元素属性值，这可能会导致混乱和渲染速度变慢？
那么，之所以规定永远不要在 React 中更改道具，是因为库是否试图使元素尽可能可预测？
在React 之外设置道具很危险，应该避免。为什么？主要原因是它不会触发重新渲染。因此会出现错误和意外行为。
重新渲染
大多数时候，props 是作为状态存储在父组件中的数据，通过调用setState()(或React.useState()返回的第二个函数(进行操作。调用setState()后，React 会使用最新的 props 和状态重新渲染并计算引擎盖下发生的变化。手动为 props 赋值，因此不会通知 React 数据已更改，必须重新渲染某些内容。
良好做法
将 props 设为只读可以让 React 组件尽可能纯净，即使在编写普通 JS 时，这显然也是一个很好的做法。数据不会意外更改，只能通过调用setState()来完成(您可能听说过单一事实来源，这是 React 试图利用的(。
想象一下，您注意到应用程序中出了点问题，并且向最终用户显示的数据与源完全不同，试图找出数据纵的位置会很痛苦，不是吗？ :)
从不更改 React 中的道具
意味着你永远不应该做this.props.name = "userName"因为 React 的单向数据绑定，propsread only，要更新组件的 props，你应该从父级传递一个函数来执行此操作(在父级中(，或者调度一个动作，如果你使用的是 Redux，props中的更改将触发重新渲染
在这种情况下props是一个常量。您将始终在组件中需要它。 但是有一种更干净的方法来编写甚至省略它。
使用函数表达式
的常规方式(与您的示例相同(
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
ES6 对象销毁 - 显式
function Welcome(props) {
const {name} = pros
return <h1>Hello, {name}</h1>;
}
ES6 对象破坏 - 更简洁、更清洁的方式
function Welcome({name}) {
return <h1>Hello, {name}</h1>;
}
当然，您可以使用需要使用this.props.yourAttr的类方式。 但是，在 create-react-app 的新版本 3 中，将类组件更改为功能组件。你可以在Github上看到这个确切的修改 这里.
您可能需要在此处链接的旧的和好的MDN中了解有关析构赋值的更多信息，或者在此处学习数组和对象解构的深入方法。