实现React单页应用的方法详解


Posted in Javascript onAugust 02, 2016

首先在学习这门框架前,你需要对以下知识有所了解:

     1.原生JS基础

     2.CSS基础

     3.npm包管理基础

     4.webpack构建项目基础

     5.ES6规范

以上五个知识点也是目前学习其他前端框架所必须了解的前置任务。

JS和CSS就不多说了,npm是目前最提倡也是占据主导地位的包管理工具,还在用bower或者其他工具的童鞋可以考虑下了。而webpack作为新一代打包工具,已经在前端打包工具中独占鳌头,和Browserify相比也有很大优势。至于ES6规范虽然现在主流浏览器还不兼容,但可以使用babel等转换器进行转换。

结合其他的一些主流前端框架,我个人认为构建单页应用有这样三个基本的东西:组件、路由、状态管理。那么接下来我就基于这三者来介绍React,当然其中会穿插一些额外的知识点。

组件

React的组件撰写和调用主要依赖于ES6的模块化和JSX的语法,以下是一个例子:

// main.js
import React from 'react'
import { render } from 'react-dom'
import MyComponent from './component.js'
import './main.css'


// 主组件
class MyDemo extends React.Component {
  render() {
    return (
      <div className="box">
        <MyComponent />
      </div>
    )
  }
}

render((
  <MyDemo />
), document.getElementById('app'))


// component.js

// 子组件
import React from 'react'

export default class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <p>这是一个组件!</p>
      </div>
    )
  }
}


// main.css
.box {
  width: 100%
}

相比Vue.js框架,我个人认为React的组件编写方式还是没有Vue来的舒服,组件的css样式还是脱离在组件外部的,维护起来也不是很方便。

从这个例子中我们就可以看到React的虚拟DOM和JSX的特性了。相比其他框架,React的虚拟DOM不仅可以提升页面的性能,同时还可以防止XSS攻击等。关于虚拟DOM的具体原理这里不作介绍

至于JSX语法则是JS的一种语法糖,我们可以通过这种语法糖来便捷实现一些功能,这里JSX 把类 XML 的语法转成纯粹 JavaScript,XML 元素、属性和子节点被转换成 React.createElement 的参数。类似的JS语法糖还有TypeScript等。

路由

前端路由机制是目前构建单页应用(SPA)最重要的一环之一。通过前端路由我们可以优化用户体验,不需要每次都从服务器获取全部数据,从而快速将页面展现给用户。

React路由依赖于React RouterReact Router 保持 UI 与 URL 同步。它拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。

下面是一个React路由的例子:

import React, { Component } from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router'

const ACTIVE = { color: 'red' }

class App extends Component {
  render() {
    return (
      <div>
        <h1>我的路由</h1>
        <ul>
          <li><Link to="/" activeStyle={ACTIVE}>首页</Link></li>
          <li><Link to="/users" activeStyle={ACTIVE}>用户页</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
}

class Index extends React.Component {
  render() {
    return (
      <div>
        <h2>Index!</h2>
      </div>
    )
  }
}

class Users extends React.Component {
  render() {
    return (
      <div>
        <h2>Users</h2>
      </div>
    )
  }
}

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Index}/>
      <Route path="users" component={Users}></Route>
    </Route>
  </Router>
), document.getElementById('app'))

这里只列出了React的一种路由写法。相比其他框架,React路由的语法更加通俗易懂。 

状态管理

状态管理不是单页应用必须的,使用它能够帮助我们统一管理各个状态的变更,使整个项目流程清晰可维护。React实现状态管理可以使用官方推荐的Redux。

Redux使用的是严格的单向数据流。整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。 

项目实例

这里我用React写了一个单页网站,页面如下:

实现React单页应用的方法详解

Fetch

因为上面的实例中我用到了Fetch来进行Ajax交互,所以这里简单介绍下Fetch。
我们可以把Fetch作为下一代Ajax技术,它采用了目前流行的 Promise 方式处理。

利用Fetch我们可以这样写Ajax进行数据交互:

// 获取数据方法
  fetchFn = () => {
    fetch('../../data.json')
      .then((res) => { console.log(res.status);return res.json() })
      .then((data) => { this.setState({lists:data.listData}) })
      .catch((e) => { console.log(e.message) })
  }

总结

学习一门框架最重要的并不是学习它的技术,而是学习其带来的解决问题的思路。通过React这一门框架的学习,你可以从它独特的新特性中发掘一种新的思维模式。只有思维层面得到了扩展,你才能在前端的海洋里自由翱翔。希望本文对大家学习React有所帮助。

Javascript 相关文章推荐
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 #Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 #Javascript
AngularJS ng-mousedown 指令
Aug 02 #Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 #Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 #Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 #Javascript
jQuery树形控件zTree使用小结
Aug 02 #Javascript
You might like
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
linux下php上传文件注意事项
2016/06/11 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
继续学习javascript闭包
2015/12/03 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
英语自荐信范文
2013/12/11 职场文书
网站客服岗位职责
2014/04/05 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
运动会加油稿100字
2014/09/19 职场文书
店铺转让协议书
2015/01/29 职场文书
工程部经理岗位职责
2015/02/02 职场文书
党员个人年度总结
2015/02/14 职场文书
圣诞晚会主持词
2015/07/01 职场文书
汶川大地震感悟
2015/08/10 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python