React.js入门必须知道的那些事

时间:2023-02-21 19:34:07

首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性能而使用虚拟DOM作为其不同的实现。 它同时也可以由服务端Node.js渲染 - 而不需要过重的浏览器DOM支持, React实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。因其新颖独特, 目前在国内还没有很多的应用。但是其性能出众,代码逻辑简单,近来越来越火。目前还没有比较好的完整教程可以学习,一方面是因为刚开始走红,大家都没有经验,另一方面是因为React本身还在不断变动,API还在调整,至今还没有发布1.0的版本。

react的官网:https://facebook.github.io/react/

react中文网更新速度比较慢,建议还是看英文官网来学。起步还是比较容易的,语法也比较好理解。但是,这里面也有一些地方需要特别注意的。

一、本地文件直接引入,会报跨域请求错误

React.js入门必须知道的那些事

其实,react官网也有说明的:

React.js入门必须知道的那些事

官网上解释说Chrome等浏览器直接引入本地文件是需要在服务器上运行的。

这样的话,解决方法有两个:

①用webstorm编辑器打开,因为webstorm本来打开html文件就是在服务器环境上运行的。

②安装Tomcat。然后把项目放在Tomcat中的webapps目录下,然后再bin目录下找到startup.bat,启动Tomcat。启动成功之后,通过http://localhost:8080/+项目名称/+具体目录下的具体文件,即可访问。

二、用react.js进行项目开发

1、最简单的就是不用配置任何环境,直接引入相关的js文件,然后就可以参照官网的例子去写。这里就不说了。

2、用gulp+browserify,在node的环境下,用require的语法进行模块化的方式开发。这里重点说一下具体的流程。

简单了解gulp

gulp是一个nodejs的streaming构建工具,所谓的streaming大致意思就是把构建流程想成一个个链接的管道(pipe),是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。

简单了解browserify

browserify 命令运行时以一个 JavaScript 文件作为输入,通过分析文件中对于 require 方法的调用来递归查找所依赖的其他模块。把输入文件所依赖的所有模块文件打包成单个文件并输出。如“browserify greet.js > bundle.js”把 greet.js 及其所依赖的模块文件打包成单个 bundle.js 文件。

具体步骤:

①新建一个项目

②以管理员身份打开命令行,进入到项目目录中。或者直接在项目目录中打开git bash

③开始安装环境:输入npm init

④安装gulp    输入 npm install --save-dev gulp

备注:

如果输入npm安装插件比较慢的话,可以用cnpm,cnpm是一个淘宝镜像。

直接安装cnpm clie

npm install -g cnpm

或者完全不需要安装也行

alias cnpm="npm --registry=http://registry.cnpmjs.org --cache=$HOME/.npm/.cache/cnpm"

# Or alias it in .bashrc or .zshrcecho '\n#alias for cnpm\nalias cnpm="npm --registry=http://registry.cnpmjs.org \
  --cache=$HOME/.npm/.cache/cnpm"' >> ~/.zshrc && source ~/.zshrc

具体可以参考网址:http://blog.fens.me/nodejs-cnpm-npm/

⑤定义gulpfile文件

var gulp = require('gulp');

gulp.task('default',function(){

//将你的默认任务代码放在这里

});

⑥测试gulp是否安装成功,输入gulp(注意,必须要定义好gulpfile文件)

结果:

React.js入门必须知道的那些事

⑦以上成功了之后,继续安装browserify相关工具

输入:npm install browserify --save

输入:npm install reactify --save   //用于转换的插件

输入:npm install vinyl-source-stream --save

这个插件的作用就是把browserify生成的代码打包成gulp能理解的代码。因为browserify的一些输出不能直接用在gulp上面,通过这个插件就可以把browserify的输出作为gulp的输入,通过pipe连接起来。

⑧安装react相关模块

npm install react --save

npm install react-dom --save

npm install react-addons --save

至此,需要安装的东西都装完了。

下面看看一个具体的代码例子:

完整目录截图:

React.js入门必须知道的那些事

备注:

项目中的commentBox就是打包后的js文件,这个文件是一个包含了react.js框架代码的文件,所以只需要引入一个文件就可以。但是在实际开发中,这样也存在一些问题:

1、暂时用不到的代码也会被打包,这样就导致体积大,首次加载的速度慢

2、只要一个文件模块更新,整个文件缓存失败

Broserify的解决方案:entry point,入口点技术。就是说每个入口点打包一个文件,两个入口点的相同移来模块单独打包为common.js,但同时增加了依赖维护成本

这个后续再继续深入了解。

gulpfile文件相关配置及说明:

React.js入门必须知道的那些事

index.html

React.js入门必须知道的那些事

最终把组件们集合到一起的commentBox.jsx

React.js入门必须知道的那些事

三、浏览器常见报错

①:Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

解决方法:应该要把你要渲染的那个组件exports出来。

例如:

var React = require('react/addons');

var CommentBox = React.createClass({

render: function() {

return (

<div className="commentBox">

<h1>Comments</h1>

<CommentList />

<CommentForm />

</div>

);

}

});

module.exports = CommentBox;

②Warning: require('react/addons') is deprecated. Access using require('react-addons-{addon}') instead.

解析:这个警告是因为这是旧的写法,新版本已经不建议这样写。

解决方法:

var React = require('react');

var addons = require('react-addons');

使用addons的时候就 var classSet = addons.classSet;

更多详细解释请查看:https://www.npmjs.com/package/react-addons

四、react基础知识(摘录)

React主要的原理

Virtual DOM 虚拟DOM
传统的web应用,操作DOM一般是直接更新操作的,但是我们知道DOM更新通常是比较昂贵的。而React为了尽可能减少对DOM的操作,提供了一种不同的而又强大的方式来更新DOM,代替直接的DOM操作。就是Virtual DOM,一个轻量级的虚拟的DOM,就是React抽象出来的一个对象,描述dom应该什么样子的,应该如何呈现。通过这个Virtual DOM去更新真实的DOM,由这个Virtual DOM管理真实DOM的更新。

为什么通过这多一层的Virtual DOM操作就能更快呢? 这是因为React有个diff算法,更新Virtual DOM并不保证马上影响真实的DOM,React会等到事件循环结束,然后利用这个diff算法,通过当前新的dom表述与之前的作比较,计算出最小的步骤更新真实的DOM。

React.js入门必须知道的那些事
virtual DOM

Components 组件
在DOM树上的节点被称为元素,在这里则不同,Virtual DOM上称为commponent。Virtual DOM的节点就是一个完整抽象的组件,它是由commponents组成。

component 的使用在 React 里极为重要, 因为 components 的存在让计算 DOM diff 更高效。

State 和 Render
React是如何呈现真实的DOM,如何渲染组件,什么时候渲染,怎么同步更新的,这就需要简单了解下State和Render了。state属性包含定义组件所需要的一些数据,当数据发生变化时,将会调用Render重现渲染,这里只能通过提供的setState方法更新数据。

应用情况

国外应用的较多,facebook、Yahoo、Reddit等。在github可以看到一个列表Sites-Using-React,国内的话,查了查,貌似比较少,目前知道的有一个杭州大搜车。大多技术要在国内应用起来一般是较慢的,不过React确实感觉比较特殊,特别是UI的组件化和Virtual DOM的思想,我个人比较看好,有兴趣继续研究研究。

比较分析

和其他一些js框架相比,React怎样,比如Backbone、Angular等。

  • React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层
  • 其次React是单向的从数据到视图的渲染,非双向数据绑定
  • 不直接操作DOM对象,而是通过虚拟DOM通过diff算法以最小的步骤作用到真实的DOM上。
  • 不便于直接操作DOM,大多数时间只是对 virtual DOM 进行编程

完整demo已上传至:https://github.com/LuckyWinty/React-demo

PS:本人为react学习新手,本文有说得不对的地方,欢迎留言指正。另外,本人冀望与react大神交流学习,欢迎大家给我提供一些学习的建议。

React.js入门必须知道的那些事的更多相关文章

  1. React&period;js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  2. React&period;js 入门与实战课程思维导图

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客 此导图为课程 ...

  3. React&period;js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  4. React&period;js入门笔记&lpar;再续&rpar;:评论框的实现

    本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...

  5. 前端框架React Js入门教程【精】

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  6. React&period;js - 入门

    React.js - 第1天 1. React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 ...

  7. React&period;js入门

    React 入门实例教程   现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. ...

  8. React&period;js入门小案例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. React&period;js入门笔记 创建hello world 的6种方式

    一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站. ...

随机推荐

  1. WCF &colon; 如何将NetTcpBinding寄宿在IIS7上

    摘要 : 从IIS 7 开始, IIS增加了对非HTTP协议的支持. 因此, 自IIS 7之后, 可以将NetTcpBinding等非HTTP协议的Bindings直接寄宿在IIS上面. 本文将介绍如 ...

  2. &lpar;原&rpar;解决&period;NET 32位程序运行在64位操作系统下的兼容性问题

    背景:一个第三方组件是C++.NET  32位开发的,后被C#(基于FrameWork4.0)调用并封装成组件,此二次封装的组件无法运行于64位操作系统上.        开发环境:VS2012:解决 ...

  3. JSTL 核心标签库

    SP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签. 除了这些,它还提供了 ...

  4. POJ 2762 Going from u to v or from v to u&quest;(强联通 &plus; TopSort)

    题目大意: 为了锻炼自己的儿子 Jiajia 和Wind 把自己的儿子带入到一个洞穴内,洞穴有n个房间,洞穴的道路是单向的. 每一次Wind 选择两个房间  x 和 y,   让他的儿子从一个房间走到 ...

  5. XHTML

    XHTML 是 HTML 与 XML(扩展标记语言)的结合物. XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素. 最主要的不同: XHTML 元素必须被正确地嵌套. XHTML ...

  6. jeecg入门操作—模板配置(录入界面)

    点击online表单的模板配置,进入模板设计列表页面,点击创建模板 点击创建模板 点击激活 设计完成,点击激活(表单模板可以多个,激活状态只能有一个) 激活后,重新加入功能测试,点击添加页面,效果如下 ...

  7. sql 随机获取数据

    SQL Server: SELECT TOP 10 * FROM T_USER ORDER BY NEWID() ORACLE: SELECT * FROM (SELECT * FROM T_USER ...

  8. idea 中dao层自动生成接口

    1.在生成接口的类上右键 2.选中要生成的接口方法 3.点击Yes 4.出现(? reference in ? file)即生成成功

  9. ili9325--LCD寄存器配置研究

    2011-06-22 22:18:12 自己根据ili9325的规格书编写驱动.发现LCD屏没显示.于是怀疑是某些寄存器设置错误.要调试的话最好还是先熟悉寄存器的作用,调试的时候只要看到现象就能分析了 ...

  10. Luogu4652 CEOI2017 One-Way Streets 树上差分

    传送门 题意:给出$N$个点.$M$条无向边的图,现在你需要给它定向,并满足$Q$个条件:每个条件形如$(x_i,y_i)$,表示定向之后需要存在路径从$x_i$走向$y_i$.问每条边是否都有唯一定 ...