目录
React
React是一个用于构建用户界面的JavaScript库。用户界面:HTML页面(前端)。React主要用来写HTML页面,或构建Web应用。
如果从 MVC的角度来看,React仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了完整的M和C的功能。React起源于Facebook的内部项目,后又用来架设Instagram 的网站,并于2013年5月开源。
React高效的原因
1)使用虚拟DOM,不总是直接操作页面真实DOM。
2)DOM Diffing算法,最小化页面重绘。
React的安装与使用
新建终端执行如下npm命令:(默认安装最新版本)
# react包是核心,提供创建元素、组件等功能
# react-dom包提供DOM相关功能等
npm install react react-dom
<body>
<div id="root"></div>
<!-- 1、引入JS文件 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
// 2、创建react元素
// 参数一:元素名称、参数二:元素属性、第三个及其以后的参数:元素子节点
const say = React.createElement('h1',null,'hello react')
// 3、渲染react元素
// 参数一:要渲染的react元素、参数二:挂载点,指定要渲染到页面中的位置
ReactDOM.render(say,document.getElementById('root'))
//渲染App到页面
</script>
</body>
警告:React 18 不再支持 ReactDOM.render。请改用 createRoot。在您切换到新的 API 之前,您的应用会像运行 React 17 一样运行。
React18于2022年3月29日发布。ReactDOM.render虽然在React18中已被弃用,但仍然能在兼容模式下运行并使用,就是控制台老是有个警告,看着闹心。
撰写本文时,React的版本已经达到18.2,这里提一下,因为React的版本在17更新到18时,有很多的语法在React18中都弃用了,但是有很多老项目还是使用React17的版本,所以我们还是需要学会一下React17的语法。 接下来的几篇文章都是围绕React17进行讲解,后期会更新到18版本讲解React的变化和使用。
为了消除React18中使用17的语法所产生的警告,我们需要降低版本至17,此时我们可以使用以下命令进行降级。
注意:npm install 安装库@版本号 --save
17.x 表示的更新范围为>=17.0.0&&< 18.0.0
17.2.x 表示的更新范围为>=17.2.0&&< 17.3.0
npm install react@17.x react-dom@17.x --save
JSX语法及使用
react定义的一种类似于XML的JS扩展语法:JS+XML,全称是JavaScript XML。
本质:React.createElement(component,props,...children)方法的语法糖。
作用:用来简化创建虚拟DOM
写法:var vdom = <h1>hello jsx!</h1> ,它不是字符串也不是HTML/XML标签,它最终产生的就是一个JS对象,标签名是任意的,可以是HTML标签或其它标签。
<body>
<div id="root"></div>
<!-- 引入react核心库 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作dom -->
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// 创建虚拟DOM
const say = (
<h1 id="myh1">
<span className="myspan">我是span标签</span>
</h1>
)
// 渲染虚拟DOM到页面
ReactDOM.render(say,document.getElementById('root'))
//渲染App到页面
</script>
</body>
注意:在jsx中定义虚拟DOM时,不要写引号;标签中混入JS表达式时要用 {} 。
注意:在jsx中样式的类名指定不要用class,要用className;内联样式要用style={{key:value}}的形式进行书写。
注意:在jsx中只有一个根标签;所有标签必须闭合 ;标签的首字母要是小写需写html存在的标签,要是大写则表明是要渲染组件,如果组件没有定义则报错。
和Vue框架一样,当我们要循环遍历数据的时候,也是需要一个特有的key值,如下:
模块与组件
模块:向外提供特定功能的js程序,一般就是一个js文件,随着业务逻辑增加,代码越来越多且复杂,使用模块能复用js,简化js的编写,提高js运行效率。模块化:当应用的js都以模块来编写的,这个应用就是一个模块化的应用。
组件:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等),一个页面的功能有时会很复杂,使用组件能复用编码,简化项目编码,提高运行效率。组件化:当应用是以多组件的方式实现,这个应用就是一个组件化的应用。
React开发者工具的安装
React官方也提供了 React Developer Tools 这个开发工具,如果有条件的小伙伴可以直接在谷歌浏览器上,找到网上商店,进入搜索工具直接下载即可。没有条件的小伙伴推荐使用一个专门下载插件的网站:极简插件 ,在里面搜索相关插件也能进行下载。
安装完插件之后,f12可以看到控制台出现如下两个选项:
面向组件编程
react官方给我们提供了两种定义组件的方式,如下:
函数式组件
<body>
<div id="root"></div>
<!-- 引入react核心库 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作dom -->
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// 创建函数式组件 (注意:因为是组件,所以组件名称首字母需大写)
function Demo(){
return <h1>我是用函数定义的组件(适用于简单组件的定义)</h1>
}
// React解析组件标签,找到了Demo组件,发现组件是函数定义的,随后调用该函数
// 将返回的虚拟DOM转为真实DOM,随后呈现到页面中
ReactDOM.render(<Demo/>,document.getElementById('root'))
//渲染App到页面
</script>
</body>
在我们使用jsx语法时,有如下情况:
类式组件
使用类式组件需要你对JS的类有一定的掌握,如果不熟悉或者忘记了类的使用,推荐看一下我之前对JS的class类的讲解:读懂JS中—Class类 。
<body>
<div id="root"></div>
<!-- 引入react核心库 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作dom -->
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// 创建类式组件 (继承react本身的组件对象)
class Demo extends React.Component {
// render放在Demo的原型对象上,供实例使用
render() {
console.log(this) // this指向的是 Demo组件的实例对象
return <h1>我是用类定义的组件(适用于复杂组件的定义)</h1>
}
}
// React解析组件标签,找到Demo组件
// 发现组件是类定义的,虽然new出来该类实例,并通过该实例调用到原型的render方法
// 将render返回的虚拟DOM转为真实DOM,随后呈现到页面上
ReactDOM.render(<Demo/>,document.getElementById('root'))
</script>
</body>
查看官方文档给出的写法也是这样: