文档章节

React构建单页应用方法与实例

王春-海子
 王春-海子
发布于 2016/08/09 10:38
字数 1507
阅读 49
收藏 4

React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM、JSX等。那么接下来我们就来学习一下这门框架是如何构建起一个单页应用的。

前言

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

  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样式还是脱离在组件外部的,维护起来也不是很方便。想了解Vue组件编写方式的可以看一下我之前写的一篇文章《浅谈Vue.js》

从这个例子中我们就可以看到React的虚拟DOM和JSX的特性了。相比其他框架,React的虚拟DOM不仅可以提升页面的性能,同时还可以防止XSS攻击等。关于虚拟DOM的具体原理这里不作介绍,有兴趣的童鞋可以参考
http://www.alloyteam.com/2015/10/react-v...

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

 

路由

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

React路由依赖于React Router。React 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 Router的详细介绍请参照官方文档:http://react-guide.github.io/react-route...

 

状态管理

状态管理不是单页应用必须的,使用它能够帮助我们统一管理各个状态的变更,使整个项目流程清晰可维护。React实现状态管理可以使用官方推荐的Redux。
Redux使用的是严格的单向数据流。整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。因为Redux状态管理的知识点繁多,所有我额外写了一篇文章,详情请戳这里:《Redux 状态管理方法与实例》

 

项目实例

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

 

这是一个基于React和Antd的实例,全部源码我已经上传至我的github,地址为:https://github.com/luozhihao/react-antd-...,这里只为不懂如何用React构建单页应用的童鞋作参考。

Antd是蚂蚁金服的一款基于React的开源UI组件库,其官网为:http://ant.design/

 

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) })
    }

复制代码

这里有一篇介绍Fetch的文章写的不错,推荐给大家《传统 Ajax 已死,Fetch 永生》

 

结语

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

 

原创文章,转载请注明来自一个萝卜一个坑 -博客园[http://www.cnblogs.com/luozhihao] 

本文转载自:http://www.cnblogs.com/luozhihao/p/5579786.html

王春-海子
粉丝 7
博文 49
码字总数 11981
作品 0
江北
技术主管
私信 提问
Webpack实战-管理多个单页应用

引入问题 上一节3-9为单页应用生成HTML中只生成了一个 HTML 文件,但在实际应用中一个完整的系统不会把所有的功能都做到一个网页中,因为这会导致这个网页性能不佳。 实际的做法是按照功能模...

2017/12/22
0
0
React生态渐进系列-React-Router

首先,确实很久没有写过文章了,感觉很多东西需要重新梳理一遍,所以首先从React项目的基础生态圈,开始慢慢的梳理这些前端项目的知识点.这次便详细的梳理一下路由的知识点. 单页应用(SPA) 提到前...

pacopc
2018/07/31
0
0
使用 create-react-app 构建 react应用程序

本文主要是对SPA搭建的实践过程讲解,在对react、redux、react-router有了初步了解后,来运用这些技术构建一个简单的单页应用。这个应用包括了侧边导航栏与主体内容区域。下面简单罗列了将会...

李晓艳
2018/04/17
354
0
前端单页面富应用(SPA)的实现

一、 什么是单页面富应用? 单页面应用:Single Page Application 概念:Web应用即使不刷新也在不同的页面间切换,解决浏览器前进、后退等机制被破坏等问题。并且页面访问会被浏览器保存。 实现方...

xiaobiB
2018/08/21
0
0
【译】针对 Airbnb 清单页的 React 性能优化

原文地址:React Performance Fixes on Airbnb Listing Pages 原文作者:Joe Lencioni 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:木羽 zwwill 校对者:tvChan,...

2017/12/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

川普给埃尔多安和内堪尼亚胡的信

任性 https://twitter.com/netanyahu/status/1186647558401253377 https://edition.cnn.com/2019/10/16/politics/trump-erdogan-letter/index.htm...

Iridium
8分钟前
3
0
golang-mysql-原生

db.go package mainimport ("database/sql""time"_ "github.com/go-sql-driver/mysql")var (db *sql.DBdsn = "root:123456@tcp(127.0.0.1:3306)/test?charset=u......

李琼涛
36分钟前
2
0
编程作业20191021092341

1编写一个程序,把用分钟表示的时间转换成用小时和分钟表示的时 间。使用#define或const创建一个表示60的符号常量或const变量。通过while 循环让用户重复输入值,直到用户输入小于或等于0的值...

1李嘉焘1
36分钟前
4
0
Netty整合Protobuffer

现在我们都知道,rpc的三要素:IO模型,线程模型,然后就是数据交互模型,即我们说的序列化和反序列化,现在我们来看一下压缩比率最大的二进制序列化方式——Protobuffer,而且该方式是可以跨...

算法之名
41分钟前
18
0
如何用C++实现栈

栈的定义 栈(stack)又名堆栈,它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。这一端被称为栈顶,相对地,把另一端称为栈底。向一个栈插入新元素又称作进栈、入栈或压...

BWH_Steven
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部