React.js初探（一）-白红宇

React.js初探（一）

阅读量：6559 次

发布时间：2019-06-24

本文共 2576 字，大约阅读时间需要 8 分钟。

前端框架多如牛毛的今天，团队的技术选型很重要，没有最好的，只有最合适的，这话早已经被说烂了。

但是作为一个有追求的前端，对新技术的敏感以及尝试心理还是要有的。

虽然React已经火的不行了，但由于自己的惰性，好吧，就是懒，看了很多的技术文章，但是一直没有开始去学习这个框架。

今天就开始这个框架的学习吧 - -。。。也作为本博第一篇文章。。。

前言

React中，把一切东西都看成组件，每个组件都有其状态。

一个组件与多种有限状态，但同时只能有一个状态。学术上这叫有限状态机

对于HTML而言，React抛弃了他。

抛弃HTML，另起炉灶的原因之一是性能问题：DOM操作十分缓慢。

因此React引入了虚拟DOM（Virtual Dom）的概念，React在必要的时候，才把他们渲染到真正的DOM中

开始

既然选择了开始，那当然是熟悉的味道，原来的配方： Hello React

上手React十分简单，我们只要：

在虚拟DOM上创建元素，把他们渲染到真实DOM上

创建元素： createElement( type, [props], [children..] )

type: 创建的元素类型，可以是字符串或者一个React组件类型，为字符串的时候，只能是标准的HTML标签名称，如p, div

props: 可选的JSON对象，指定元素的附加属性，如样式，CSS类名等，CSS类名要用className，而不是用class，因为class是JS保留字。可设置成null。

children：从第三个参数开始，都被认为是子元素

下面是简单的例子：

1 var el = React.createElement(2 　　"ul",3 　　null,4 　　React.createElement("li",null,"China"),5 　　React.createElement("li",null,"Japan"),6 　　React.createElement("li",null,"Korea")7 );

渲染到DOM： render( element, container, [cb] )

element：指我们用React创建的虚拟DOM

container：真实的DOM元素，容器。

cb：渲染完成或更新后的回调，可选。

虚拟DOM

虚拟DOM是React的基石。

一方面是性能原因，React每次渲染的时候，会先比较当前DOM内容和渲染内容的差异，然后最优的更新DOM，这个过程叫做reconciliation。

另一方面：引入虚拟DOM，提供了一种一致的开发方式来开发服务端应用，Web应用，手机端应用。

因为有了虚拟DOM，通过配置不同的渲染器，就可以将Virtual Dom的内容渲染到不同的平台。对于开发者，使用JS通吃所有平台。

例子：

我们来实现一个计时器：

React组件

定义一个组件十分简单： React.createClass(meta)

meta：是一个实现预定义接口的JS对象，用来对React组件原型进行扩展

注意：组件名称的首字母应当大写。

创建完组件，然后就是之前的流程，创建虚拟DOM，然后渲染。

createClass中都要写render方法，render方法

要返回创建的虚拟DOM。其他的方法则要写成驼峰式的名字，如onClick。

一个例子：

JSX轮子

React引入了Virtual Dom, 创建DOM数需要在JS中写代码，使得界面定义很繁琐，比如创建两排字的组件：

render: function(){    return React.createElement(        "div",null,        React.createElement("div",{className:"ez-led"},"Hello, React!"),        React.createElement("div",{className:"ez-led"},"2015-04-15")　　);}

为了解决上面的问题，JSX来了。

JSX是对JS语法的拓展，它可以让我们在JS代码中类似写HTML的方式创建React元素

注意： CSS类名还是要用className，React.render中的组件名要写成标签形式，如<EzLedComp/>

如：

1 //JavaScript 2 var e = React.createElement( 3     "ul",null, 4     React.createElement("li",null,"China"), 5     React.createElement("li",null,"Japan"), 6 ); 7 //JSX = JavaScript + XML like extension 8 var e = 
      
        9                 
       China
10                 
       Japan
11             
      
;