使用React解决问题
- 任何与用户界面或者用户界面交互有关的任务都可以用React解决
- 一种思想:考虑一个应用的各个部分怎么实现之前,先了解所有组件如何组合在一起更加重要。因此,先从最顶级的React元素开始,然后实现他的子组件,自顶向下来构建层级。
规划React应用
两个原则:
- 每个组件应该代表一个独立的用户界面元素,应该封装最小的可复用元素
- 多个React组件应该组成一个独立的React组件。最终,整个用户页面应该封装成一个React组件
父组件与子组件的交互机制
- 父组件传递一个回调函数作为字组件的属性,字组件通过this.props来访问这个回调函数
- 当字组件想要改变副组件的state的时候,就通过这个回调函数传递必要的参数到父组件的新状态中
- 父组件更新状态,就会触发render()函数,从而渲染所有必要的子组件
let React = require('react');
let Stream = require('Stream.react');
let Collection = require('Collection.react');
let Application = React.createClass({
getInitialState: () => {
return {
collectionTweets: {}
}
},
AddTweetToCollection: (tweet) => {
let collectionTweets = this.state.collectionTweets;
collectionTweets[tweet.id] = tweet;
this.setState({
collectionTweets: collectionTweets
})
},
RemoveTweetToCollection: (tweet) => {
let collectionTweets = this.state.collectionTweets;
delete collectionTweets[tweet.id];
this.setState({
collectionTweets: collectionTweets
})
},
RemoveAllTweetToCollection: () => {
this.setState({
collectionTweets: {}
})
},
render: () => {
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-4 text-center">
<Stream onAddTweetToCollection={this.AddTweetToCollection}/>
</div>
<div className="col-md-6 text-center">
<Collection tweets={this.state.collectionTweets}
onRemoveTweetToCollection={this.RemoveTweetToCollection}
onRemoveAllTweetToCollection={this.RemoveAllTweetToCollection}/>
</div>
</div>
</div>
)
}
});
module.exports = Application;
网友评论