海盐市网站建设,网站建设专家证书,白沟做网站,南通哪里做网站React#xff08;一#xff09;一、初识React1.简单介绍2.React的三个依赖3.Hello React案例二、类组件1.定义类组件并渲染2.绑定事件函数#xff08;奇怪的this问题#xff09;3.数组形式数据的展示#xff08;电影案例#xff09;4.计数器案例三、jsx语法详解1.jsx的书…
React一一、初识React1.简单介绍2.React的三个依赖3.Hello React案例二、类组件1.定义类组件并渲染2.绑定事件函数奇怪的this问题3.数组形式数据的展示电影案例4.计数器案例三、jsx语法详解1.jsx的书写规范2.jsx的注释3.jsx嵌入变量3.jsx嵌入表达式4.jsx绑定属性一、初识React
1.简单介绍
React是什么用于构建用户界面的 JavaScript 库 React的官网文档https://react.docschina.org/
React的特点 1、声明式编程声明式编程是目前整个大前端开发的模式Vue、React、Flutter、SwiftUI
2、组件化开发 3、多平台适配
2.React的三个依赖
1、react包含react所必须的核心代码 2、react-domreact渲染在不同平台所需要的核心代码 3、babel将jsx转换成React代码的工具
依赖的引入有很多方式 1、直接引入CDN连接 2、下载后添加本地依赖 3、脚手架npm引入
前期的学习中先在html中使用CDN引入引入React18
!-- 引入三个依赖的库 --
!-- 1.引入react核心代码库 --
script crossorigin srchttps://unpkg.com/react18/umd/react.production.min.js/script
!-- 2.引入渲染核心代码库 --
script crossorigin srchttps://unpkg.com/react-dom18/umd/react-dom.production.min.js/script
!-- 3.引入将jsx转换成react代码的工具库 --
script srchttps://unpkg.com/babel-standalone6/babel.min.js/script3.Hello React案例
同样作为MVVM结构的框架React在渲染DOM的时候也有自己的方式
这里要注意在React18版本前后我们的写法是不一样的
React18之前使用ReactDOM.render(html结构或组件容器)React18之后使用ReactDOM.createRoot(容器).render(html结构或组件)
!-- 准备好一个容器 --
div idroot/divscript typetext/babel//渲染Hello World//React18之前使用ReactDOM.render// ReactDOM.render(h2Hello World/h2, document.querySelector(#root));//React18之后const root ReactDOM.createRoot(document.querySelector(#root));root.render(h2Hello World/h2);
/script接下来是我们的点击按钮切换信息的Hello React案例完整版
!-- 准备好一个容器 --
div idroot/divscript typetext/babel//渲染Hello World//1.定义一个变量来存储信息let message Hello Word!;//React18之前使用ReactDOM.render//ReactDOM.render(h2Hello World/h2, document.querySelector(#root));//React18之后//2.定义容器const root ReactDOM.createRoot(document.querySelector(#root));//3.先调用一次渲染函数,渲染页面rootRender();//下面是预先定义好的函数//函数一渲染函数function rootRender() {root.render(divh2{message}/h2button onClick{changeMsg}点击修改信息/button/div);}//函数二按钮的点击事件触发函数function changeMsg() {message Hello React!;console.log(message); //函数调用了,但是没有重新渲染rootRender(); //修改完后重新渲染页面}
/script总结这里和Vue对比有几个不一样的地方 1、定义容器并渲染的过程重新渲染要自己调用渲染函数不像Vue会自动更新页面 2、读取变量使用单括号{ name }不像Vue用双括号{{}} 3、html的结构要作为参数传到render函数中不像Vue直接编辑html结构 4、点击事件使用onClick{函数名}而Vue是v-on:click函数名
二、类组件
在React中有两种定义组件的防止一种是类组件另一种是函数组件这里我们使用ES6的类来声明组件把刚才的Hello React案例用组件的方式呈现出来。
1.定义类组件并渲染
1、定义类组件继承React.Component并继承父类的属性
!-- 准备好一个容器 --
div idroot/divscript typetext/babel//1.定义类组件class App extends React.Component {constructor() {super();}}
/script2、添加一个state属性用来存储数据名字必须叫state
!-- 准备好一个容器 --
div idroot/divscript typetext/babel//1.定义类组件class App extends React.Component {constructor() {super();this.state {message: hello world,}}}
/script3、定义一个render渲染函数名字必须叫render当我们拿到容器渲染组件时就会自动调用这个函数返回相应的html节点
!-- 准备好一个容器 --
div idroot/divscript typetext/babel//1.定义类组件class App extends React.Component {constructor() {super();this.state {message: hello world,}}render() {return (divh2{this.state.message}/h2button点击切换信息/button/div)}}
/script4、拿到容器渲染组件
!-- 准备好一个容器 --
div idroot/divscript typetext/babel//1.定义类组件class App extends React.Component {constructor() {super();//1.1添加一个state属性存储数据,名字不能改,必须叫statethis.state {name: zzy,message: Hello World!,}}//1.3事件函数//1.2渲染函数,名字不能改,必须叫renderrender() {return (divh2{this.state.message}/h2button onClick{this.changeMsg}点击修改信息/button/div)}}//2.拿到容器,渲染组件let root ReactDOM.createRoot(document.querySelector(#root));root.render(App/);
/script2.绑定事件函数奇怪的this问题
这里有一个this 的问题先复习一下严格模式的东西严格模式 这里要知道ES6类中的函数都会默认开启严格模式this指向undefined
class App {constructor(name) {this.name name;}changeMsg() {//这里其实默认开启了严格模式console.log(this);}
}//搞清楚this的问题
let app new App();
let out app.changeMsg;
out(); //undefined也就是说只有类的实例调用类原型上的方法时this才有指向指向实例
这里我们可以看到直接给按钮绑定了一个事件函数那么在调用的时候调用者不是实例this肯定不指向实例。
调用这个函数就是调用类中的函数那么this就是undefined可是这样我们怎么顺着原型链访问setState进而对数据进行更改呢其实很简单只需要在constructor中改变事件函数的this指向
//1.4保存事件函数this指向
this.changeMsg this.changeMsg.bind(this);!-- 准备好一个容器 --
div idroot/divscript typetext/babel//1.定义类组件class App extends React.Component {constructor() {super();//1.1添加一个state属性存储数据,名字不能改,必须叫statethis.state {name: zzy,message: Hello World!,}//1.4保存事件函数this指向this.changeMsg this.changeMsg.bind(this);}//1.3事件函数changeMsg() {console.log(this);this.setState({message: Hello React!,})}//1.2渲染函数,名字不能改,必须叫renderrender() {return (divh2{this.state.message}/h2button onClick{this.changeMsg}点击修改信息/button/div)}}//2.拿到容器,渲染组件let root ReactDOM.createRoot(document.querySelector(#root));root.render(App/);
/scriptsetState这个方法做了两件事1、更改数据 2、重新渲染
3.数组形式数据的展示电影案例
方法1遍历生成li然后统一放到一个数组里然后把数组直接展示
!-- 准备好一个容器 --
div idroot/divscript typetext/babelclass App extends React.Component {constructor() {super();this.state {movies: [星际争霸, 魔兽世界, 流浪地球, 奥里给]}}render() {//1.遍历展示数组的方法1let lis [];for(let i 0; i this.state.movies.length; i) {let movie this.state.movies[i];let li li{movie}/li;lis.push(li);}return (divh2电影名字/h2ul{lis}/ul/div )}}let root ReactDOM.createRoot(document.querySelector(#root));root.render(App/);
/script方法2使用map遍历数组返回一个修改后的新数组
render() {//2.方法2,直接映射let lis this.state.movies.map(el li{el}/li)return (divh2电影名字/h2ul{lis}/ul/div )
}4.计数器案例
点击加一或减一
div idroot/div
script typetext/babelconst root ReactDOM.createRoot(document.querySelector(#root));class App extends React.Component {constructor() {super();this.state {count: 0,}//改变this的指向this.add this.add.bind(this);this.subtract this.subtract.bind(this);}render() {let { count } this.state;return (divh2{count}/h2button onClick{this.add}点击1/buttonbutton onClick{this.subtract}点击-1/button/div)}//事件函数add() {this.setState({// count: this.state.count 1count: this.state.count})}subtract() {this.setState({count: --this.state.count})}}root.render(App/);
/script三、jsx语法详解 我们直接把标签赋值给变量这种写法在原来的js环境会报错但是在jsx中开启了babel就不会报错这就是一段jsx语法。
JSX是一种JavaScript的语法扩展eXtension。它用于描述我们的UI界面并且其完成可以和JavaScript融合在一起使用它不同于Vue中的模块语法你不需要专门学习模块语法中的一些指令比如v-for、v-if、v-else、v-bind
1.jsx的书写规范
React认为渲染逻辑本质上与其他UI逻辑存在内在耦合。 比如UI需要绑定事件UI需要展示数据当数据变化时UI又要更新所以React没有把它们单独分开而是封装成组件。那么jsx有什么书写规范呢
1、JSX的顶层只能有一个根元素所以我们很多时候会在外层包裹一个div原生或者使用后面我们学习的Fragment
render() {let { count } this.state;return (divh2{count}/h2br//div)
}2、为了方便阅读我们通常在jsx的外层包裹一个小括号()这样可以方便阅读并且jsx可以进行换行书写 3、JSX中的标签可以是单标签也可以是双标签 注意如果是单标签必须以/结尾在html中不用/也行但在这里会报错
2.jsx的注释
在大括号中使用/**/包裹注释
render() {let { count } this.state;return (div{/*这是一段注释*/}h2{count}/h2/div)
}3.jsx嵌入变量
1、String/Number/Array这三种类型都可以正常显示其中数组会自己拆开
constructor() {super();this.state {name: zzy, //Stringage: 18, //Numberhabits:[吃饭,睡觉] //Array}
}render() {let { name,age,habits } this.state;return (div{/*这是一段注释*/}h2{name}/h2h2{age}/h2h2{habits}/h2/div)
} 2、undefined/null/Boolean这三种类型默认不会显示因为有时候我们请求数据如果没请求到那么肯定不能把undefined显示出来。如果非要显示请连接字符串或toString()
constructor() {super();this.state {a: undefined, //undefinedb: null, //nullc: true, //Boolean}
}render() {let { a, b, c } this.state;return (divh2{a}/h2h2{b}/h2h2{c}/h2/div)
}3、Object对象类型作为嵌入变量会报错。
constructor() {super();this.state {friend: {name: ht,age: 18,}}
}render() {let { friend } this.state;return (divh2{friend}/h2 {/*报错*/}/div)
}3.jsx嵌入表达式
1、运算符表达式
constructor() {super();this.state {firstName: zzy,lastName: ht,}
}render() {let { firstName, lastName } this.state;return (divh2{firstName lastName}/h2h2{30 20}/h2/div)
}2、三元表达式
constructor() {super();this.state {num: 99,}
}render() {let { num } this.state;return (divh2{num 10 ? big : small}/h2/div)
}3、调用函数获取返回值
constructor() {super();this.state {num: 99,}
}render() {return (divh2{this.getNum()}/h2/div)
}getNum() {return this.state.num;
}4.jsx绑定属性
比如img元素会有src属性、a元素会有href属性、元素可能需要绑定class、原生使用内联样式style等等都可以动态去绑定。
1、绑定普通属性
constructor() {super();this.state {imgUrl: http://p2.music.126.net/L8IDEWMk_6vyT0asSkPgXw/109951163990535633.jpg,link: http://www.baidu.com}
}render() {let { imgUrl, link } this.state;return (divimg src{imgUrl}/a href{link}百度/a/div)
}2、绑定class样式。在React中一般用className而不用calss因为class是类的关键字
.zzy {color: blue;font-size: 30px;
}这里动态绑定类名有两种方式一种是三元表达式字符串拼接或模板字符串一种是定义一个数组然后push进去再读取数组。 这里要注意jsx在属性中引用数组时和在页面上展示数据时不一样 1、属性中引用是用逗号隔开。 2、页面展示则是直接字符串相连。 constructor() {super();this.state {active: true,msg: 动态绑定类}
}render() {let { msg, active } this.state;//动态绑定类名方式一let className zzy ${active ? active : };//动态绑定类名方式二let classArr [zzy,ht];if(active) classArr.push(active);return (divh2 classNamezzy{msg}/h2h2 className{className}{msg}/h2{/*2.绑定class*/}{/*属性动态绑定数组转为字符串自动逗号隔开*/}{/*展示部分动态绑定数组转为字符串自动去掉逗号*/}h2 className{classArr.join( )}{msg}/h2/div)
}3、绑定style样式这里要使用对象的形式属性名采用驼峰命名这里和我们刚才提到的html内容展示是不一样的内容展示用对象会报错而属性绑定这里不会报错即双括号{{}}
constructor() {super();this.state {msg: 动态绑定style}
}render() {return (div{/*3.绑定style*/}h2 style{{color:blue,fontSize:36px}}{this.state.msg}/h2/div)
}
