做平面素材比较好的网站,局域网建设网站工具,网站流量用完了,做线下活动的网站文章目录 一、初始React1. React的基本认识2. Hello案例2.1 三个依赖2.2 渲染页面2.3 hello案例完整代码 二、类组件1. 封装类组件2. 组件里的数据3. 组件里的函数 (重点)4. 案例练习(1) 展示电影列表 三、JSX语法1. 认识JSX2. JSX书写规范及注释3. JSX嵌入变量作为子元素4. JS… 文章目录 一、初始React1. React的基本认识2. Hello案例2.1 三个依赖2.2 渲染页面2.3 hello案例完整代码 二、类组件1. 封装类组件2. 组件里的数据3. 组件里的函数 (重点)4. 案例练习(1) 展示电影列表 三、JSX语法1. 认识JSX2. JSX书写规范及注释3. JSX嵌入变量作为子元素4. JSX嵌入表达式5. JSX绑定属性(1) title,src,href属性(2) 绑定class(3) 绑定style样式 一、初始React
1. React的基本认识
React是用于构建用户界面的JavaScript库 React官网文档React官网
React的三个特点
(1) 声明式编程 (2) 组件化开发 和Vue一样将复杂的页面分解成一个个组件 (3) 多平台适配 2013 React发布之初是开发Web页面 2015 推出ReactiveNative用于开发移动端平台 2017 推出ReactVR用于开发虚拟显示Web应用程序。
2. Hello案例 2.1 三个依赖
React需要引入三个依赖
(1) react包含react所必须的核心代码 (2) react-domreact渲染在不同平台所需要的核心代码 (3) babel将jsx转换成React代码的工具
引入的方式有三种
(1) CDN引入 (2) 下载引入 (3) npm下载引入(脚手架)
本案例中采用cdn引入 script crossorigin srchttps://unpkg.com/react18/umd/react.development.js/scriptscript crossorigin srchttps://unpkg.com/react-dom18/umd/react-dom.development.js/script!-- babel --script srchttps://unpkg.com/babel-standalone6/babel.min.js/script拓展: Babel是目前前端使用非常广泛的编译器可以将Es6、React JSX语法、TypeScript等语法转化为普通的JavaScript代码让浏览器认识代码并运行。
2.2 渲染页面
React18版本前后渲染Dom的写法不同
React18之前 ReactDOM.render(渲染的内容容器) React18之后 ReactDOM.createRoot(容器).render(渲染的内容) 渲染的内容指的是html结构或组件 容器也就是指定在哪里渲染页面 div idroot/div!-- 指定typetext/babelbabel才会解析这里的jsx语法代码 --script typetext/babel // 渲染Hello World// React18之前://ReactDOM.render(h2Hello World/h2, document.querySelector(#root))// React18之后:const root ReactDOM.createRoot(document.querySelector(#root))root.render(h2Hello World/h2)/script2.3 hello案例完整代码 !-- 定义一个容器 --div idroot/div!-- 添加依赖三个依赖 --script crossorigin srchttps://unpkg.com/react18/umd/react.development.js/scriptscript crossorigin srchttps://unpkg.com/react-dom18/umd/react-dom.development.js/scriptscript srchttps://unpkg.com/babel-standalone6/babel.min.js/scriptscript typetext/babelconst root ReactDOM.createRoot(document.querySelector(#root))// 1. 定义内容变量let message Hello World// 2. 初始化渲染页面rootRender()// 渲染页面函数为了在后续更新页面时方便渲染将渲染封装成一个函数function rootRender () {root.render((divh2{message}/h2button onClick{btnClick}修改内容/button/div))}// 按钮监听事件function btnClick () {// 1.修改数据message Hello React// 2. 重新渲染rootRender()}/script总结
读取变量使用单括号{message},不像Vue用双括号{{}}绑定点击事件用onClick{函数名},Vue是click函数名需要自己调用函数进行渲染Vue是会自动渲染。注意下面这样的写法是错误的即只渲染部分页面。这样渲染的h2会将button覆盖掉
二、类组件
React中组件有两类类组件和函数式组件
1. 封装类组件
(1) 定义一个类(继承React.Component)类名必须大写(类名就是组件名),小写会被认为是HTML元素。 (2) 实现当前组件的render函数:render返回的jsx内容就是之后React会渲染的内容。 script typetext/babel// 定义组件Appclass App extends React.Component {constructor() {super()}// 组件数据// 组件方法(实例方法)// 渲染到界面上,render函数render () {return h2hello world/h2}}// 将组件渲染到界面上const root ReactDOM.createRoot(document.querySelector(#root))root.render(App /) // App根组件渲染到界面上/script执行 root.render(App /)语句时会调用类中的render方法进行界面渲染。
2. 组件里的数据
数据分为两类参与界面更新、不参与界面更新。 参与界面更新的数据也叫参与数据流定义在当前对象的state中写在构造函数里。 使用该数据时this.state.变量名称 修改数据时 this.setState(....) class App extends React.Component {constructor() {super()// 定义数据this.state {message: Hello World,}}// 渲染时使用数据render () {return (divh2{this.state.message}/h2button修改内容/button/div)}}3. 组件里的函数 (重点)
需要提前看一下严格模式里的this指向问题博主DantinZhang总结的严格模式 在严格模式下函数在独立调用时(不是通过某个对象调用)this的值为undefined
babel在编译代码时自动加上了use strict,即设置为严格模式 需要知道ES6类中的函数都会默认开启严格模式
script typetext/babel
class App {constructor(name) {this.name name;} btnClick () {//这里其实默认开启了严格模式console.log(btn:, this);}
}
//搞清楚this的问题
let app new App();
let out app.btnClick ;
out(); //这里打印undefined是因为函数里默认开启严格模式function fun () {console.log(fun, this);}fun() // 这里打印undefined是因为babel编译时加了严格模式/script将 typetext/babel去掉之后out()是类里的函数还是打印undefined而fun()不是类里的函数去掉babel后打印Window。
本案例需要在点击事件的回调函数里修改message的值 btnClick () {// 通过this.setState修改message的值this.setState({message: Hello React})}问题是btnClick里的this不指向实例对象指向undefined 解决方式一 绑定回调函数时通过bind改变this的指向。 解决方式二在构造函数里改变this指向这也是官方推荐的写法。
!-- 定义一个容器 --
div idroot/divscript typetext/babel// 1. 定义类组件class App extends React.Component {constructor() {super()// 1.1 定义组件数据添加一个state属性存储数据,名字不能改,必须叫statethis.state {message: Hello World,}// 1.4 对需要绑定的方法提前绑定好thisthis.btnClick this.btnClick.bind(this)}// 1.3 组件方法(实例方法)btnClick () {console.log(btn:, this);this.setState({message: Hello React})}// 1.2 渲染函数名字不能改就叫renderrender () {return (divh2{this.state.message}/h2button onClick{this.btnClick}修改内容/button/div)}}// 2. 将组件渲染到界面上const root ReactDOM.createRoot(document.querySelector(#root))root.render(App /) // App根组件渲染到界面上
/scriptsetState方法来自于继承的React.Componetn,其内部完成了两件事 (1) 将state里的message值改掉(2) 自动重新执行render函数
4. 案例练习
案例多写几遍熟悉结构
(1) 展示电影列表
!-- 定义一个容器 --div idroot/divscript typetext/babel// 1. 定义类组件class App extends React.Component {constructor() {super()this.state {movies: [飞屋环游记, 夏日友情天, 玩具总动员]}} render(){...}}// 2. 渲染组件const root ReactDOM.createRoot(document.querySelector(#root))root.render(App /)/script渲染方式一循环遍历 render () {// 遍历展示数据let lis []for (let i 0; i this.state.movies.length; i) {let ele li{this.state.movies[i]}/lilis.push(ele)}return (divh2电影名字/h2ul{lis}/ul/div)}渲染方式二map函数 // 渲染方式二maprender () {let lis this.state.movies.map(item li{item}/li)return (divh2电影名字/h2ul{lis}/ul/div)}三、JSX语法
1. 认识JSX // 1. 定义元素内容const element divHello World/div// 2. 渲染const root ReactDOM.createRoot(document.querySelector(#root))root.render(element)在js中将一段html直接赋值给变量element会出现语法错误。而在jsx语法中(开启babeltypetext/babel)第2行代码不会报错。
JSX是一种JavaScript的语法扩展(eXtension),也称为JavaScript XML它用于描述我们的UI界面并且它可以和JavaScript融合在一起使用它不同于Vue中的模块语法不需要专门学习模块语法中的一些指令比如v-for、v-if、v-else、v-bind;
2. JSX书写规范及注释
书写规范 (1) JSX只能有一个根元素一般会在外层包裹一个div或者使用后边学习的Fragment (2) 为了方便阅读有多行代码时会在jsx外层包裹一个小括号 (3) JSX中的标签可以是单标签或双标签 注释 语法{/*注释内容...*/} render () {return (div{/*JSX的注释写法*/}// JSX的注释写法---这样写仍旧会展示到页面上h2当前计数为{this.state.number}/h2/div)}3. JSX嵌入变量作为子元素
子元素就是标签里的内容。h2 title111aaa/h2 aaa是子元素title是标签属性。
(1). 当变量是Number,String,Array类型时可以直接显示 this.state {// 1. 变量是NumberStringArray类型number: 0,name: tom,movies: [加勒比海盗, 百鸟朝凤, 飞屋环游记],}render () {const { number, name, movies } this.statereturn (div{/*1. 变量是NumberStringArray时直接显示*/}h2{number}/h2h2{name}/h2h2{movies}/h2/div)}(2). 当变量是null,undefined,Boolean类型时不显示 若要显示则需要转换成字符串(比如toString方法、空字符串拼接、String(变量)) this.state {// 2. 变量是null, undefined, Booleanaaa: null,bbb: undefined,ccc: true,}render () {const { aaa, bbb, ccc } this.statereturn (div{/*2. 变量是null, undefined, Boolean时内容为空*/}h2{aaa}/h2h2{bbb}/h2h2{ccc}/h2{/*2 若要显示则需要转换成字符串*/}h2{aaa }/h2h2{String(bbb)}/h2h2{ccc.toString()}/h2/div)}(3). Object对象类型的变量不能作为子元素会报错 this.state {friend: {name: jerry}}render () {const { friend } this.statereturn (divh2{friend}/h2/div)}可以写对象里具体的属性 {/*h2{friend}/h2*/}h2{friend.name}/h2 // jerryh2{Object.keys(friend)[0]}/h2 // name4. JSX嵌入表达式
运算表达式三元运算符执行函数 this.state {firstName: 张,lastName: 三,age: 20,movies: [流浪地球, 星际穿越, 独行月球]}// 渲染函数render () {const { firstName, lastName } this.stateconst fullName firstName lastNameconst { age } this.stateconst ageText age 18 ? 成年人 : 未成年人return (div{/*1 运算表达式*/}h2{10 20}/h2h2{firstName lastName}/h2h2{fullName}/h2{/*2 三元运算符*/}h2{ageText}/h2h2{age 18 ? 成年人 : 未成年人}/h2{/*3 执行一个函数*/}ul{this.state.movies.map(movie li{movie}/li)}/ulul{this.getMovieEls()}/ul/div )}getMovieEls () {const liEls this.state.movies.map(movie li{movie}/li)return liEls}5. JSX绑定属性
(1) title,src,href属性
this.state {title: 哈哈哈,imgURL: https://ts1.cn.mm.bing.net/th/id/R-C.95bc299c3f1f0e69b9eb1d0772b14a98?rikW5QLhXiERW4nLQriuhttp%3a%2f%2f20178405.s21i.faiusr.com%2f2%2fABUIABACGAAgoeLO-wUo4I3o2gEw8Qs4uAg.jpgehkN7Bxe9nqM08w4evC2kK6yyC%2bxIWTjdd6HgXsQYPbMj0%3drislpidImgRawr0,href: https://www.baidu.com,
}
// 渲染函数render () {const { title, imgURL, href } this.statereturn (divh2 title{title}h2 标题/h2img src{imgURL} /a href{href}百度链接/a/div )}(2) 绑定class
需求给h2绑定 abc cba, 当isActive为true时绑定active,否则不绑。 注意React绑定类名时用className而不是class用class会有警告
(1)方式一拼接字符串 this.state {isActive: false}render () {const { isActive } this.state// 1. 绑定方法一字符串拼接const className abc cba ${ isActive ? active : }return (divh2 classNameabc cba哈哈哈哈/h2{/*动态绑定*/}h2 className{className}哈哈哈哈/h2/div )}缺点是当isAcrtve为false时类名里会多出一个空格
(2) 方式二将所有的class类名放到数组里 render () {const { isActive } this.state// 2. 绑定方法二将所有的class放到数组里const className [abc, cba]// isActive为true就添加active类名if (isActive) className.push(active)return (divh2 className{className.join()}哈哈哈哈/h2/div )}}当className为数组时: 类名解析出来有逗号h2 classabc,cba哈哈哈哈/h2 所以需要.join进行处理 (3)方式三第三方库classnames - npm install classnames后续再补充
(3) 绑定style样式
绑定style样式时需要使用对象形式属性名采用驼峰命名 注意JSX绑定子元素时不可以用对象这里是绑定属性可以用对象 this.state {objStyle: { color: red, fontSize: 30px }}render () {const {objStyle } this.statereturn (div{ /* 绑定style属性: 绑定对象类型第一个{}是语法第二个{}表示对象 */}h2 style{{ color: red, fontSize: 30px }}呵呵呵呵/h2h2 style{objStyle}呵呵呵呵/h2/div )}
