物联网React(一) 认识React、认识类组件、JSX誊写规范、嵌入变量表达式、绑定属性

勿忘初心做自己 发表于 2024-10-14 16:30:54

React(一) 认识React、认识类组件、JSX誊写规范、嵌入变量表达式、绑定属性

一、初始React

1. React的根本认识

React是：用于构建用户界面的JavaScript库；
React官网文档：React官网
React的三个特点：
(1) 声明式编程
https://i-blog.csdnimg.cn/direct/7343f420f32242029b635f05083bfeb6.png#pic_center
(2) 组件化开辟
和Vue一样，将复杂的页面分解成一个个组件
https://i-blog.csdnimg.cn/direct/b613530fa54c43c180e0bb04cc54a175.png#pic_center(3) 多平台适配
2013 React发布之初是开辟Web页面
2015 推出ReactiveNative用于开辟移动端平台
2017 推出ReactVR，用于开辟虚拟显示Web应用程序。
2. Hello案例

https://i-blog.csdnimg.cn/direct/e37837d750b743b9aefb28ccd672327c.png#pic_center
2.1 三个依靠

React必要引入三个依靠，
(1) react：包含react所必须的焦点代码
(2) react-dom：react渲染在不同平台所必要的焦点代码
(3) babel：将jsx转换成React代码的工具
引入的方式有三种
(1) CDN引入
(2) 下载引入
(3) npm下载引入(脚手架)
本案例中采用cdn引入
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
拓展:
Babel是目前前端使用非常广泛的编译器；可以将Es6、React JSX语法、TypeScript等语法转化为平凡的JavaScript代码，让欣赏器认识代码并运行。
2.2 渲染页面

React18版本前后，渲染Dom的写法不同：
React18之前： ReactDOM.render(渲染的内容，容器)
React18之后： ReactDOM.createRoot(容器).render(渲染的内容)
渲染的内容指的是html结构或组件
容器：也就是指定在那里渲染页面
<div id="root"></div>


<script type="text/babel">
// 渲染Hello World
// React18之前:
//ReactDOM.render(<h2>Hello World</h2>, document.querySelector("#root"))

// React18之后:
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<h2>Hello World</h2>)

</script>
2.3 hello案例完备代码


<div id="root"></div>

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
const root = ReactDOM.createRoot(document.querySelector("#root"))
// 1. 定义内容变量
let message = 'Hello World'

// 2. 初始化渲染页面
rootRender()

// 渲染页面函数，为了在后续更新页面时方便渲染，将渲染封装成一个函数
function rootRender () {
   root.render((
   <div>
      <h2>{message}</h2>
      <button onClick={btnClick}>修改内容</button>
   </div>
   ))
}

// 按钮监听事件
function btnClick () {
   // 1.修改数据
   message = "Hello React"
   // 2. 重新渲染
   rootRender()
}
</script>
总结：

[*]读取变量使用单括号{message},不像Vue用双括号{{}}
[*]绑定点击事件用onClick={函数名},Vue是@click="函数名"
[*]必要自己调用函数进行渲染，Vue是会自动渲染。
[*]留意下面如许的写法是错误的，即只渲染部门页面。如许渲染的<h2>会将button覆盖掉
https://i-blog.csdnimg.cn/direct/bd9f318c7cc64de3bb6bf82b91d65d6d.png#pic_center
二、类组件

React中组件有两类：类组件和函数式组件；
1. 封装类组件

(1) 界说一个类(继续React.Component)，类名必须大写(类名就是组件名),小写会被认为是HTML元素。
(2) 实现当前组件的render函数:render返回的jsx内容，就是之后React会渲染的内容。
<script type="text/babel">
// 定义组件App
class App extends React.Component {
constructor() {
   super()
   }
   // 组件数据
   // 组件方法(实例方法)
   // 渲染到界面上,render函数
   render () {
   return <h2>hello 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 (
      <div>
         <h2>{this.state.message}</h2>
         <button>修改内容</button>
      </div>
   )
   }
}
3. 组件里的函数 (重点)

必要提前看一下严格模式里的this指向题目：博主DantinZhang总结的严格模式
在严格模式下，函数在独立调用时(不是通过某个对象调用)，this的值为undefined；
babel在编译代码时，自动加上了use strict,即设置为严格模式；
必要知道：ES6类中的函数都会默认开启严格模式
<script type="text/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>
将 type="text/babel"去掉之后，out()是类里的函数，还是打印undefined；而fun()不是类里的函数，去掉babel后，打印Window。
本案例必要在点击事件的回调函数里修改message的值
btnClick () {
// 通过this.setState修改message的值
this.setState({
   message: 'Hello React'
})
}
题目是：btnClick里的this不指向实例对象，指向undefined
解决方式一：
绑定回调函数时，通过bind改变this的指向。
https://i-blog.csdnimg.cn/direct/c0200216a22d4c40a6608922723b4175.png#pic_center
解决方式二：在构造函数里改变this指向；这也是官方推荐的写法。

<div id="root"></div>

<script type="text/babel">
// 1. 定义类组件
class App extends React.Component {
constructor() {
   super()
   // 1.1 定义组件数据，添加一个state属性存储数据,名字不能改,必须叫state
   this.state = {
   message: "Hello World",
   }
   // 1.4 对需要绑定的方法，提前绑定好this
   this.btnClick = this.btnClick.bind(this)
}

// 1.3 组件方法(实例方法)
btnClick () {
   console.log('btn:', this);
   this.setState({
   message: 'Hello React'
   })
}

// 1.2 渲染函数，名字不能改，就叫render
render () {
   return (
   <div>
      <h2>{this.state.message}</h2>
      <button onClick={this.btnClick}>修改内容</button>
   </div>
   )
}
}

// 2. 将组件渲染到界面上
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App />) // App根组件渲染到界面上
</script>
setState方法来自于继续的React.Componetn,其内部完成了两件事：
(1) 将state里的message值改掉；(2) 自动重新执行render函数
4. 案例练习

案例多写几遍，认识结构
(1) 展示电影列表


<div id="root"></div>
<script type="text/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}</li>
   lis.push(ele)
}
return (
   <div>
      <h2>电影名字</h2>
      <ul>
      {lis}
      </ul>
   </div>
)
}
渲染方式二：map函数
// 渲染方式二，map
render () {
let lis = this.state.movies.map(item => <li>{item}</li>)
return (
   <div>
      <h2>电影名字</h2>
      <ul>
      {lis}
      </ul>
   </div>
)
}
三、JSX语法

1. 认识JSX

// 1. 定义元素内容
const element = <div>Hello World</div>
// 2. 渲染
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(element)
在js中，将一段html直接赋值给变量element会出现语法错误。而在jsx语法中(开启babel：type="text/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中的标签可以是单标签或双标签
https://i-blog.csdnimg.cn/direct/8846c7969fcd478a8bf38fd20ee95769.png#pic_center
注释
语法：{/*注释内容...*/}
render () {
return (
   <div>
   {/*JSX的注释写法*/}
   // JSX的注释写法---这样写仍旧会展示到页面上
   <h2>当前计数为：{this.state.number}</h2>
   </div>
)
}
https://i-blog.csdnimg.cn/direct/008c6a6f94d84a3f9d31e867a845e19e.png#pic_center
3. JSX嵌入变量作为子元素

子元素就是标签里的内容。<h2 title='111'>aaa</h2> aaa是子元素，title是标签属性。
(1). 当变量是Number,String,Array类型时，可以直接显示
this.state = {
// 1. 变量是Number，String，Array类型
number: 0,
name: 'tom',
movies: ['加勒比海盗', '百鸟朝凤', '飞屋环游记'],
}
render () {
const { number, name, movies } = this.state
return (
<div>
   {/*1. 变量是Number，String，Array时，直接显示*/}
   <h2>{number}</h2>
   <h2>{name}</h2>
   <h2>{movies}</h2>
</div>
)
}
https://i-blog.csdnimg.cn/direct/bd6cd9c8f5ca45f882ee40954d64d962.png#pic_center

(2). 当变量是null,undefined,Boolean类型时，不显示
若要显示，则必要转换成字符串(比如toString方法、空字符串拼接、String(变量))
this.state = {
// 2. 变量是null, undefined, Boolean
aaa: null,
bbb: undefined,
ccc: true,
}
render () {
const { aaa, bbb, ccc } = this.state
return (
   <div>
   {/*2. 变量是null, undefined, Boolean时，内容为空*/}
   <h2>{aaa}</h2>
   <h2>{bbb}</h2>
   <h2>{ccc}</h2>
   {/*2 若要显示，则需要转换成字符串*/}
   <h2>{aaa + ''}</h2>
   <h2>{String(bbb)}</h2>
   <h2>{ccc.toString()}</h2>
   </div>
)
}
https://i-blog.csdnimg.cn/direct/2a6d19b3344440e3a8fd861a58540011.png#pic_center
(3). Object对象类型的变量不能作为子元素，会报错
this.state = {
friend: {
name: 'jerry'
}
}
render () {
const { friend } = this.state
return (
<div>
   <h2>{friend}</h2>
</div>
)
}
https://i-blog.csdnimg.cn/direct/718d604021464438be3e5e8fafb03534.png#pic_center
可以写对象里具体的属性
{/*<h2>{friend}</h2>*/}
<h2>{friend.name}</h2>// jerry
<h2>{Object.keys(friend)}</h2> // name
4. JSX嵌入表达式

运算表达式，三元运算符，执行函数
this.state = {
   firstName: '张',
   lastName: '三',
   age: 20,
   movies: ["流浪地球", "星际穿越", "独行月球"]
}
// 渲染函数
render () {
const { firstName, lastName } = this.state
const fullName = firstName + ' ' + lastName
const { age } = this.state
const ageText = age >= 18 ? "成年人" : "未成年人"
return (
   <div>
   {/*1 运算表达式*/}
   <h2>{10 + 20}</h2>
   <h2>{firstName + '' + lastName}</h2>
   <h2>{fullName}</h2>

   {/*2 三元运算符*/}
   <h2>{ageText}</h2>
   <h2>{age > 18 ? '成年人' : '未成年人'}</h2>

   {/*3 执行一个函数*/}
   <ul>{this.state.movies.map(movie => <li>{movie}</li>)}</ul>
   <ul>{this.getMovieEls()}</ul>
   </div >
)
}
getMovieEls () {
const liEls = this.state.movies.map(movie => <li>{movie}</li>)
return liEls
}
https://i-blog.csdnimg.cn/direct/ea881295ed4d456aba9838ff641fa225.png#pic_center
5. JSX绑定属性

(1) title,src,href属性

this.state = {
title: "哈哈哈",
imgURL: "https://ts1.cn.mm.bing.net/th/id/R-C.95bc299c3f1f0e69b9eb1d0772b14a98?rik=W5QLhXiERW4nLQ&riu=http%3a%2f%2f20178405.s21i.faiusr.com%2f2%2fABUIABACGAAgoeLO-wUo4I3o2gEw8Qs4uAg.jpg&ehk=N7Bxe9nqM08w4evC2kK6yyC%2bxIWTjdd6HgXsQYPbMj0%3d&risl=&pid=ImgRaw&r=0",
href: "https://www.baidu.com",
}
// 渲染函数
render () {
const { title, imgURL, href } = this.state
return (
<div>
   <h2 title={title}>h2 标题</h2>
   <img 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 (
   <div>
   <h2 className="abc cba">哈哈哈哈</h2>
   {/*动态绑定*/}
   <h2 className={className}>哈哈哈哈</h2>
   </div >
)
}
缺点是，当isAcrtve为false时，类名里会多出一个空格
https://i-blog.csdnimg.cn/direct/ace5e58c722247c98388065be2194414.png#pic_center
(2) 方式二：将所有的class类名放到数组里
render () {
const { isActive } = this.state
// 2. 绑定方法二：将所有的class放到数组里
const className = ['abc', 'cba']
// isActive为true就添加active类名
if (isActive) className.push('active')
return (
   <div>
      <h2 className={className.join('')}>哈哈哈哈</h2>
   </div >
)
}
}
当className为数组时:
类名剖析出来有逗号：<h2 class="abc,cba">哈哈哈哈</h2>
以是必要.join进行处理惩罚
(3)方式三：第三方库classnames -> npm install classnames；后续再补充
(3) 绑定style样式

绑定style样式时，必要使用对象情势，属性名采用驼峰定名；
留意：JSX绑定子元素时不可以用对象，这里是绑定属性，可以用对象
this.state = {
objStyle: { color: "red", fontSize: "30px" }
}
render () {
const {objStyle } = this.state
return (
   <div>
      { /* 绑定style属性: 绑定对象类型，第一个{}是语法，第二个{}表示对象 */}
      <h2 style={{ color: "red", fontSize: "30px" }}>呵呵呵呵</h2>
      <h2 style={objStyle}>呵呵呵呵</h2>
   </div >
)
}

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

React(一) 认识React、认识类组件、JSX誊写规范、嵌入变量表达式、绑定属性