我在看Pluralsight关于React的课程，老师说道具不应该被改变。我现在正在读一篇关于道具vs.国家的文章(uberVU/react-guide)，它说
道具和状态更改都会触发呈现更新。
文章后面说:
Props(属性的缩写)是组件的配置，如果可以的话，是它的选项。它们是从上面接收的，是不可变的。
所以道具可以改变，但它们应该是不可变的? 什么时候应该使用道具，什么时候应该使用状态? 如果你有一个React组件需要的数据，它应该通过道具或设置在React组件通过getInitialState?
当前回答
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')
);
其他回答
状态是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
你可以通过将它与Plain联系起来来更好地理解它 JS函数。
简单地说,
State是组件的本地状态，不能在组件外部访问和修改。它相当于函数中的局部变量。
普通JS函数
const DummyFunction = () => {
let name = 'Manoj';
console.log(`Hey ${name}`)
}
反应组件
class DummyComponent extends React.Component {
state = {
name: 'Manoj'
}
render() {
return <div>Hello {this.state.name}</div>;
}
另一方面，通过赋予组件以道具形式从父组件接收数据的能力，道具可以使组件可重用。它们等价于函数参数。
普通JS函数
const DummyFunction = (name) => {
console.log(`Hey ${name}`)
}
// when using the function
DummyFunction('Manoj');
DummyFunction('Ajay');
反应组件
class DummyComponent extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />
工作人员:Manoj Singh Negi
文章链接:解释了反应状态与道具
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>
状态:
状态是可变的。 状态与单个组件相关联，不能被其他组件使用。 在组件挂载时初始化状态。 状态用于呈现组件内的动态更改。
道具:
道具是不可变的。 您可以在组件之间传递道具。 道具主要用于组件之间的通信。你可以直接从父母传递给孩子。用于从孩子传递给父母 你需要使用提升状态的概念。
类Parent扩展React。组件{ 呈现() { 回报( < div > <孩子的名字= {"ron"}/> . < / div > ）; ｝ ｝ 子类扩展React。组件{ ｛ 呈现(){ 回报( < div > {this.props.name} < / div > ）; ｝ ｝
一般来说，一个组件(父组件)的状态是子组件的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}渲染它。
