时间:2021-05-18
首先在学习这门框架前,你需要对以下知识有所了解:
1.原生JS基础
2.CSS基础
3.npm包管理基础
4.webpack构建项目基础
5.ES6规范
以上五个知识点也是目前学习其他前端框架所必须了解的前置任务。
JS和CSS就不多说了,npm是目前最提倡也是占据主导地位的包管理工具,还在用bower或者其他工具的童鞋可以考虑下了。而webpack作为新一代打包工具,已经在前端打包工具中独占鳌头,和Browserify相比也有很大优势。至于ES6规范虽然现在主流浏览器还不兼容,但可以使用babel等转换器进行转换。
结合其他的一些主流前端框架,我个人认为构建单页应用有这样三个基本的东西:组件、路由、状态管理。那么接下来我就基于这三者来介绍React,当然其中会穿插一些额外的知识点。
组件
React的组件撰写和调用主要依赖于ES6的模块化和JSX的语法,以下是一个例子:
// main.jsimport 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 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实现状态管理可以使用官方推荐的Redux。
Redux使用的是严格的单向数据流。整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。
项目实例
这里我用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有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍关于react-router的几种配置方式详解,分享给大家,具体如下:路由的概念路由的作用就是将url和函数进行映射,在单页面应用中路由是必不可少的部分
Kotlin单例实例详解单例的实现方法,可以通过同伴对象,或者lazy。示例:classHelloprivateconstructor(){companiono
学习了webpack门级的教程后,觉得可能是专门为单页应用而量身打造的,比如webpack+react、webpack+vue等,都可以解决各种资源的依赖加载、
前言create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式,其构建的项目默认是不支持less的,需要我们手动
前言首先我们可以把多页应用理解为由多个单页构成的应用,而何谓多个单页呢?其实你可以把一个单页看成是一个html文件,那么多个单页便是多个html文件,多页应用便