未加星标

react+redux+koa技术栈实现小结

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

虽然别人整理的入门知识资料已经挺多的了,但不一定适合自己,还是重新整理下,理一理React的开发生态。

一、React 安装使用

使用react,只需要引入react.min.js(React 的核心库)和react-dom.min.js(提供与 DOM 相关的功能)即可。

<script src="../js/lib/react.min.js"></script> <script src="../js/lib/react-dom.min.js"></script> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); // 这段代码将一个h1标题,插入id="example"节点中 </script>

通常为了使用JSX语法,我们需要在文件打包时使用插件将含有JSX语法的文件解析成普通的javascript语法,例如fis3-parser-react;如果使用到了ES6的写法,也需要将其转为ES5的格式,例如使用fis3-parser-babel。(现在前端已经不用ES6了,babel太慢影响效率,ES6在Node上使用)

二、React JSX

React使用JSX来替代常规的 JavaScript,以为JSX执行时进行了优化,含有错误检测而且方便我们书写模板。

var arr = [ <h1>W3Cschool教程</h1>, <h2>从W3Cschool开始!</h2>, ]; var mystyle = { fontSize: 100, color: '#FF0000' }; ReactDOM.render( <div style={myStyle}>{arr}</div>, document.getElementById('example') );

JSX语法代码实际上是JavaScript代码,所以html中的部分标签属性在JSX中不能直接使用,例如html class属性在JSX中需要使用className表示,for属性需要使用htmlFor代替,style属性标签中内容需要写成JSON格式。同时,JSX使用单个{}来包含变量模板,一次返回的JSX render内容必须放在单独一个标签内,返回统计的多个标签是不允许的,例如下面这样是不对的:

// 不正确 render: function(){ return (<div>{this.props.name}</div> <div>{this.props.site}</div> ); }

三、React组件

实现了输出网站名字和网址的组件,另外if和for循环的输出大家也可以注意下:

var Name = require('Name'); var Link = require('LINK'); var list = ['list-item-1', 'list-item-2', 'list-item-3']; var WebSite = React.createClass({ getDefaultProps: function() { return { name: '极限前端', site: "http://www.jixianqianduan.com" }; }, render: function() { var hasList = list.length > 0; if(hasList){ return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> <ul> { this.props.list.map(function(item, index){ return <li key={index}>item</li>; }); } </ul> </div> ) }else{ return <div>没有数据</div>; } } }); React.render( <WebSite name="极限前端" site="http://www.jixianqianduan.com" />, document.getElementById('example') ); // 文件Name.js var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); } }); module.exports = Name; // 文件Link.js var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); } }); module.exports = Link;

最新版的React组件名称只允许使用大些字母开头的变量命名,例如x-button、my-button等命名方式都是不正确的。另外注意上面if模板和for循环输出模板的用法,循环输出时React要求列表项便签需要加上key的属性。

四、React状态state和属性props

下面展示的一个典型实例中创建了 LikeButton 组件,getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

var LikeButton = React.createClass({ getInitialState: function() { return {liked: 0}; }, handleClick: function(event) { this.setState({liked: this.state.liked + 1}); }, render: function() { var text = this.state.liked ? this.state.liked : '不喜欢'; return ( <p onClick={this.handleClick}> 你<b>{text}</b>我。点我切换状态。 </p> ); } }); React.render( <LikeButton />, document.getElementById('example') );

上面的例子也可以这样来做:

var Name = require('Name'); var Link = require('LINK'); var list = ['list-item-1', 'list-item-2', 'list-item-3']; var WebSite = React.createClass({ getDefaultProps: function() { return { name: '极限前端', site: "http://www.jixianqianduan.com" }; }, // 属性类型检测 propTypes: { name: React.PropTypes.string.isRequired, site: React.PropTypes.string.isRequired }, getInitialState: function() { return { name: '极限前端', site: "http://www.jixianqianduan.com" }; }, render: function() { var hasList = list.length > 0; if(hasList){ return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> <ul> { this.props.list.map(function(item, index){ return <li key={index}>item</li>; }); } </ul> </div> ) }else{ return <div>没有数据</div>; } } }); React.render( <WebSite name="极限前端" site="http://www.jixianqianduan.com" />, document.getElementById('example') );

state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 state 来传递数据。

组件的state和props常见有下面的管理方法:

设置状态:setState, 不能在组件内部通过this.state修改状态,因为该状态会在调用setState()后被替换,setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。 setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。 替换状态:replaceState,replaceState()方法与setState()类似,但是方法只会保留nextState中状态,原state不在nextState中的状态都会被删除。 设置属性setProps,props相当于组件的数据流,它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时,我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染,可以使用setProps()。 替换属性replaceProps,replaceProps()方法与setProps类似,但它会删除原有 强制更新:forceUpdate,forceUpdate()方法会使组件调用自身的render()方法重新渲染组件,组件的子组件也会调用自己的render()。但是,组件重新渲染时,依然会读取this.props和this.state,如果状态没有改变,那么React只会更新DOM。 获取DOM节点:findDOMNode,如果组件已经挂载到DOM中,该方法返回对应的本地浏览器 DOM 元素。 判断组件挂载状态:isMounted,isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

五、组件生命周期 初始化阶段:

getDefaultProps:获取实例的默认属性(即使没有生成实例,组件的第一个实例被初始化CreateClass的时候调用,只调用一次,) getInitialState:获取每个实例的初始化状态(每个实例自己维护) componentWillMount:组件即将被装载、渲染到页面上(render之前最好一次修改状态的机会) render:组件在这里生成虚拟的DOM节点(只能访问this.props和this.state;只有一个顶层组件,也就是说render返回值值职能是一个组件;不允许修改状态和DOM输出) componentDidMount:组件真正在被装载之后,可以修改DOM

运行中状态:

componentWillReceiveProps:组件将要接收到属性的时候调用(赶在父组件修改真正发生之前,可以修改属性和状态) shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回false,接收数据后不更新,阻止render调用,后面的函数不会被继续执行了) componentWillUpdate:不能修改属性和状态 render:只能访问this.props和this.state;只有一个顶层组件,也就是说render返回值只能是一个组件;不允许修改状态和DOM输出 componentDidUpdate:可以修改DOM

销毁阶段: componentWillUnmount:开发者需要来销毁(组件真正删除之前调用,比如计时器和事件监听器)
react+redux+koa技术栈实现小结

React的网络请求通常是将请求的url放在组件props中传入,然后在componentDidMount时发送ajax请求。

var UserGist = React.createClass({ getInitialState: function() { return { username: '', lastGistUrl: '' }; }, componentDidMount: function() { this.serverRequest = $.get(this.props.source, function (result) { var lastGist = result[0]; this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }); }.bind(this)); }, componentWillUnmount: function() { this.serverRequest.abort(); }, render: function() { return ( <div> {this.state.username} 用户最新的 Gist 共享地址: <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a> </div> ); } }); ReactDOM.render( <UserGist source="https://api.github.com/users/ouven/gists" />, mountNode ); 六、refs

如果绑定一个 ref 属性到render内容的返回值上,组件或其它组件就可以这样来引用这个内容关联的DOM元素。

<input ref="myInput" /> var input = this.refs.myInput; var inputValue = input.value; var inputRect = input.getBoundingClientRect();

我们也可以使用getDOMNode()方法获取当前真实DOM元素,但是findDOMNode()不能用在无状态组件上。此外也可以使用bind的方法来实现当前事件的处理。

componentDidMound() { const el = findDOMNode(this); } // do something ... onClick = {this.handleClick.bind(this, value1, value2)} // do something handleClick(value1, value2, ..., event) { // 事件处理函数 }

七、服务端渲染(SSR)

React服务端渲染需要用到react-dom/server模块,以koa(koa使用教程省略)为例,我们渲染一个服务端返回的页面就可以这样写:

/** * react前后端同构页面 * @param {[type]} req [description] * @param {[type]} res [description] * @yield {[type]} [description] */ const reactController = function*(req, res) { let ctx = this; let helloProps = { type: 'hello', data: { name: 'hello-name-init', address: 'hello-address-init', age: '26', job: 'hello-job-init' } }; let contentProps = { type: 'content', data: { name: 'content-name-init', address: 'content-address-init', age: '26', job: 'content-job-init' } } let reactHello = reactComponent.renderPath(ctx, 'react/react-hello/main.jsx', helloProps); let reactContent = reactComponent.renderPath(ctx, 'react/react-content/main.jsx', contentProps); ctx.body = yield render(ctx, 'pages/react', { reactHello, reactContent, storeData: { helloProps, contentProps } }); };

这里用到了一个统一react的render处理模块:

'use strict'; const React = require('react'); const ReactDOM = require('react-dom'); const ReactDOMServer = require('react-dom/server'); /** * 根据开发或正式环境读取不同目录先的jsx组件 * @param {[type]} ctx [当前运行环境,用于判断使用开发环境路径还是线上环境路径] * @param {[type]} componentPath [接受组件路径名] * @param {[type]} props [组件接受的数据] * @return {[type]} [description] */ const renderPath = function(ctx, componentPath, props) { let componentFactory, jsxPath; // 如果是本地则使用dev环境目录,否则使用page的构建目录 if (ctx.hostname === '127.0.0.1' || ctx.hostname === 'localhost') { jsxPath = '../dev/component/'; } else { jsxPath = '../pages/component/'; } componentFactory = React.createFactory(require(jsxPath + componentPath)); /** * renderToStaticMarkup不会避免前端重渲染 * renderToString会避免前端重渲染 */ return ReactDOMServer.renderToString(componentFactory(props)); }; module.exports = { renderPath: renderPath }

这里这样做还不够,我们还需要将renderToString的字符串内容填充到真正的页面模板中,这里以swig模板为例,同时后端渲染的初始数据状态也要通过storeData变量带到前端页面上,保证初始的页面组件状态和后端直出是一样的。

<div id="testHello"> <div></div> </div> <div id="test"> <div></div> </div> <script> var storeData = ; </script>

八、Redux与组件通信

React组件间的通信分为几种,父组件向子组件通信、子组件向父组件通信、同级组件间通信。第一种通常是将父组件的state传给子组件props来实现,父组件state变化,子组件的状态就直接变化;子组件向父组件通信是将父组件的方法通过props传入的子组件中,然后再子组件中调用来通知父组件;同级组件通信则是创建一个共同父组件,先发起子组件向父组件通信,然后再让父组件向另一子组件发起通信。 另一种通用的机制就是Redux,Redux可以创建一个全局的store,统一保存管理不同组件的状态,然后通过subscribe订阅事件,当dispatch调用时可以修改组件状态触发订阅事件重新渲染视图。

var reactContent = require('react-content'); var reactHello = require('react-hello'); var store = Redux.createStore(reducer); function reducer(state={}, action) { if(action.type){ state[action.type] = action.data; } return state; }; // do somthing... for(var key in storeData){ store.dispatch(storeData[key]); } // do somthing... reactContent.init(store); reactHello.init(store);

此时如果react-content组件重要控制react-hello组件状态的变化,reactHello中就可以这样监听

componentDidMount: function() { var store = this.props.store; function handleChange() { self.setState({ data: store.getState()['hello'] }); } // 订阅store变化,如果有dispatch,handleChange里面的状态设置就会执行 let unsubscribe = store.subscribe(handleChange); // unsubscribe(); 取消订阅 }

reactContent中控制reactHello变化的动作中则需要这样写。

// 触发reactHello组件变化 _triggerHello: function(){ // 修改hello组件的store var hello = this.props.store.getState()['hello']; hello.name = 'ouvenzhang'; // dispatch后会触发reactHello中的handleChange this.props.store.dispatch({ type: 'hello', data: hello }); }

其实我们可以在SSR时也使用Redux管理,可以增强组件的一部分复用性,但目前还没有用到,其实redux是用来管理组件状态变化的,更推荐在前端使用,服务端使用感觉有点不大必要,服务端只用来做首次内容的渲染。

九、小结

总得来说react生态的还是很健全的,解决的了实际开发中组件和组件状态管理的问题,前后端同构的模式也解决了React库本身较大前端加载缓慢的弊端,但是如果实际项目中没有Node服务层,个人建议还是不要直接使用React,React库文件比较大,还需要其它的依赖,会大大延后页面渲染时机,这是例如使用Vue会显得更轻量级。

工程化项目代码样例:https://github.com/ouvens/fis3-koa-node (内含react的页面,可直接用来开发大型项目)

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:react+redux+koa技术栈实现小结
本站链接:http://www.codesec.net/view/522388.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(13)