欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react入门级详细笔记

程序员文章站 2022-04-06 22:24:05
目录一、react的基本认识 2、 react的特点3、react高效的原因二、react的基本使用三、react jsx1、虚拟dom2、jsx3、渲染虚拟dom元素4、创建虚拟dom的方...

一、react的基本认识 

1、介绍

react是用于构建用户界面的javascript库(只关注view)由facebook开源

2、 react的特点

  • declarative(声明式编码)
  • component-based(组件化编码)
  • learn once, write anywhere(支持客户端与服务器渲染)
  • 高效
  • 单向数据流

3、react高效的原因

  • 虚拟(virtual)dom, 不总是直接操作dom
  • dom diff算法, 最小化页面重绘

二、react的基本使用

1、相关js库

  • `react.js`: react的核心库
  • `react-dom.js`: 提供操作dom的react扩展库
  • `babel.min.js`: 解析jsx语法代码转为纯js语法代码的库

2、在页面中导入js库

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

3、编码

<script type="text/babel"> //必须声明babel
  // 1、创建虚拟dom元素
  const vdom = <h1>hello react</h1> // 千万不要加引号
  // 2、渲染虚拟dom到页面真实dom容器中
  reactdom.render(vdom, document.getelementbyid('test'))
</script>

三、react jsx

1、虚拟dom

react提供了一些api来创建一种特别的一般js对象

var element = react.createelement('h1', {id:'mytitle'},'hello')

上面创建的就是一个简单的虚拟dom对象

虚拟dom对象最终都会被react转换为真实的dom

​ 我们编码时基本只需要操作react的虚拟dom相关数据, react会转换为真实dom变化而更新界面

2、jsx

  • 全称: `javascript xml`
  • react定义的一种类似于xml的js扩展语法:`xml+js`
  • 作用: 用来创建react虚拟dom(元素)对象

var ele = <h1>hello jsx!</h1>

注意1: 它不是字符串, 也不是html/xml标签

注意2: 它最终产生的就是一个js对象

  • 标签名任意: html标签或其它标签
  • 标签属性任意: html标签属性或其它
  • 基本语法规则

遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

遇到以 { 开头的代码,以js语法解析: 标签中的js代码必须用{ }包含

  • `babel.js`的作用

浏览器不能直接解析jsx代码, 需要babel转译为纯js的代码才能运行

只要用了jsx,都要加上type=“text/babel”, 声明需要babel来处理

3、渲染虚拟dom元素

语法:

reactdom.render(virtualdom, containerdom)
  • 参数一: 纯js或jsx创建的虚拟dom对象
  • 参数二: 用来包含虚拟dom元素的真实dom元素对象(一般是一个div)

作用:
将虚拟dom元素渲染到页面中的真实容器dom中显示

4、创建虚拟dom的方式

纯js方式

react.createelement('h1',{id:'mytitle'}, title

jsx方式

<h1 id='mytitle'>{title}</h1>

代码示例

<div id="app"></div>
const test1 = 'my test 1'
// 1、创建虚拟dom:两种方法
var element = react.createelement('h3',{id:app},test1)
var element2 = <h3 id={test1}>{test1}</h3>
// 2、渲染虚拟dom
reactdom.render(element,document.getelementbyid('app'))
reactdom.render(element2,document.getelementbyid('app'))

5、react 之 hello world

第一步:引入react.js相关库

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

第二步:定义根元素

<div id="app"></div>

第三步:在babel环境下写react代码

<script type="text/babel">
// 1、创建虚拟dom元素对象
var vdom = <h1>hello w</h1>  //不是字符串
// 2、将虚拟dom渲染为页面真实dom容器中
reactdom.render(vdom,document.getelementbyid('app'))
</script>