React 构建单页应用方法与实例
前言首先在学习这门框架前,你需要对以下知识有所了解:
以上五个知识点也是目前学习其他前端框架所必须了解的前置任务。 结合其他的一些主流前端框架,我个人认为构建单页应用有这样三个基本的东西:组件、路由、状态管理。那么接下来我就基于这三者来介绍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的具体原理这里不做介绍,有兴趣的童鞋可以参考 至于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-router-cn/ 状态管理状态管理不是单页应用必须的,使用它能够帮助我们统一管理各个状态的变更,使整个项目流程清晰可维护。React实现状态管理可以使用官方推荐的Redux。 项目实例这里我用React写了一个单页网站,页面如下: 这是一个基于React和Antd的实例,全部源码我已经上传至我的github,地址为:https://github.com/luozhihao/react-antd-demo,这里只为不懂如何用React构建单页应用的童鞋作参考。 Antd是蚂蚁金服的一款基于React的开源UI组件库,其官网为:http://ant.design/ Fetch因为上面的实例中我用到了Fetch来进行Ajax交互,所以这里简单介绍下Fetch。 // 获取数据方法 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 永生》 结语
本文地址:http://www.52php.cn/article/p-rgcfmclt-c.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |