我在看Pluralsight关于React的课程，老师说道具不应该被改变。我现在正在读一篇关于道具vs.国家的文章(uberVU/react-guide)，它说
道具和状态更改都会触发呈现更新。
文章后面说:
Props(属性的缩写)是组件的配置，如果可以的话，是它的选项。它们是从上面接收的，是不可变的。
所以道具可以改变，但它们应该是不可变的? 什么时候应该使用道具，什么时候应该使用状态? 如果你有一个React组件需要的数据，它应该通过道具或设置在React组件通过getInitialState?
当前回答
我最喜欢的道具vs状态总结在这里:反应指南向这些家伙致敬。以下是该页面的编辑版本:
道具vs状态
如果一个组件需要在某个时间点改变它的一个属性，这个属性应该是它状态的一部分，否则它应该只是该组件的一个道具。
道具
道具(属性的简称)是组件的配置。它们是从上面接收的，对于接收它们的组件来说是不可变的。组件不能更改它的道具，但它负责将其子组件的道具组合在一起。道具不一定只是数据——回调函数可以作为道具传递进来。
状态
状态是一个数据结构，在组件挂载时以默认值开始。它可能会随着时间发生变化，主要是由于用户事件。
组件在内部管理自己的状态。除了设置一个初始状态外，它没有权利修改它的子进程的状态。您可以将状态概念化为该组件的私有状态。
改变道具和状态
props state
Can get initial value from parent Component? Yes Yes
Can be changed by parent Component? Yes No
Can set default values inside Component?* Yes Yes
Can change inside Component? No Yes
Can set initial value for child Components? Yes Yes
Can change in child Components? Yes No
注意，从父组件接收到的props和state初始值都会覆盖组件内部定义的默认值。
这个组件应该有状态吗?
状态是可选的。由于状态增加了复杂性并降低了可预测性，因此最好使用没有状态的组件。即使在交互式应用程序中你显然不能没有状态，你也应该避免有太多的状态组件。
组件类型
无状态组件只有道具，没有状态。除了render()函数之外，没有什么事情要做。他们的逻辑围绕着他们得到的道具展开。这使得它们非常容易遵循和测试。
有状态组件包括道具和状态。当您的组件必须保持某种状态时使用这些。这是客户端-服务器通信(XHR、web套接字等)、处理数据和响应用户事件的好地方。这些类型的逻辑应该封装在适量的有状态组件中，而所有的可视化和格式化逻辑应该向下移动到许多无状态组件中。
来源
关于“props”和“state”的问题-谷歌组 React中的思考:确定你的状态应该在哪里
其他回答
简而言之。
道具值不能改变[不可变] 使用setState方法[mutable]可以改变状态值
摘自:Andrea Chiarelli的书《开始React:用React简化前端开发工作流，增强应用程序的用户体验》:
Every React component has a props property. The purpose of this property is to collect data input passed to the component itself. JSX attribute is attached to a React element, a property with the same name is attached to the props object. So, we can access the passed data by using the attached property. In addition, the immutability of props allows us to think of components as pure functions, which are functions that have no side effects (since they don't change their input data). We can think of data passing from one component to another as a unidirectional data flow, from the parent component toward the child components. This gives us a more controllable system.
React provides a mechanism to support the automatic rendering of a component when data changes. Such a mechanism is based on the concept of state. React state is a property that represents data that changes over time. Every component supports the state property, but it should be used carefully. Components that store data that can change over time are said to be stateful components. A stateful component stores the state in the this.state property. To inform a component that the state has changed, you must use the setState() method. State initialization is the only case where you can assign a value to the this.state property without using setState().
setState()将新数据与已包含在状态中的旧数据合并，并覆盖先前的状态 setState()会触发render()方法的执行，所以永远不要显式地调用render()
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>
状态驻留在组件中，作为道具从父组件传递给子组件。 道具通常是不可变的。
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}渲染它。
一般来说，一个组件(父组件)的状态是子组件的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}渲染它。
