前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React快速入门

React快速入门

作者头像
用户1216676
发布2018-01-24 16:41:39
6420
发布2018-01-24 16:41:39
举报
文章被收录于专栏:熊二哥熊二哥

正好旁边前端的兄弟最近在学习React,为了更深入的了解前端的业态,也果断来学习一发,目标是有个基础的了解,需要时能快速上手就OK,说实话,个人并不是很喜欢它的这种推翻MVC的思路,这个思路和原来的微软的WebForm基本上是一个路子,只是组件的代码可控,可维护。

前端发展

ECMA6已发布两年,相关的配套环境已慢慢发展起来(比如Babel可以将最新代码翻译成老版的JS代码提供兼容性),javascript这门语言也发展的越来越完善,和传统的Java,C#越来越像。

  • ECMA6 const,let:前者定义常量,后者定义块级作用域。 lambda表达式let add = (a, b) => {return a+b;},可以解决this在对象方法中嵌套函数的问题。 函数默认参数,参数数组: function desc(name='Xionger', age=29, ...args){}。 展开操作符:可以展开数组、对象,let arr1=[1,2]; let arr2=[...arr1,3] 模板字符串: let a =My name is ${name}! 解构赋值: let foo = ['one', 'two', 'three']; let [one, two, three] = foo; console.log(${one}, ${two}, ${three}); class Animal{ constructor(name, age){xxx} } 模块化:最开始随着Require.js的流行,出现AND格式,之后随着Nodejs的出现有了CommonJS格式,再之后的browserify,让浏览器端也支持该格式,现在ES6的退出也有了相应的标准import, exportBabel:可以将ES6代码编译成ES5代码,npm install babel-cli -g, babel es6.js -o compiled.js Tip: 此外可以参看30分钟掌握ES6或者阮一峰大神的相关文章。

React

特点:一切基于组件;JSX,可以将类似HTML的结构编译成Javascript,说实话,个人不是很顶这个思路。Flux是React推出的一个前端架构思路,而Redux是对该思路的一个很好的实践。

Virtual DOM:在React中,用户不用操作真正的DOM节点,每个React组件都是用VirtualDOM渲染的,它是一种对于HTML DOM节点的抽象描述。它与DOM的一大区别就是它采用了更高效的渲染方式,组件的DOM结构映射奥VirtualDOM上,当需要重新渲染组件时,React在VirtualDOM上实现了一个Diff算法,通过这个算法寻找需要变更的节点,再把里面的修改更新到实际需要修改的DOM节点上,这样就避免了整个渲染DOM带来的巨大成本。简单来讲,就是其通过Diff算法(比较html实际的DOM和javascript代码中的虚拟DOM),将原来的DOM的全量更新变为了增量更新

webpack

特点 代码拆分(code splitting)方案:require.ensure(["module-a"], function(require){var a = require("module-a");}); 智能的静态分析:require("./template/" + name + ".jade"); 模块热切换:webpack-dev-server --hot 安装使用

npm install webpack -g
webpack main.js bundle.js
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-07-07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前端发展
  • React
  • webpack
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档