近期要在生产环境上使用react，所以，自己学习了一下，写了一个简单的留言板小程序。完整的代码可以到这里下载：message-board
Use
前端使用React，然后还有Bootstrap和jQuery，React负责前端展现，jQuery主要是向服务器发送ajax请求。
后端使用Flask和MongoDB，为前端提供数据。这里主要关注前端，对于后端不做过多说明。
使用webpack，对js文件进行打包。
About React
React是facebook开发一个用于前段交互的Javascript库。
刚刚开始使用，有这么几个特点：
1. 组件化开发。React提倡无状态的组件，便于重用。
2. VirtualDOM。React的性能比较高，得益于虚拟DOM。它不会每次都去直接操作DOM，因为操作DOM的代价是很大的，所以，它在内存中维护了虚拟DOM，通过计算虚拟DOM和浏览器上的DOM的变更进行操作。
3. 专注于View。React不是MVC框架，它只是一个专注于View的库，所以，它也可以和很多其他框架或者库一起使用。
4. 提供完成的生命周期。
Message Board
这个留言板小应用，主要有这样几个功能：
1.添加留言，一个表单：用户名和内容
2.列表展示，显示所有留言
3.简单的分页
Code
立即学习“Python免费学习笔记（深入）”；
使用React，就要对应用进行组件的切分，尽量保持组件的无状态。
App
从宏观上组织整个应用，切分三个大组件：
1. MessageForm，添加留言表单。
2. MessageList，留言列表
3. Pager，留言的分页控制
当然，组件还可以继续划分。
子组件的数据都会回调到MessageBoard中，在这里统一控制。
MessageBoard.js
var React = require("react");var MessageList = require("./MessageList");var MessageForm = require("./MessageForm");var Pager = require("./Pager");var MessageBoard = React.createClass({ getInitialState : function(){ return { messages: [], page:0, pages:0 } }, submitMessage : function (author, content) { $.ajax({ type:'post', url:'/message', data:{author:author,content:content} }).done(function (data) { console.log(data); this.listMessage(1); }.bind(this)); }, listMessage : function(page){ console.log("listMessages page:"+page) $.ajax({ type:'get', url:'/messages', data:{page:page} }).done(function (resp) { if(resp.status == "success"){ var pager = resp.pager; console.log(pager); this.setState({ messages:pager.messages, page:pager.page, pages:pager.pages }); } }.bind(this)); }, componentDidMount : function(){ this.listMessage(1); }, render : function(){ var pager_props = { page : this.state.page, pages : this.state.pages, listMessage : this.listMessage }; return( ) }});module.exports = MessageBoard;
登录后复制
MessageForm
一个简单的表单，保存留言。用户提交后，数据会传给父组件。
MessageForm.js
var React = require("react");var MessageForm = React.createClass({ handleSubmit : function (e) { e.preventDefault(); var author = this.refs.author.getDOMNode().value.trim(); var content = this.refs.content.getDOMNode().value.trim(); this.props.submitMessage(author,content); this.refs.author.getDOMNode().value = ""; this.refs.content.getDOMNode().value = "" }, render : function(){ return( Leave a Message:
) }});module.exports = MessageForm;
登录后复制
MessageList
留言的列表展示，在写列表之前，把每条留言写成一个组件
Message.js
var React = require("react");var Message = React.createClass({ render : function(){ var msg = this.props.message; return( {msg.author} {msg.time.toLocaleString()}
{msg.content}
) }});module.exports = Message;
登录后复制
然后，再写列表.
数据从父组件通过props传递进来
MessageList.js
var React = require("react");var Message = require("./Message");var MessageList = React.createClass({ render : function () { var messages = this.props.messages.map(function(item){ return }); console.log(messages); return( {messages} ) }});module.exports = MessageList;
登录后复制
Pager
这是一个简单的分页，会显示当前页和总页数，还有上一页和下一页功能。
Pager.js
var React = require("react/addons");var Pager = React.createClass({ getDefaultProps : function(){ return{ page:0, pages:0 } }, clickHandler: function(e){ e.preventDefault(); console.log(e.target.dataset.page); console.log(e.target.dataset.page.value); this.props.listMessage(e.target.dataset.page); }, render : function(){ var cx = React.addons.classSet; var preClass = cx({ 'previous':true, 'disabled':this.props.page == 1 }); var nextClass = cx({ 'next':true, 'disabled':this.props.page == this.props.pages }); return(
登录后复制 ←Prev {this.props.page}/{this.props.pages} Next→ ) }});module.exports = Pager;
Summary
一个简单的小程序只能简单的感受一下React，这个库的思路和当前流行的库和框架相比，还是比较新颖的，值得学习～
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2535123.html
