实现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 相关文章推荐
jQuery ajax cache缓存问题
Jul 01 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
php格式化金额函数分享
2015/02/02 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
python实现弹跳小球
2019/05/13 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
python实现四人制扑克牌游戏
2020/04/22 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
C/C++程序员常见面试题一
2012/12/08 面试题
幼儿园毕业典礼主持词
2014/03/21 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
客房服务员岗位职责
2015/02/09 职场文书
独生子女证明范本
2015/06/19 职场文书
2016年小学生寒假总结
2015/10/10 职场文书