ReactJS 状态与道具

你的第二种方法更像是。React 关心的不是模型，而是 价值观以及它们是如何流经你的应用程序的。理想情况下，您的文章模型将存储在根目录下的单个组件中。然后创建每个子组件使用模型的各个部分。

您可以将回调传递给需要修改数据的子组件，并从子组件调用它们。

直接修改 this. props 或 this. state 不是一个好主意，因为 React 将无法识别更改。这是因为 React 对你的文章道具做了一个浅显的比较，以确定它是否发生了变化。

我制作这个 Jsfiddle是为了展示数据如何从外部组件流向内部组件。

handleClick方法显示了正确更新状态的3种方法:

var Outer = React.createClass({


getInitialState: function() {
return {data: {value: 'at first, it works'}};
},


handleClick: function () {


// 1. This doesn't work, render is not triggered.
// Never set state directly because the updated values
// can still be read, which can lead to unexpected behavior.


this.state.data.value = 'but React will never know!';


// 2. This works, because we use setState


var newData = {value: 'it works 2'};
this.setState({data: newData});


// 3. Alternatively you can use React's immutability helpers
// to update more complex models.
// Read more: http://facebook.github.io/react/docs/update.html


var newState = React.addons.update(this.state, {
data: {value: {$set: 'it works'}}
});
this.setState(newState);
},


render: function() {
return <Inner data={this.state.data} handleClick={this.handleClick} />;
}
});

来自反应部门的文件

Props 是不可变的: 它们从父节点传递，并由父节点“拥有”。为了实现交互，我们向组件引入可变状态。State 对于组件是私有的，可以通过调用 this.setState ()进行更改。更新状态时，组件将重新呈现自己。

从 尝试空间: 当道具(或状态)更新(通过 setProps/setState 或父)组件也重新呈现。

2016年更新: 反应变了，解释“道具 VS 状态”变得非常简单。如果一个组件需要更改数据-将其置于某种状态，否则置于道具中。因为现在 道具是只读的了。

道具和州政府到底有什么区别？

你可以找到很好的解释 给你(完整版)

来自 反应中思考的读数:

让我们通过每一个，并找出哪一个是状态。简单 就每一项数据问三个问题:

1. 是父母通过道具传递的吗? 如果是的话，可能不是 国家。

2. 它是否会随着时间而改变? 如果不是，它可能不是状态。

3. 你能计算它的基础上，任何其他状态或道具在您的 组件? 如果是，它就不是状态。

我不确定我是否回答了你的问题，但是我发现，特别是在一个大型/不断增长的应用程序中，Container/Component 模式工作得非常好。

基本上你有两个反应组件:

• 一个“纯”显示组件，处理样式和 DOM 交互;
• 一个容器组件，它处理访问/保存外部数据、管理状态和呈现显示组件。

Example

这个例子可能太简单了，无法说明这个模式的好处，因为对于这样一个简单的例子来说，它非常冗长。

/**
* Container Component
*
*  - Manages component state
*  - Does plumbing of data fetching/saving
*/


var PostEditorContainer = React.createClass({
getInitialState: function() {
return {
text: ""
};
},


componentWillMount: function() {
this.setState({
text: getPostText()
});
},


updateText: function(text) {
this.setState({
text: text
});
},


savePost: function() {
savePostText(this.state.text);
},


render: function() {
return (
<PostEditor
text={this.state.text}
onChange={this.updateText.bind(this)}
onSave={this.savePost.bind(this)}
/>
);
}
});




/**
* Pure Display Component
*
*  - Calculates styling based on passed properties
*  - Often just a render method
*  - Uses methods passed in from container to announce changes
*/


var PostEditor = React.createClass({
render: function() {
return (
<div>
<input type="text" value={this.props.text} onChange={this.props.onChange} />
<button type="button" onClick={this.props.onSave} />
</div>
);
}
});