我在看Pluralsight关于React的课程，老师说道具不应该被改变。我现在正在读一篇关于道具vs.国家的文章(uberVU/react-guide)，它说
道具和状态更改都会触发呈现更新。
文章后面说:
Props(属性的缩写)是组件的配置，如果可以的话，是它的选项。它们是从上面接收的，是不可变的。
所以道具可以改变，但它们应该是不可变的? 什么时候应该使用道具，什么时候应该使用状态? 如果你有一个React组件需要的数据，它应该通过道具或设置在React组件通过getInitialState?
当前回答
状态是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
其他回答
React props和state之间的主要区别是props是不可变的，一旦组件接收到一个props，它就不能改变它的值，而在另一方面，React state是可变的，组件可以根据需要的时间自由改变它的值。
Props:表示“只读”数据，是不可变的，引用父组件的属性。
状态:表示可变数据，它最终会影响页面上呈现的内容，并由组件本身内部管理，通常会由于用户输入而不断更改。
Basically, props and state are two ways the component can know what and how to render. Which part of the application state belongs to state and which to some top-level store, is more related to your app design, than to how React works. The simplest way to decide, IMO, is to think, whether this particular piece of data is useful for application as a whole, or it's some local information. Also, it's important to not duplicate state, so if some piece of data can be calculated from props - it should calculated from props.
For example, let's say you have some dropdown control (which wraps standart HTML select for custom styling), which can a) select some value from list, and b) be opened or closed (i.e., the options list displayed or hidden). Now, let's say your app displays a list of items of some sort and your dropdown controls filter for list entries. Then, it would be best to pass active filter value as a prop, and keep opened/closed state local. Also, to make it functional, you would pass an onChange handler from parent component, which would be called inside dropdown element and send updated information (new selected filter) to the store immediately. On the other hand, opened/closed state can be kept inside dropdown component, because the rest of the application doesn't really care if the control is opened, until user actually changes it value.
下面的代码是不完全工作，它需要css和处理下拉单击/模糊/改变事件，但我想保持示例最小。希望这有助于理解其中的区别。
const _store = {
items: [
{ id: 1, label: 'One' },
{ id: 2, label: 'Two' },
{ id: 3, label: 'Three', new: true },
{ id: 4, label: 'Four', new: true },
{ id: 5, label: 'Five', important: true },
{ id: 6, label: 'Six' },
{ id: 7, label: 'Seven', important: true },
],
activeFilter: 'important',
possibleFilters: [
{ key: 'all', label: 'All' },
{ key: 'new', label: 'New' },
{ key: 'important', label: 'Important' }
]
}
function getFilteredItems(items, filter) {
switch (filter) {
case 'all':
return items;
case 'new':
return items.filter(function(item) { return Boolean(item.new); });
case 'important':
return items.filter(function(item) { return Boolean(item.important); });
default:
return items;
}
}
const App = React.createClass({
render: function() {
return (
<div>
My list:
<ItemList items={this.props.listItems} />
<div>
<Dropdown
onFilterChange={function(e) {
_store.activeFilter = e.currentTarget.value;
console.log(_store); // in real life, some action would be dispatched here
}}
filterOptions={this.props.filterOptions}
value={this.props.activeFilter}
/>
</div>
</div>
);
}
});
const ItemList = React.createClass({
render: function() {
return (
<div>
{this.props.items.map(function(item) {
return <div key={item.id}>{item.id}: {item.label}</div>;
})}
</div>
);
}
});
const Dropdown = React.createClass({
getInitialState: function() {
return {
isOpen: false
};
},
render: function() {
return (
<div>
<select
className="hidden-select"
onChange={this.props.onFilterChange}
value={this.props.value}>
{this.props.filterOptions.map(function(option) {
return <option value={option.key} key={option.key}>{option.label}</option>
})}
</select>
<div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
<div className="selected-value">{this.props.activeFilter}</div>
{this.props.filterOptions.map(function(option) {
return <div data-value={option.key} key={option.key}>{option.label}</div>
})}
</div>
</div>
);
},
onClick: function(e) {
this.setState({
isOpen: !this.state.isOpen
});
}
});
ReactDOM.render(
<App
listItems={getFilteredItems(_store.items, _store.activeFilter)}
filterOptions={_store.possibleFilters}
activeFilter={_store.activeFilter}
/>,
document.getElementById('root')
);
道具和状态之间的关键区别在于，状态是内部的，由组件本身控制，而道具是外部的，由呈现组件的任何东西控制。
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"));
状态可以改变(可变的) 而道具不能(不可变)
状态是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
