• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

react入门级详细笔记

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、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>

到此这篇关于react入门级详细笔记的文章就介绍到这了,该篇文章讲述了React的基本概念和基本的使用以及一些React常用相关js库,希望可以对你有所帮助


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Angular管道PIPE的介绍与使用方法发布时间:2022-02-05
下一篇:
Vue3中ref与toRef的区别浅析发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap