React从入门到精通教程01
React从入门到精通教程
- React从入门到精通教程
- React简介
- 官方文档
- React使用来干什么的
- 为什么需要React
- React特点
- React基础
- React的使用
- Hello World
- JSX
- 定义
- 在JSX中嵌入JS表达式
- JSX也是一个表达式
- JSX特定属性
- JSX防止XSS(cross-site-scripting, 跨站脚本)攻击
- JSX表示对象
- 总结:
- 元素渲染
- 将元素渲染为DOM
- 更新已经渲染了的元素
- React只更新它需要更新的地方
React从入门到精通教程
系列教程(持续更新中…):
- React从入门到精通教程01
- React从入门到精通教程02
- React从入门到精通教程03
- React从入门到精通教程04
React简介
官方文档
- 英文官网: https://reactjs.org/
- 中文官网: https://react.docschina.org/
React使用来干什么的
- 用于构建用户界面的 JavaScript 库,是一个将数据渲染为HTML视图的开源JS库。React只关心视图。
为什么需要React
原生JS操作DOM繁琐,效率低
使用JS直接操作DOM,浏览器会进行大量的重绘重排
原生JS没有组件化编码方案,代码复用低
React特点
- 声明式而非命令式:React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据变动时 React 能高效更新并渲染合适的组件。
- 组件化:构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI。由于组件逻辑使用 JavaScript 编写而非模板,因此你可以轻松地在应用中传递数据,并保持状态与 DOM 分离。React 组件让您可以将 UI 拆分为独立的、可重用的部分,并单独考虑每个部分
- 一次学习,随处编写
React基础
React的使用
- 通过在
script
标签中引入React
所需要的静态文件可快速使用 - 通过一些工具,例如
creat-react-app
脚手架来快速的搭建一个React
项目
Hello World
无论学习什么语言,输出hello world
总会是我们学习的第一步,我们今天也通过这个小小的案例来初识React
<html><body><!-- 准备好容器 --><div id="test"></div></body><!-- 引入依赖 ,引入的时候,必须就按照这个步骤--><script src="../js/react.development.js" type="text/javascript"></script><script src="../js/react-dom.development.js" type="text/javascript"></script><script src="../js/babel.min.js" type="text/javascript"></script><!--这里使用了babel用来解析jsx语法--><script type="text/babel">// 1.创建虚拟DOMconst VDOM = <h1>Hello</h1> //这个地方使用的是JSX语法,不需要加""// 2.渲染,如果有多个渲染同一个容器,后面的会将前面的覆盖掉ReactDOM.render(VDOM,document.getElementById("test")); </script>
</html>
1.先导入三个包:
【先引入react.development.js,后引入react-dom.development.js】
react.development.js 核心包
react-dom.development.js 提供操作DOM的react扩展库。
babel.min.js // 将JSX转为JS的包,之前我们使用的时候是ES6转成JS
2.创建一个容器
<div id="test"></div>
3.创建虚拟DOM,渲染到容器中
const VDOM = <h1>Hello</h1>
/* 虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面 */
以上就是基本使用React的一个完整步骤,后面会慢慢了解里面的详细内容
JSX
在上面的hello world
的例子中,我们只用了如下语法:
const VDOM = <h1>Hello</h1>
这种看起来像JS,又像HTML的语言,是一种JS的语法拓展,叫做JSX,JSX可以生成React中的最小渲染单元–’元素‘,后续只要使用ReactDOM.render()
就可以将这个元素渲染到容器中,为什么要使用JSX
呢,下面是官方文档的原话:
JSX
可以简化我们开发React的工作,可以带来极大的方便,但如果你不熟悉这种语法,你也可以使用React提供的原生JS函数createElement()
来做同样的事。JSX
只是帮我们调用了这个函数而已
React.createElement(type,[props],[...children]
)
/*
第一个参数是必填,传入的是似HTML标签名称,eg: ul, li
第二个参数是选填,表示的是属性,eg: className
第三个参数是选填, 子节点,eg: 要显示的文本内容
*/
举一个如下例子:
//JSX写法:class Hello extends React.Component {render() {return <div>Hello, { this.props.toWhat }</div>}
}ReactDOM.render(<Hello toWhat=‘world’>,document.getElementById(‘root’)
)// 转化为原生JS后的写法class Hello extends React.Component {render(){return React.createElement(‘div’,null, `Hello,${this.props.toWhat}`)}
}ReactDOM.render(React.createElement(‘Hello’, { toWhat: ‘world’ }, null),document.getElementById(‘root’)
)
这个函数不理解不要紧,我们一般情况下都会使用JSX
,下面我们来具体学习JSX
的相关语法
定义
定义一个JSX元素的时候,我们不能使用引号包裹我们的元素,但是如果JSX元素有很多行,我们可以使用
()
包裹,并且一个JSX元素只能有一个根元素,超过一个会报错var element = "<h1> hello world </h1>" // 错误,这个不是JSX,而是普通的JS,定义了一个字符串常量 var element = <h1> hello world </h1><h1> hello world </h1> // 错误,一个JSX只能有一个根标签 var elemnt = <h1>Hello, {formatName(user)}!</h1> //正确,可以被()包裹 var element = (<div><h1>hello world</h1><h1>hello world</h1></div>) //正确,只有一个根元素
在JSX中嵌入JS表达式
可以在JSX中使用
{}
嵌入任何JS表达式const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>;ReactDOM.render(element,document.getElementById('root') );
JSX也是一个表达式
在编译之后,JSX 表达式会被转为普通 JavaScript 函数调用,并且对其取值后得到 JavaScript 对象。所以我们也可以将JSX当成表达式使用,作为函数参数返回,或者是在条件语句中使用。
function getGreeting(user) {if (user) {return <h1>Hello, {formatName(user)}!</h1>;}return <h1>Hello, Stranger.</h1>; }
JSX特定属性
既然我们可以在JSX中嵌入标签,那么我们也可以在JSX中为标签添加属性
const element = <div tabIndex="0"></div>; // 可以使用引号,来为属性设置不变的字面量 const element = <img src={user.avatarUrl}></img>; // 也可以使用大括号,为属性设置一个JS表达式 // 注意:"{}"这种情况下){}会被解析成字符串
警告:
因为 JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用
camelCase
(小驼峰命名)来定义属性的名称,而不使用 HTML 属性名称的命名约定。例如,JSX 里的
class
变成了className
,而tabindex
则变为tabIndex
。JSX防止XSS(cross-site-scripting, 跨站脚本)攻击
既然可以在JSX中使用标签,那么我们就需要考虑安全性,最先考虑的即使XSS,但是我们完全不用担心自己在JSX中写的标签例如
<script></script>
会被执行。React DOM 在渲染所有输入内容之前,默认会进行转义。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(cross-site-scripting, 跨站脚本)攻击。JSX表示对象
实际上,Babel 会把 JSX 转译成一个名为
React.createElement()
函数调用。,调用之后返回一个对象,这个对象称为React元素
,例如const element = (<h1 className="greeting">Hello, world!</h1> ); // 等价于 const element = React.createElement('h1',{className: 'greeting'},'Hello, world!' ); // 最后会生成为如下对象 const element = {type: 'h1',props: {className: 'greeting',children: 'Hello, world!'} };
这些元素描述了你希望在屏幕上看到的内容。React 通过读取这些对象,然后使用它们来构建 DOM 以及保持随时更新。
总结:
全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + XML本质是React****.createElement(component, props**, …children)**方法的语法糖
作用: 用来简化创建虚拟DOM
1) 写法:
var ele = <h1>Hello JSX!</h1>
2) 注意1:它不是字符串, 也不是HTML/XML标签
3) 注意2:它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
1) 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
2) 遇到以 { 开头的代码,以JS语法解析: 标签中的js表达式必须用{ }包含
3)样式的类名指定不要使用class,使用className
4)内联样式要使用双大括号包裹
5)不能有多个根标签,只能有一个根标签
6)标签必须闭合
7)如果小写字母开头,就将标签转化为html同名元素,如果html中无该标签对应的元素,就报错;如果是大写字母开头,react就去渲染对应的组件, 如果没有就报错
元素渲染
元素描述了我们想在页面上所希望看到的内容,那么我们定义了一个元素之后,这个元素只是一个虚拟的DOM,要怎么渲染到页面上呢。与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
将元素渲染为DOM
<div id="root"></div>
首先我们在HTML页面中需要一个容器来装载我们的这个元素,例如我们创建如上的标签。我们将其称为“根” DOM 节点,因为该节点内的所有内容都将由 React DOM 管理。一般一个项目只有一个根节点
const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root'));
想要将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入
ReactDOM.render()
:更新已经渲染了的元素
元素一旦定义就不可改变,一个元素就相当于某个特定时刻的UI,所以更新已经渲染了的元素的唯一方式就是重新调用render函数
// 计时器例子 function tick() {const element = (<div><h1>Hello, world!</h1><h2>It is {new Date().toLocaleTimeString()}.</h2></div>);ReactDOM.render(element, document.getElementById('root'));}setInterval(tick, 1000); // 每秒重新调用一次函数,函数内调用render,这样才能够更新页面
在实践中,大多数 React 应用只会调用一次
ReactDOM.render()
。后面,我们将学习如何将这些代码封装到有状态组件中。React只更新它需要更新的地方
React DOM 会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使 DOM 达到预期的状态。这也是React比原生JS快的一个原因。
可以看到只有h2那个节点更新了,其它的都没有更新。
未完待续… …
React从入门到精通教程01相关推荐
- python教程吾爱破解_2020年最新python入门到精通教程
2020年最新python入门到精通教程 资源共享吧良心论坛,一直用心为每位会员服务,希望大家能学有所成,今天为大家分享一套2020年最新python入门到精通教程,如果你是0基础想学习python这 ...
- Arduino Mixly入门到精通教程
目录 1.介绍 2.实验器材和相关资料下载链接 3. Uno Plus 开发板和米思齐软件 第1小节 简单介绍 Uno Plus 开发板 第2小节 Uno Plus 开发板的驱动安装方法 第3小节 ...
- C 语言从入门到精通教程(2021 )
C 语言从入门到精通教程(2021年) 文章目录 计算机常识 什么是计算机程序 ? 什么是计算机语言 ? 常见的计算机语言类型有哪些 ? 什么是C语言? C语言历史 C语言标准 C语言现状 为什么要学 ...
- Photoshop CC从入门到精通教程-李发展-专题视频课程
Photoshop CC从入门到精通教程-50786人已学习 课程介绍 如果你是设计小白,看了很多视频教程,依然学不会PS,那么这次你终于找对了! Photoshop CC从入门到精通 ...
- 速领:「人工智能算法从入门到精通教程」
小伙伴从去年年底开始,一直叨叨要跳槽,大大小小的公司面试了很多,但总没有拿到一个满意的offer,要么package太低,要么就是面试被虐. 经过前几次的面试失利,终于明白了什么叫基础不牢,地动山摇. ...
- python语言入门与精通-终于懂得python从入门到精通教程
对只用一种语言来构建某个项目的情况而言,Javascript和它的框架是非常有用的.Angular.js可以控制展示给用户的网站前端.Node.js将作为管理网站所有内容的网络服务器.Express. ...
- 数独游戏技巧从入门到精通_中国茶艺技巧:500集从入门到精通教程,视频+素材+笔记...
中国茶艺技巧:500集从入门到精通教程,视频+素材+笔记 学习茶艺可以增加生活中的兴趣爱好,多一门技能,多一项生存能力,将传统文化进行一种简单快乐的传播.以生活为中心,将喜爱为半径,沏一杯美好生活茶. ...
- SpringBoot从入门到精通教程
SpringBoot从入门到精通教程 一.来自ImportNew公众号的SpringBoot教程系列,可参考学习 SpringBoot (一) :入门篇--http://mp.weixin.qq.co ...
- python从入门到精通-终于懂得python从入门到精通教程
对只用一种语言来构建某个项目的情况而言,Javascript和它的框架是非常有用的.Angular.js可以控制展示给用户的网站前端.Node.js将作为管理网站所有内容的网络服务器.Express. ...
最新文章
- (Interrupt Latency) 中断延迟
- 又现神论文!《本人娶刘亦菲的可行性报告》省级期刊收录
- 如何利用CIC滤波器、CIC补偿滤波器和半带滤波器设计一个高频数字抽取滤波器
- [J2ME]手机看交通监视器实时录像 实现说明
- 高并发-【抢红包案例】之三:使用乐观锁方式修复红包超发的bug
- Python中的线程threading.Thread()使用详解
- LeetCode——Kth Largest Element in an Array
- struts实现分页_在TensorFlow中实现点Struts
- 机器学习基石作业一中的PLA和POCKET_PLA实现
- Delphi的TdxDBGrid自带的一些有用的导出文件的函数(EXCEL、HTML、XML、TXT、INI、Registry等)
- lambda表达式for_each,find_if简介
- ms12_004漏洞进行渗透
- Android设置全屏代码
- html中div的覆盖,CSS中如何使div覆盖另一个div的实例
- 十大领域五大过程组(上):你必须了解的项目管理常识
- PANet(2018)
- “Mac OS X“录屏幕视频并转成gif
- 大学计算机应用基础考试题库,大学计算机应用基础考试题库.doc
- 纹宁指纹采集设备完美适配国产化操作系统
- python 实现跳一跳自动化代码_跳一跳AI(wai gua)的实现原理详细介绍
热门文章
- 【NOI2015模拟YYT】传送
- 修改centos stage2.img 文件
- Openstack 虚机忘记密码
- java 抓取 flash 控件,java-从Flash抓取数据(游戏)
- 【webp】【Java】常用方法示例
- 通过python递归来解决孔明棋问题
- web3.0学习入门6:web3.0开发入门
- EXCEL地图 | 在EXCEL中也能绘制GIS地图,也能导出ShapFile文件,还能...
- python编程从入门到实践第二版答案(第三章)
- 使用Android4.4新增新媒体功能中的音量增强器LoudnessEnhancer实现仿酷狗音乐一键强音功能