ReactJS(一）JSX、渲染虚拟DOM对象，定义组件

最新推荐文章于 2023-08-17 14:32:32 发布

李不烦

最新推荐文章于 2023-08-17 14:32:32 发布

阅读量351

点赞数

文章标签： Reactjs

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/100638519

版权

今天开始记录框架的一些东西，先讲React，再说VUE

先说几个重要的概念：

模块:
* 模块是向外提供特定(局部)功能的js程序, 一般就是一个js文件
* 为什么要有模块，因为 js代码更多更复杂，不易管理，所以根据功能的不同将js封装成一个特定的文件
* 作用: 复用js, 简化js的编写, 提高js运行效率

组件:
* 理解: 用来实现特定功能效果的代码集合(html/css/js)，比如一个单独的组件就可以实现轮播图效果
* 作用: 复用编码, 简化项目编码, 提高运行效率

模块化:
* 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化:
* 当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用

扩展：layer弹层组件，jQuery可以结合使用

ReactJS是什么?

1.Facebook开源的一个js库
2. 一个用于动态构建用户界面（UI）的js库

ReactJS官网：http://facebook.github.io/react/
Github地址：https://github.com/facebook/react

React的特点

* Declarative(声明式编码) ，声明式更加注重执行的结果，比如jQuery，命令式更加注重执行的过程
* Component-Based(组件化编码)
* Learn Once, Write Anywhere(支持客户端与服务器渲染)
* 高效
* 单向数据流 module-->view

React高效的原因

1). React有虚拟(virtual)DOM, 不总是直接操作DOM。先操作虚拟dom对象，操作多次后，转化成真的dom对象，最后统一批量页面渲染，减少渲染次数，高效
2). 高效的DOM Diff算法, 最小化页面重绘，局部渲染，只渲染变化的部分

React的相关js库

react.js: React的核心库
react-dom.js: 提供操作DOM的扩展库
babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

虚拟DOM对象

React提供了一些API来创建一种 `特别` 的一般js对象
var element = React.createElement('h1', {id:'myTitle'}, 'hello');
上面创建的element 就是一个简单的虚拟DOM对象
虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面

JSX语法简介

1、全称: JavaScript XML
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX
2、 react定义的一种类似于XML的JS扩展语法: XML+JS
3、作用: 用来创建react虚拟DOM(元素)对象
* var ele = <h1>Hello JSX!</h1>;
* 注意1: 它不是字符串, 也不是HTML/XML标签
* 注意2: 它最终产生的就是一个JS对象
4、标签名任意: HTML标签或其它标签
5、标签属性任意: HTML标签属性或其它
6、基本语法规则
* 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
* 遇到以 { 开头的代码，以JS的语法解析: 标签中的js代码必须用{}包含
7、 babel.min.js的作用
* 浏览器的js引擎是不能直接解析JSX语法代码的, 需要babel转译为纯JS的代码才能运行
* 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

渲染虚拟DOM(元素)

1、语法: ReactDOM.render(virtualDOM, containerDOM) :
2、作用: 将虚拟DOM元素渲染到真实容器DOM中显示
3、参数说明
    * 参数一: 纯js或jsx创建的虚拟dom对象
    * 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
4、创建虚拟DOM的2种方式:
1). 纯JS(一般不用):
    React.createElement('h1', {id:'myTitle'}, title)
2). JSX:
    <h1 id='myTitle'>{title}</h1>

例子如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>02_JSX</title>
</head>
<body>

<div id="example1"></div>
<div id="example2"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>

<script type="text/babel">

  //初始化动态数据
  var title = 'I Love you!';
  var myName = 'libufan';

  //创建虚拟dom : JSX
  var vDOM = <h1 id="myTitle" name={myName}>{title}</h1>;
  //将虚拟dom渲染中页面元素中
  ReactDOM.render(vDOM, document.getElementById('example1'));
</script>

<script type="text/javascript">
  var title = 'You Love me!';
  var myName = 'zhiyong';
  //创建虚拟dom : 纯JS(一般不用)
  var vDOM2 = React.createElement('h1', {id: 'myTitle2', name: myName.toUpperCase()}, title.toUpperCase());
  //将虚拟dom渲染中页面元素中
  ReactDOM.render(vDOM2, document.getElementById('example2'));
</script>

</body>
</html>

自定义组件(Component) :

定义组件有三种方式：

方式1: 工厂(无状态)函数(最简洁, 推荐使用)

function MyComponent1() {
  return <h1>自定义组件标题11111</h1>
}

方式2: ES6类语法(复杂组件, 推荐使用)

class MyComponent2 extends React.Component {
      render () {
        return <h1>自定义组件标题33333</h1>
      }
    }

方式3: ES5老语法(不推荐使用了)

var MyComponent3 = React.createClass({
      render () {
        return <h1>自定义组件标题22222</h1>
      }
    })

注意:
1). 返回的组件类必须首字母大写，和原始的html标签区分
2). 虚拟DOM元素必须只有一个根元素，虚拟dom对象会覆盖容器里旧的对象
3). 虚拟DOM元素必须有结束标签

渲染组件标签

ReactDOM.render(<MyComponent/>, document.getElementById('example'));

注意:

1.组件以标签的形式使用
2.首字母大写
3.所有的虚拟dom对象必须有结束标签

ReactDOM.render()渲染组件标签的基本流程：
1). React内部会创建组件实例对象，
2). 得到包含的虚拟DOM并解析为真实DOM
3). 插入到指定的页面元素内部

李不烦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ReactJS(一）JSX、渲染虚拟DOM对象，定义组件

今天开始记录框架的一些东西，先讲React，再说VUE先说几个重要的概念：模块: * 模块是向外提供特定(局部)功能的js程序, 一般就是一个js文件 * 为什么要有模块，因为js代码更多更复杂，不易管理，所以根据功能的不同将js封装成一个特定的文件 * 作用: 复用js, 简化js的编写, 提高js运行效率组件: * 理解: 用来实现特定功能效果的代码集合(htm...
复制链接

扫一扫