实现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 相关文章推荐
cument.execCommand()用法深入理解
Dec 04 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
ionic3 懒加载
2017/08/16 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python模块WSGI使用详解
2018/02/02 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
医学专业毕业生求职信
2014/06/20 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
政风行风整改报告
2014/11/06 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL