`
shenyuc629
  • 浏览: 195696 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

React初探

阅读更多
近日,facebook将其用户界面构建Javascript库React开源发布。
等等……什么叫用户界面构建库(a library for building user interfaces)?
顾名思义,当然就是该库是将特定规范的源代码(JSX),构建成新的代码(Javascript)。
为什么我们需要这么做呢?
我们觉得写CSS太麻烦了,太多重复工作了,所以我们使用LESS来代替他,让机器代替我们做这些事情。但是出于性能的需求,现在并不流行加载一个less.js让其动态处理这些LESS代码,而是转为先由LESS文件构建成静态的CSS文件,再使用,就像Bootstrap一样。
OK,回到React,我们发现Javaascript模板虽然能动态的生成我们想要的东东,但是实际上对性能并不友善,所以我们寻求一种方法让其构建成静态的,然后再使用。
当然,React不仅仅做了这些,下面让我们一起来认识React吧!
简单的例子——Hello World
首先,我们点击下面链接下载其Starter Kit。
Download Starter Kit 0.3.1
然后在其根目录下创建一个HTML文件helloworld.html,键入以下代码:
<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.min.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      React.renderComponent(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
什么,这是什么代码,为什么能这么写?
/** @jsx React.DOM */
React.renderComponent(
  // 这是什么不是字符串,不是数字,又不是变量的参数……WTF
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);
因为这个script标签的type为
type="text/jsx"
所以实际上,这里面的代码并没有运行……

这里面的奥秘在于该HTML引用了JSXTransformer.js和react.min.js。首先,JSXTransformer.js将所有text/jsx类型的script当成字符串读取出来,再分析其代码,转换成适用于react.min.js的UI模块。
可见这样效率当然是很低的,但是React提供了另一种方法,不用说,就是本地构建成静态代码。通过npm我们可以安装react-tools:
npm install -g react-tools
于是我们就可以用react-tools的watch命令来监控目录变化并进行构建:
jsx --watch src/ build/
所以实际项目上的代码应当是这样的:
<!DOCTYPE html>
<html>
  <head>
    <title>Hello React!</title>
    <script src="build/react.min.js"></script>
    <!-- 不需要 JSXTransformer! -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>
我们看看经过构建后helloworld.js变成怎么样了:
/** @jsx React.DOM */
React.renderComponent(
  React.DOM.h1(null, 'Hello, world!'),
  document.getElementyById('example')
);
这里有一个值得学习的地方,就是React在对DOM插入时候做的性能优化。JavaScript Micro-Templating一般是使用innerHTML进行插入操作的,但是React并非如此,其静态生成的代码是使用Document Fragment的方法插入的。这里有一个性能测试,可以看出这两者的性能差别:
http://jsperf.com/innertext-vs-fragment
我们可以看见使用Document Fragment的性能是优于innerHTML的,作为Facebook的类似模板解决方案,其对性能有更强的要求。
下一步?
如果想更进一步了解React,那么请查看Starter Kit中的examples或者查看其官网吧!也可以到说哪儿网(www.shuonar.com)阅读。
分享到:
评论

相关推荐

    元宇宙初探React+Three.js制作3D全景漫游.zip

    元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D...

    React16.4 开发简书项目 从零基础入门到实战(上)

    上半部共5个章节,分别为:课程导学、React初探、React基础精讲、React高级内容、Redux入门附录:分为三个部分上半部:https://download.csdn.net/download/guguaihaha/13011968下部分:...

    ReactNative初探.pdf

    React Native初探的知识点梳理: 1. 背景与问题概述: - 活动多:指的是移动应用可能面临的频繁活动更新需求。 - 产品迭代快:移动应用需要快速迭代来响应市场变化。 - 原生代码更新不灵活:原生应用在更新时...

    大三下学期课程设计项目,一个外卖网站的前端代码 一个React入门者的初探 使用React+Bootstrap模板.zip

    一个React入门者的初探。使用React+Bootstrap模板.zip 1、该资源内项目代码经过严格调试,下载即用确保可以运行! 2、该资源适合计算机相关专业(如计科、人工智能、大数据、数学、电子信息等)正在做课程设计、期末大...

    react-explore

    React 初探文章[1.React 简单介绍](1. React 简单介绍.md)[2.React 简单示例](2. React 简单示例.md)[3.使用 webpack + gulp 纵享丝滑构建](3. 使用 webpack + gulp 纵享丝滑构建.md)[4.零碎总结](4. 零碎总结.md)...

    东方耀手把手教React Native实战开发

    失效请留言、失效请留言、失效请留言 课程序号标题 第0课0、手把手教React Native实战之开山篇_视频 第1课1、手把手教React Native实战之环境搭建_视频_...第14讲14、手把手教React Native实战之Navigator组件初探

    foodApp:React本地婴儿

    【食品App:React初探】 在当今的互联网世界中,前端开发框架的发展日新月异,其中React以其独特的设计理念和强大的功能,成为了许多开发者的选择。本项目“foodApp:React本地婴儿”是一个针对初学者的React应用...

    ReactNative初探

    React Native 初探意味着我们将探索这个框架的基本概念、优势和挑战,以及如何开始构建一个简单的RN应用。 React Native的核心理念是“Learn once, write anywhere”,这意味着开发者可以使用相同的JavaScript和...

    react-europe-apollo:React Apollo之旅-React Europe 2018

    camera: :laptop: :party_popper: :party_popper: :dog_face:进一步探索渲染道具 查询组件要点指南,Apollo文档使用Apollo,Alexey Kureev查询组件 异步React跟踪React Apollo 3.0的进度异步React Apollo初探Peggy ...

    从0实现React18培训视频.zip

    03 初探Reconciler 04 如何触发更新 05 实现首屏渲染 06 初探ReactDOM 07 初探FC与实现第二种调试方式 08 实现useState 09 ReactElement的测试用例 09.第九课:ReactElement的测试用例 10.第十课:初探update流程 11...

    vue,react,小程序日历框架.zip

    初探lerna回到正题,我们先看一下项目的目录结构。根据lerna项目默认的项目结构,我们需要管理需要的包都packages文件夹内,并在根目录的lerna.json中编写lerna相关的配置。packages文件夹内部的结构如上图,代表我...

    MemoApp:用React Native创建的第一个应用程序。

    ** MemoApp:React Native开发初探 ** React Native是一款由Facebook开发的开源框架,它允许开发者使用JavaScript和React来构建原生的iOS和Android应用程序。本项目“MemoApp”是基于React Native创建的一个简单的...

    开源bbs源码java-ReactnativeDemo:本地演示

    初探 官方网址: 中文官网: 文档教程更新较慢,往往都是旧版本api的使用方法 中文论坛:   在搭建好ReactNative开发环境之后,就可以正式开始使用ReactNative来开发App了。    为何需要ReactNative? Web App ...

    react-native-hello:primeiro应用程序em react-native

    《React Native初探:构建“Hello”应用》 React Native,作为Facebook开源的一款跨平台移动应用开发框架,允许开发者使用JavaScript和React来构建原生的iOS和Android应用。本篇文章将深入探讨如何利用React Native...

    DjangoReactNative:带有React Native的第一个实现django

    【DjangoReactNative:将React Native与Django整合的初探】 DjangoReactNative是一个创新性的项目,旨在结合两个强大的开发框架——Django和React Native,以构建高性能、跨平台的Web和移动应用。这个项目首次尝试...

    First_React-Native

    《初探React-Native:构建跨平台移动应用的基石》 React-Native是Facebook于2015年推出的一款开源框架,它允许开发者使用JavaScript和React来构建原生的iOS和Android应用程序。这个项目名为"First_React-Native",...

    Testing-ReacJS:Pertama Kali Mencoba React JS

    "Testing-ReactJS:Pertama Kali Mencoba React JS"这个主题暗示了我们将初探React的基本概念和实践应用。 1. **React基础知识**: - **React组件**:React的核心是组件化。组件是独立、可重用的代码块,可以像...

Global site tag (gtag.js) - Google Analytics