ReactJS 快速入门 1 介绍

最新推荐文章于 2021-10-22 09:00:00 发布

绿足

最新推荐文章于 2021-10-22 09:00:00 发布

阅读量352

点赞数

分类专栏： ReactJS Javascript 文章标签： reactjs javascript

Javascript 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

ReactJS

9 篇文章 1 订阅

订阅专栏

React 快速入门

一. 介绍

React是Facebook开源的一个用于构建用户界面的Javascript库，已经应用于Facebook及旗下Instagram。

和庞大的AngularJS不同，React专注于MVC架构中的V，即视图。这使得React很容易和开发者已有的开发栈进行融合。

React顺应了Web开发组件化的趋势。应用React时，你总是应该从UI出发抽象出不同的组件，然后像搭积木一样把它们拼装起来：

不过，React定义组件的方式和AngularJS截然不同。如果说HTML是一个轮子，AngularJS 的指令/Directive则是给这个轮子镶了个金边，而React，重新造了个轮子： JSX

React抛弃HTML另起炉灶的原因之一是性能的考虑：DOM操作非常之慢。React引入了虚拟DOM的概念：开发者操作虚拟DOM，React在必要的时候将它们渲染到真正的 DOM上 —— 有点像游戏开发中的双缓冲区/Double Buffer帧重绘。

引入虚拟DOM的另一个好处是，容易引入不同的渲染引擎。比如将你的应用代码渲染到真实的DOM，或者nodejs服务端的无头DOM，或者，iOS/Android平台组件 —— 这就是 React Native ：

1. 一个简单示例：

在引入React库之后，开发API就通过React对象暴露出来了。我们要做的、能做的，就是：

在虚拟DOM上创建元素，然后将它们渲染到真实DOM上。

在示例代码中使用了React对象的两个方法：

createElement(type,[props],[children...]) - 在虚拟DOM上创建指定的React元素

参数type用来指定要创建的元素类型，可以是一个字符串或一个React组件类型。当使用字符串时，这个参数应当是标准的HTML标签名称，比如：p、div、canvas等等。

参数props是可选的JSON对象，用来指定元素的附加属性，比如样式、CSS类等等。我们在示例中简单的设置为null。

从第三个参数children开始的所有参数，都被认为是这个元素的子元素。考虑到虚拟DOM好歹也是DOM，容易理解React需要通过这些子元素参数，让我们可以构造虚拟DOM树：

var el=React.createElement(
"ul",
null,
React.createElement("li",null,"China"),
React.createElement("li",null,"Japan"),
React.createElement("li",null,"Korea")
);

render(element,container,[callback]) - 将虚拟DOM上的对象渲染到真实DOM上

参数element是我们使用createElement()方法创建的React元素，注意，不是HTML元素！

参数container是真实DOM中的HTML元素，作为渲染的目标容器，它的内容将被render()方法的执行改变。

callback参数是可选的函数，当渲染完成或更新后被执行，通常我们不用它。

2. 虚拟DOM

虚拟DOM是React的基石。

之所以引入虚拟DOM，一方面是性能的考虑。Web应用和网站不同，一个Web应用中通常会在单页内有大量的DOM操作，而这些DOM操作很慢。

除了性能的考虑，React引入虚拟DOM更重要的意义是提供了一种一致的开发方式来开发服务端应用、Web应用和手机端应用

3.Recat组建

在React中定义一个组件也是相当的容易，组件就是一个实现预定义接口的JavaScript类：

 
 React.createClass(meta)

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

在meta中，至少需要实现一个render()方法，而这个方法，必须而且只能返回一个有效的React元素。

这意味着，如果你的组件是由多个元素构成的，那么你必须在外边包一个顶层元素，然后返回这个顶层元素。

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

4. Recat 轮子：JSX

React引入虚拟DOM以后，创建DOM树得在JavaScript里写代码，这使得界面定义变得相当繁琐

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

而它们被渲染后对应的声明式HTML则简单明了：

 
 <div>
    <div class="ez-led">Hello, React!</div>
    <div class="ez-led">2015-04-15</div>
</div>

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

<div id="content"></div>


<script type="text/jsx">

//定义React组件
var EzLedComp = React.createClass({
//每个React组件都应该事先render()方法
render : function(){
var e =
//JSX-->
<div>
<div className="ez-led">Hello, React!</div>
<div className="ez-led">2015-04-15</div>
</div>;
//<--JSX
return e;
}
});
//渲染
React.render(
<EzLedComp/> , //JSX
document.querySelector("#content"));

</script>
</body>

JSX 写法看起来真心揪心。好在React 不强制使用JSX（但相比写大段的脚本来创建DOM树，这至少效率高）。

//JavaScript
var e=React.createElement(
"ul",null,
React.createElement("li",null,"China"),
React.createElement("li",null,"Japan"),
);
//JSX = JavaScript + XML like extension
var e=China Japan;

5. JSX的使用

很显然，增加了这些XML语法的脚本不能再称为JavaScript了，使用上略有区别。

指定脚本类型

在html文件中引入的JSX脚本，需要指定类型为text/jsx：

 
 //内联脚本
<script type="text/jsx">...</script>
//外部脚本
<script src="a.js" type="text/jsx"></script>

引入JSX语法转换库

在html中使用JSX，还需要引入JSX语法转换库JSXTransform.js。这个库加载后，将在DOM树构造完成后（通过监听DOMContentLoaded事件）处理 JSX脚本：

 
 1. 搜索DOM树中的script节点，如果其类型为text/jsx则进行后续处理
2. 读取script节点的内容，将其转化为JavaScript代码
3. 构造一个新的script元素，设置其内容为转化结果代码，并追加到DOM树head元素中

JSXTransform.js引入后通过全局对象JSXTransformer提供了API接口，我们可以使用transform()方法来模拟这个语法自动转换的过程。

在右边的示例代码中，为了避免自动转换，我们将script元素的类型设置为text/jsx2，同时为了简化DOM元素定位，给它加了一个id。

点击按钮，你就可以看到转换结果。查看代码，理解自动转换的步

一个简单实例：

<body>

<div id="content">
<button οnclick="transform();">模拟JSX自动处理过程</button>
</div>


<script type="text/jsx2" id="demo">

//定义React组件
var EzLedComp = React.createClass({
//每个React组件都应该事先render()方法
render : function(){
var e =
//JSX-->
<div>
<div className="ez-led">Hello, React!</div>
<div className="ez-led">2015-04-15</div>
</div>;
//<--JSX

return e;
}
});
//渲染
React.render(
<EzLedComp/> , //JSX
document.querySelector("#content"));

</script>
<script type="text/javascript">
//模拟JSX语法转换
var transform = function(){
var el = document.querySelector("#demo"),
//1.将原始JSX代码转换为JS代码
jsxt = JSXTransformer.transform(el.text);

var headEl = document.querySelector("head"),
scriptEl = document.createElement("script");

//2.设置新的script元素的内容为转换后的代码
scriptEl.text = jsxt.code;
scriptEl.type = "text/javascript";

//3.将新的script元素追加到文档head元素
headEl.appendChild(scriptEl);
};
</script>
</body>

绿足

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ReactJS 快速入门 1 介绍

React 快速入门一. 介绍React是Facebook开源的一个用于构建用户界面的Javascript库，已经应用于Facebook及旗下Instagram。和庞大的AngularJS不同，React专注于MVC架构中的V，即视图。这使得React很容易和开发者已有的开发栈进行融合。React顺应了Web开发组件化的趋势。应用React时，你总
复制链接

扫一扫