我在看Pluralsight关于React的课程，老师说道具不应该被改变。我现在正在读一篇关于道具vs.国家的文章(uberVU/react-guide)，它说
道具和状态更改都会触发呈现更新。
文章后面说:
Props(属性的缩写)是组件的配置，如果可以的话，是它的选项。它们是从上面接收的，是不可变的。
所以道具可以改变，但它们应该是不可变的? 什么时候应该使用道具，什么时候应该使用状态? 如果你有一个React组件需要的数据，它应该通过道具或设置在React组件通过getInitialState?
当前回答
基本上，区别在于状态类似于OOP中的属性:它是类(组件)的局部属性，用于更好地描述它。道具就像参数一样——它们从组件的调用者(父组件)传递给组件:就像你调用一个带有特定参数的函数一样。
其他回答
状态是react处理组件所持有信息的方式。
假设有一个组件需要从服务器获取一些数据。您通常希望通知用户请求是否正在处理，请求是否失败，等等。这是一条与特定组件相关的信息。这就是状态进入游戏的地方。
通常定义状态的最佳方法如下:
class MyComponent extends React.Component {
constructor() {
super();
this.state = { key1: value1, key2: value2 }
}
}
但是在react native的最新实现中，你可以这样做:
class MyComponent extends React.Component {
state = { key1: value1, key2: value2 }
}
这两个例子以完全相同的方式执行，这只是语法上的改进。
那么，与我们在面向对象编程中总是使用对象属性有什么不同呢?通常，在您的状态中保存的信息并不是静态的，它会随着时间的推移而变化，您的视图需要更新以反映这些变化。State以一种简单的方式提供了此功能。
状态是不可改变的!我再怎么强调也不为过。这意味着什么?这意味着你永远不应该做这样的事情。
state.key2 = newValue;
正确的做法是:
this.setState({ key2: newValue });
使用这个。setState你的组件在更新周期中运行，如果状态的任何部分发生变化，你的组件呈现方法将被再次调用以反映这些变化。
请查看react文档以获得更详细的解释: https://facebook.github.io/react/docs/state-and-lifecycle.html
状态是真相的起源，是您的数据存在的地方。 你可以说这种状态是通过道具表现出来的。
为组件提供支持可以使UI与数据保持同步。 组件实际上只是一个返回标记的函数。
给定相同的道具(用于显示的数据)，它将始终生成相同的标记。
所以这些道具就像是将数据从原点传递到功能组件的管道。
一般来说，一个组件(父组件)的状态是子组件的prop。
State resides within a component where as props are passed from parent to child. Props are generally immutable. class Parent extends React.Component { constructor() { super(); this.state = { name : "John", } } render() { return ( <Child name={this.state.name}> ) } } class Child extends React.Component { constructor() { super(); } render() { return( {this.props.name} ) } }
在上面的代码中，我们有一个父类(parent)，它的状态是name，它被传递给子组件(子类)作为道具，子组件使用{this.props.name}渲染它。
给出最简单的解释，补充上述评论:
根据React的官方文档，他们将“状态”视为
To “remember” things, components use state.
props可以理解为从父组件传递给子组件的变量。
如果你想在应用中记住一些东西，你会使用状态如果你想传递数据，你会使用道具。
让我给你另一个类比，假设你想把你脑子里的前25个自然数的序列相加。
1+2+3+4.....
从1开始，然后加2，现在是3，然后加到现在的总数(6)，然后加4到现在的总数(6)，所以新的总数是10。
当前的总和是程序的状态，假设您需要找到总和的平均值。你要把这个和代入一个方程，然后把这个和作为道具传下去。
希望这能说得通。
state -这是一个特殊的可变属性，保存组件数据。它在Componet挂载时具有默认值。
props -这是一个特殊的属性，本质上是不可变的，用于从父到子的值传递。props只是组件之间的通信通道，总是从顶部(父组件)移动到底部(子组件)。
下面是结合状态和道具的完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>state&props example</title>
<script src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
var TodoList = React.createClass({
render(){
return <div className='tacos-list'>
{
this.props.list.map( ( todo, index ) => {
return <p key={ `taco-${ index }` }>{ todo }</p>;
})}
</div>;
}
});
var Todo = React.createClass({
getInitialState(){
return {
list : [ 'Banana', 'Apple', 'Beans' ]
}
},
handleReverse(){
this.setState({list : this.state.list.reverse()});
},
render(){
return <div className='parent-component'>
<h3 onClick={this.handleReverse}>List of todo:</h3>
<TodoList list={ this.state.list } />
</div>;
}
});
ReactDOM.render(
<Todo/>,
document.getElementById('root')
);
</script>
</body>
</html>
