React（4. 2）--数据流（实践篇）

回顾一下上一篇内容，React 是单向数据流传输的，props 和 state 共同构成原始数据。props 和 state 的基本使用，以及什么时候使用 props 和 state：

– State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。

– state 增加了组件的复杂度同时降低了组件的可预见性，我们要尽可能创建多个只负责渲染数据的无状态（stateless）组件，在它们的上层创建一个有状态（stateful）组件并把它的状态通过。

这一节，我们对 props 和 state 的运用进行实践，让我们更好地了解怎样使用它们，创造更好的项目。

这里我们将建立一个帖子列表组件(TweetList)和一个相对应的帖子计数器组件(Counter)，来说明我们怎样及什么时候来使用props & state。以此说明当Counter展示一个帖子数量时该怎么使用。（以下代码，选至前端小野的译文- reactjs中props和state最佳实践，在此我偷个懒）

/**
*   Counter组件(计算器)
*/
var Counter = React.createClass({render: function() {var wordsDataSet = ['zero', 'one', 'two', 'three', 'four', 'five'];var word = wordsDataSet[this.props.count];return (<span>{word}</span>);}
});

/**
* TweetItem组件（列表项组件）
*/
var TweetItem = React.createClass({render: function() {return (<div><div>@{this.props.tweet.author} says:</div><div>{this.props.tweet.content}</div>Impressions:<Counter count={this.props.tweet.impressions} /></div>);}
});

/*
* TweetList组件（列表组件）
*/
var TweetList = React.createClass({getInitialState: function() {return {tweets: []};},componentDidMount: function() {var self = this;$.get('/latest-tweets.json', function(_tweets) {self.setState({tweets: _tweets});});},render: function() {var listItems = this.state.tweets.map(function(tweet, index) {return (<li key={index}><TweetItem tweet={tweet} /></li>);});return (<ul>{listItems}</ul>);}
});

上面代码主要想说明一件事：最外层组件应该处理一个state，然后通过props传递给它的子组件们。（这也是Flux框架的设计思想）

当然，每个组件也会用到 state ，但是我们需要确保 state 保存的是表示它的状态最少数据。

React（4. 2）--数据流（实践篇）相关推荐

【React组件】写一个模仿蓝湖的图片查看器
前言最近公司让写一个可以自由拖拽放大的图片查看器,我寻思这还不简单,一顿操作猛如虎,俩小时后: 事实证明,一旦涉及到 DOM 的变换操作,如果很多细节考虑不全,抓过来就写,那基本就凉了.于是我仔细分 ...
Redux 学习总结 (React)
在 React 的学习和开发中,如果 state (状态)变得复杂时(例如一个状态需要能够在多个 view 中使用和更新),使用 Redux 可以有效地管理 state,使 state tree 结构 ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了作者:Random Fundebug经授权转载,版权归原作者所 ...
用React的方式思考
2019独角兽企业重金招聘Python工程师标准>>> 构建大型.反应迅捷的web app,我首选react.我们在facebook和instagram中都用了它,扩展的不错. 当你 ...
react 动态添加组件属性_这么高质量React面试题（含答案），看到就是赚到了！...
前言本文篇幅较长,全是干货,建议亲们可以先收藏慢慢看哦写文不易,欢迎大家一起交流,喜欢文章记得关注我点个赞哟,感谢支持! Q1 :什么是虚拟DOM? 难度::star: 虚拟DOM(VDOM)它是 ...
如何将某个groupbox中的数据赋值到另一个groupbox_React中的数据和数据流
第2章大致介绍了React.我们花了些时间学习了React,了解它的设计和API背后的一些概念,我们甚至还逐步说明了如何用React组件构建一个简单注释框.在第4章中,我们将开始更全面地使用组件并开始 ...
React Ways1——函数即组件
未经审视的代码是不值得写的 -- 沃兹吉硕德 React 中有一个经典的公式: const View = f(data) 复制代码从这个公式里我们可以提取出两个特点: 视图由函数定义--函数即组 ...
uniapp 子组件 props拿不到数据_总结下React组件间的通讯
这是个老话题了. 随着组件化开发成为主流,每个组件都有完善的生命周期,大家可以在生命周期内做一些事情,每个组件有自己的状态管理机制.同时,每个组件都是独立的.这能提高大家的开发效率,规范化开发. 今天 ...

React（4. 2）--数据流（实践篇）

React（4. 2）--数据流（实践篇）相关推荐

最新文章

热门文章