目录
React是一个用于构建用户界面的JavaScript库。
用户界面:HTML页面(前端)
React主要用来写HTML页面,或构建Web应用。
如果从MVC的角度来看,React仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了完整的M和C的功能。
React的特点
1.声明式:只需描述UI(HTML)看起来是什么样,就跟写HTML一样。React负责渲染UI,并在数据变化时更新UI。
2.基于组件:
· 组件是react最重要的内容
· 组件表示页面中的部分内容
· 组合、复用多个组件,可以实现完整的页面功能
3.学习一次,随处使用
· 使用React可以开发Web应用
· 使用React可以开发移动端原生应用(react-native)
· 使用React可以开发VR(虚拟现实)应用(react 360)
React的安装
安装命令:npm i react react-dom
· react包是核心,提供创建元素、组件等功能
· react-dom包提供DOM相关功能等
React的使用
1.引入react和react-dom两个js文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
2.创建React元素
3.渲染React元素到页面中
方法说明
· React.creatElement()说明
//返回值:React元素
//第一个参数:要创建的React元素名称
//第二个参数:该React元素的属性
//第三个及其以后的参数:该React元素的子节点
const el = React.createElement('h1',{title:'标题'},'Hello React')
· ReactDOM.render()说明
//第一个参数:要渲染的React元素
//第二个参数:DOM对象,用于指定渲染到页面中的位置
ReactDOM.render(el, document.getElementById('root'))
React脚手架的使用
安装react脚手架命令:npm i -g create-react-app
1.初始化项目,命令:npx create-react-app my-app(项目名不能包含大写字母)或者yarn create react-app myapp
2.启动项目,在项目根目录执行命令:npm start或者yarn start
在脚手架中使用React
1.导入react和react-dom两个包
import React from 'react'
import ReactDOM from 'react-dom'
2.调用React.createElement()方法创建react元素。
3.调用ReactDOM.render()方法渲染react元素到页面中。
react18👇
JSX
JSX的基本使用
1.createElement()的问题:繁琐、不直观,用户体验不爽。
JSX是Javascript XML的简写,表示在JavaScript代码中写XML(HTML)格式的代码。
优势:声明式语法更加直观,与HTML结构相同,降低了学习成本、提升开发效率
JSX是React的核心内容
使用步骤:1.使用JSX语法创建react元素
// 使用JSX语法,创建react元素:
const title = <h1>Hello JSX</h1>
2.使用ReactDOM.render()方法渲染react元素到页面中
// 渲染创建好的React元素
ReactDOM.render(title,root)
为什么脚手架中可以使用JSX语法?
1.JSX不是标准的ECMAScript语法,它是ECMAScript的语法扩展。
2.需要使用babel编译处理后,才能在浏览器环境中使用。
3.create-react-app脚手架中已经默认有该配置,无需手动配置。
4.编译JSX语法的包为:@babel/preset-react。
注意点:
1.React元素的属性名使用驼峰命名法
2.特殊属性名:class -> className、for -> htmlFor、tabindex -> tabIndex。
3.没有子节点的React元素可以用/>结束。
4.推荐:使用小括号包裹JSX,从而避免JS中的自动插入分号陷阱。
JSX中使用JavaScript表达式
嵌入JS表达式
· 数据存储在JS中
· 语法:{JavaScript表达式}
· 注意:语法中是单大括号,不是双大括号!
JSX条件渲染
· 场景:loading效果
· 条件渲染:根据条件渲染特定的JSX结构
· 可以使用if/else或三元运算符或逻辑与运算符来实现
JSX列表渲染
· 如果要渲染一组数据,应该使用数组 的map()方法
· 注意:渲染列表时应该添加key属性,key属性的值要保证唯一
· 原则:map()遍历谁,就给谁添加key属性。
· 注意:尽量避免使用索引号作为key
JSX样式处理
1.行内样式------ style
2.类名-----className(推荐)
React组件
react组件介绍
· 组件是React的一等公民,使用React就是在用组件
· 组件表示页面中的部分功能
· 组合多个组件实现完整的页面功能
· 特点:可复用、独立、可组合
react组件的两种创建方式
1.使用函数创建组件
· 函数组件:使用JS的函数(或箭头函数)创建的组件
· 约定1:函数名称必须以大写字母开头
· 约定2:函数组件必须有返回值,表示该组件的结构
· 如果返回值为null,表示不渲染任何内容
· 渲染函数组件:用函数名作为组件标签名
· 组件标签可以是单标签也可以是双标签
使用JS中的函数创建的组件叫做:函数组件
函数组件中必须有返回值
组件名称必须以大写字母开头,React据此区分组件和普通的React元素
2.使用类创建组件
· 类组件:使用ES6的class创建的组件
· 约定1:类名称也必须以大写字母开头
· 约定2:类组件应该继承React.Component父类,从而可以使用父类中提供的方法或属性
· 约定3:类组件必须提供render()方法
· 约定4:render()方法必须有返回值,表示该组件的结构。
抽离为独立JS文件
1.创建Hello.js(例)
2.在Hello.js中导入React
3.创建组件(函数或类)
4.在Hello.js中导出该组件
5.在index.js中导入Hello组件
6.渲染组件
React事件处理
事件绑定
· React事件绑定语法与DOM事件语法相似
· 语法:on + 事件名称={事件处理程序},比如:onClick={() => {}}
· 注意:React事件采取驼峰命名法,比如:onMouseEnter、onFocus
· 在函数组件中绑定事件:
事件对象
· 可以通过事件处理程序的参数获取到事件对象
· React中的事件对象叫做:合成事件(对象)
· 合成事件:兼容所有浏览器,无需担心跨浏览器兼容性问题
这个文档太长啦,开启下一个新的啦