文章后面提到：无论是props还是state的变化都会触发重新渲染。
Props（属性）是组件的配置，也可以说是选项。它们从上层组件接收并且是不可变的。
getInitialState?Props和state是相关的。一个组件的状态通常会成为其子组件的props。Props通过父组件的render方法中作为React.createElement()的第二个参数，或者如果您正在使用JSX，则作为更熟悉的标记属性传递给子组件。
<MyChild name={this.state.childsName} />
父组件中的状态值 childsName 将变为子组件的 this.props.name。从子组件的角度来看，名称属性是不可变的。如果需要更改它，父组件应该只更改其内部状态：
this.setState({ childsName: 'New name' });
而 React 会为您传播它到子级。一个自然的后续问题是：如果子级需要更改其 name 属性怎么办？通常可以通过子事件和父回调来完成这个任务。例如，子组件可能公开一个名为 onNameChanged 的事件。然后，父组件将通过传递回调处理程序来订阅该事件。
<MyChild name={this.state.childsName} onNameChanged={this.handleName} />
孩子组件会通过调用 this.props.onNameChanged('新名字')，将其请求的新名称作为参数传递给事件回调函数，父组件将在事件处理程序中使用该名称来更新其状态。
handleName: function(newName) {
this.setState({ childsName: newName });
}
对于家长与孩子之间的沟通，只需传递props即可。
使用state在控制器视图中存储当前页面所需的数据。
使用props将数据和事件处理程序传递给子组件。
这些列表应该有助于指导您在组件中处理数据时的工作。
Props
State
通过将其与纯 JS 函数相关联，您可以最好地理解它。
简单来说，
State 是组件的本地状态，无法在组件外部访问和修改。它相当于函数中的局部变量。
纯 JS 函数
const DummyFunction = () => {
let name = 'Manoj';
console.log(`Hey ${name}`)
}
React 组件
class DummyComponent extends React.Component {
state = {
name: 'Manoj'
}
render() {
return <div>Hello {this.state.name}</div>;
}
属性（Props），则为组件提供了从其父组件接收数据的能力，使得组件可重复使用。它们相当于函数参数。
普通JS函数
const DummyFunction = (name) => {
console.log(`Hey ${name}`)
}
// when using the function
DummyFunction('Manoj');
DummyFunction('Ajay');
React组件
class DummyComponent extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />
我最喜欢的 props vs state 总结在这里：react-guide 感谢那些人。以下是该页面的编辑版本：
精简版 如果组件在某个时刻需要更改其中一个属性，那么该属性应该成为其状态的一部分，否则它应该只是该组件的一个 prop。
props （短语 properties）是组件的配置。它们从上面接收并且就组件而言是不可变的。一个组件不能更改其 props，但其应负责组合子组件的 props。Props 不仅可以是数据 - 回调函数也可以作为 props 传递。
state 是数据结构，在组件挂载时具有默认值。随着时间推移，它可能会发生变化，主要是由于用户事件的影响。
组件内部管理自己的状态。除了设置初始状态外，组件没有处理其子组件状态的任务。你可以将状态视为该组件的私有属性。
props state
父组件是否可以给它设置初始值？ 可以 可以
父组件是否可以更改它的值？ 可以 不行
是否可以在组件内部设置默认值？* 可以 可以
是否可以在组件内部更改它的值？ 不行 可以
是否可以为子组件设置初始值？ 可以 可以
是否可以在子组件中更改值？ 可以 不行
状态是可选的。因为状态会增加复杂性并减少可预测性，所以没有状态的组件更可取。即使你显然无法在交互式应用中没有状态，你也应该避免有太多具有状态的组件。
无状态组件 只有 props 没有 state。它们的功能除了 render() 函数外几乎没有其他东西。它们的逻辑围绕接收到的 props 进行处理，这使得它们非常容易理解和测试。
有状态组件 既有 props 也有 state。当你的组件必须保留一些状态时，就需要使用它们。这是客户端和服务器通信（XHR、WebSockets 等）、处理数据和响应用户事件的好地方。这些逻辑应该封装在适量的有状态组件中，并且所有可视化和格式化逻辑都应该向下移动到许多无状态组件中。
Props和State的主要区别在于，State是内部状态，由组件自身控制，而Props是外部状态，由渲染组件的内容控制。
function A(props) {
return <h1>{props.message}</h1>
}
render(<A message=”hello” />,document.getElementById(“root”));
class A extends React.Component{
constructor(props) {
super(props)
this.state={data:"Sample Data"}
}
render() {
return(<h2>Class State data: {this.state.data}</h2>)
}
}
render(<A />, document.getElementById("root"));
props（缩写为“属性”）和state都是普通JavaScript对象。虽然它们都保存影响渲染输出的信息，但它们有一个重要的区别：props被传递给组件（类似于函数参数），而state在组件内部管理（类似于在函数内声明变量）。
简单来说，state仅限于当前组件，而props可以传递到任何您希望的组件...您可以将当前组件的state作为prop传递给其他组件...
另外，在React中，我们有无状态组件（stateless components），它们只有props而没有内部状态...
以下示例展示了它们如何在您的应用程序中工作：
父组件（具有状态的组件）：
class SuperClock extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
}
render() {
return (
<div>
<Clock name={this.state.name} date={this.state.date} />
</div>
);
}
}
子组件（无状态组件）：
const Clock = ({name}, {date}) => (
<div>
<h1>{`Hi ${name}`}.</h1>
<h2>{`It is ${date}`}.</h2>
</div>
);
基本上，它们的区别在于状态类似于面向对象编程中的属性： 它是一个组件的局部变量，用于更好地描述它。 Props则类似于参数 - 它们从组件的调用者（父组件）传递给组件： 就像您使用特定参数调用函数一样。
在React中，状态和属性都用于控制组件内的数据，一般情况下，属性是由父组件设置并传递给子组件，并且在整个组件中是不变的。对于将要更改的数据，我们必须使用状态。而属性是不可变的，状态是可变的，如果您想更改属性，可以从父组件中进行更改，然后将其传递给子组件。
根据我在使用React时学到的知识：
props被用于一个组件从外部环境中获取数据，即另一个组件（纯函数、函数式或类）或通用类或JavaScript/TypeScript代码。
状态被用于管理组件的内部环境，即组件内部数据的变化。
Props: Props就是组件的属性，而React组件则是一个JavaScript函数。
class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}
const element = ;
这里的<Welcome name="Sara" />将一个对象{name : 'Sara'}作为Welcome组件的props传递。为了从一个父组件向子组件传递数据，我们使用props。Props是不可变的，在组件的生命周期内，props不应该改变（将其视为不可变）。
状态：状态只能在组件内部访问。为了跟踪组件内的数据，我们使用状态。我们可以通过setState更改状态。如果我们需要将状态传递给子级，则必须将其作为props传递。
class Button extends React.Component {
constructor() {
super();
this.state = {
count: 0,
};
}
updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1 }
});
}
render() {
return (<button
onClick={() => this.updateCount()}
>
Clicked {this.state.count} times
</button>);
}
}