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

一、初始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-dom：react渲染在不同平台所必要的焦点代码
(3) babel：将jsx转换成React代码的工具
引入的方式有三种
(1) CDN引入
(2) 下载引入
(3) npm下载引入(脚手架)
本案例中采用cdn引入

1.   <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
2.   <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
3.   <!-- babel -->
4.   <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结构或组件
容器：也就是指定在那里渲染页面

1.   <div id="root"></div>
2.   
3.   <!-- 指定type="text/babel"；babel才会解析这里的jsx语法代码 -->
4.   <script type="text/babel">   
5.     // 渲染Hello World
6.     // React18之前:
7.     //ReactDOM.render(<h2>Hello World</h2>, document.querySelector("#root"))
9.     // React18之后:
10.     const root = ReactDOM.createRoot(document.querySelector("#root"))
11.     root.render(<h2>Hello World</h2>)
12.    
13.   </script>

复制代码

2.3 hello案例完备代码

1.   <!-- 定义一个容器 -->
2.   <div id="root"></div>
3.   <!-- 添加依赖：三个依赖  -->
4.   <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
5.   <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
6.   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
8.   <script type="text/babel">
9.     const root = ReactDOM.createRoot(document.querySelector("#root"))
10.     // 1. 定义内容变量
11.     let message = 'Hello World'
13.     // 2. 初始化渲染页面
14.     rootRender()
16.     // 渲染页面函数，为了在后续更新页面时方便渲染，将渲染封装成一个函数
17.     function rootRender () {
18.       root.render((
19.         <div>
20.           <h2>{message}</h2>
21.           <button onClick={btnClick}>修改内容</button>
22.         </div>
23.       ))
24.     }
26.     // 按钮监听事件
27.     function btnClick () {
28.       // 1.修改数据
29.       message = "Hello React"
30.       // 2. 重新渲染
31.       rootRender()
32.     }
33.   </script>

复制代码

总结：

• 读取变量使用单括号{message},不像Vue用双括号{{}}
  
• 绑定点击事件用onClick={函数名},Vue是@click="函数名"
  
• 必要自己调用函数进行渲染，Vue是会自动渲染。
  
• 留意下面如许的写法是错误的，即只渲染部门页面。如许渲染的<h2>会将button覆盖掉
  
  
  
  

二、类组件

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

(1) 界说一个类(继续React.Component)，类名必须大写(类名就是组件名),小写会被认为是HTML元素。
(2) 实现当前组件的render函数:render返回的jsx内容，就是之后React会渲染的内容。

1.   <script type="text/babel">
2.      // 定义组件App
3.     class App extends React.Component {
4.      constructor() {
5.         super()
6.       }
7.       // 组件数据
8.       // 组件方法(实例方法)
9.       // 渲染到界面上,render函数
10.       render () {
11.         return <h2>hello world</h2>
12.       }
13.     }
15.     // 将组件渲染到界面上
16.     const root = ReactDOM.createRoot(document.querySelector("#root"))
17.     root.render(<App />) // App根组件渲染到界面上
18.   </script>

复制代码

执行 root.render(<App />)语句时，会调用类中的render方法，进行界面渲染。
2. 组件里的数据

数据分为两类：到场界面更新、不到场界面更新。
到场界面更新的数据也叫到场数据流，界说在当前对象的state中，写在构造函数里。
使用该数据时：this.state.变量名称
修改数据时： this.setState(....)

1.    class App extends React.Component {
2.       constructor() {
3.         super()
4.         // 定义数据
5.         this.state = {
6.           message: "Hello World",
7.         }
8.       }
9.     // 渲染时使用数据
10.       render () {
11.         return (
12.           <div>
13.             <h2>{this.state.message}</h2>
14.             <button>修改内容</button>
15.           </div>
16.         )
17.       }
18.     }

复制代码

3. 组件里的函数 (重点)

必要提前看一下严格模式里的this指向题目：博主DantinZhang总结的严格模式
在严格模式下，函数在独立调用时(不是通过某个对象调用)，this的值为undefined；
babel在编译代码时，自动加上了use strict,即设置为严格模式；
必要知道：ES6类中的函数都会默认开启严格模式

1. <script type="text/babel">
2. class App {
3.     constructor(name) {
4.         this.name = name;
5.     }   
6.     btnClick () {
7.             //这里其实默认开启了严格模式，
8.        console.log('btn:', this);
9.     }
10. }
11. //搞清楚this的问题
12. let app = new App();
13. let out = app.btnClick ;
14. out(); //这里打印undefined，是因为函数里默认开启严格模式
16. function fun () {
17.    console.log('fun', this);
18. }
19. fun() // 这里打印undefined，是因为babel编译时加了严格模式
20. </script>

复制代码

将 type="text/babel"去掉之后，out()是类里的函数，还是打印undefined；而fun()不是类里的函数，去掉babel后，打印Window。
本案例必要在点击事件的回调函数里修改message的值

1.   btnClick () {
2.   // 通过this.setState修改message的值
3.     this.setState({
4.       message: 'Hello React'
5.     })
6.   }

复制代码

题目是：btnClick里的this不指向实例对象，指向undefined
解决方式一：
绑定回调函数时，通过bind改变this的指向。

解决方式二：在构造函数里改变this指向；这也是官方推荐的写法。

1. <!-- 定义一个容器 -->
2. <div id="root"></div>
4. <script type="text/babel">
5.   // 1. 定义类组件
6.   class App extends React.Component {
7.     constructor() {
8.       super()
9.       // 1.1 定义组件数据，添加一个state属性存储数据,名字不能改,必须叫state
10.       this.state = {
11.         message: "Hello World",
12.       }
13.       // 1.4 对需要绑定的方法，提前绑定好this
14.       this.btnClick = this.btnClick.bind(this)
15.     }
17.     // 1.3 组件方法(实例方法)
18.     btnClick () {
19.       console.log('btn:', this);
20.       this.setState({
21.         message: 'Hello React'
22.       })
23.     }
25.     // 1.2 渲染函数，名字不能改，就叫render
26.     render () {
27.       return (
28.         <div>
29.           <h2>{this.state.message}</h2>
30.           <button onClick={this.btnClick}>修改内容</button>
31.         </div>
32.       )
33.     }
34.   }
36.   // 2. 将组件渲染到界面上
37.   const root = ReactDOM.createRoot(document.querySelector("#root"))
38.   root.render(<App />) // App根组件渲染到界面上
39. </script>

复制代码

setState方法来自于继续的React.Componetn,其内部完成了两件事：
(1) 将state里的message值改掉；(2) 自动重新执行render函数
4. 案例练习

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

1. <!-- 定义一个容器 -->
2. <div id="root"></div>
3. <script type="text/babel">
4.    //  1. 定义类组件
5.    class App extends React.Component {
6.      constructor() {
7.        super()
8.        this.state = {
9.          movies: ['飞屋环游记', '夏日友情天', '玩具总动员']
10.        }
11.      }  
12.         render(){...}
13.   }
14.    // 2. 渲染组件
15.    const root = ReactDOM.createRoot(document.querySelector('#root'))
16.    root.render(<App />)
17. </script>

复制代码

渲染方式一：循环遍历

1.    render () {
2.      // 遍历展示数据
3.      let lis = []
4.      for (let i = 0; i < this.state.movies.length; i++) {
5.        let ele = <li>{this.state.movies[i]}</li>
6.        lis.push(ele)
7.      }
8.      return (
9.        <div>
10.          <h2>电影名字</h2>
11.          <ul>
12.            {lis}
13.          </ul>
14.        </div>
15.      )
16.    }

复制代码

渲染方式二：map函数

1.    // 渲染方式二，map
2.    render () {
3.      let lis = this.state.movies.map(item => <li>{item}</li>)
4.      return (
5.        <div>
6.          <h2>电影名字</h2>
7.          <ul>
8.            {lis}
9.          </ul>
10.        </div>
11.      )
12.    }

复制代码

三、JSX语法

1. 认识JSX

1. // 1. 定义元素内容
2. const element = <div>Hello World</div>
3. // 2. 渲染
4. const root = ReactDOM.createRoot(document.querySelector('#root'))
5. 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中的标签可以是单标签或双标签

注释
语法：{/*注释内容...*/}

1.   render () {
2.     return (
3.       <div>
4.         {/*JSX的注释写法*/}
5.         // JSX的注释写法---这样写仍旧会展示到页面上
6.         <h2>当前计数为：{this.state.number}</h2>
7.       </div>
8.     )
9.   }

复制代码

3. JSX嵌入变量作为子元素

子元素就是标签里的内容。<h2 title='111'>aaa</h2> aaa是子元素，title是标签属性。
(1). 当变量是Number,String,Array类型时，可以直接显示

1. this.state = {
2.    // 1. 变量是Number，String，Array类型
3.    number: 0,
4.    name: 'tom',
5.    movies: ['加勒比海盗', '百鸟朝凤', '飞屋环游记'],
6. }
7. render () {
8.    const { number, name, movies } = this.state
9.    return (
10.      <div>
11.        {/*1. 变量是Number，String，Array时，直接显示*/}
12.        <h2>{number}</h2>
13.        <h2>{name}</h2>
14.        <h2>{movies}</h2>
15.      </div>
16.    )
17. }

复制代码

(2). 当变量是null,undefined,Boolean类型时，不显示
  若要显示，则必要转换成字符串(比如toString方法、空字符串拼接、String(变量))

1.    this.state = {
2.      // 2. 变量是null, undefined, Boolean
3.      aaa: null,
4.      bbb: undefined,
5.      ccc: true,
6.    }
7.   render () {
8.     const { aaa, bbb, ccc } = this.state
9.     return (
10.       <div>
11.         {/*2. 变量是null, undefined, Boolean时，内容为空*/}
12.         <h2>{aaa}</h2>
13.         <h2>{bbb}</h2>
14.         <h2>{ccc}</h2>
15.         {/*2 若要显示，则需要转换成字符串*/}
16.         <h2>{aaa + ''}</h2>
17.         <h2>{String(bbb)}</h2>
18.         <h2>{ccc.toString()}</h2>
19.       </div>
20.     )
21.   }

复制代码

(3). Object对象类型的变量不能作为子元素，会报错

1. this.state = {
2.    friend: {
3.      name: 'jerry'
4.    }
5. }
6.   render () {
7.    const { friend } = this.state
8.    return (
9.      <div>
10.        <h2>{friend}</h2>
11.      </div>
12.    )
13. }

复制代码

可以写对象里具体的属性

1.    {/*<h2>{friend}</h2>*/}
2.    <h2>{friend.name}</h2>  // jerry
3.    <h2>{Object.keys(friend)[0]}</h2> // name

复制代码

4. JSX嵌入表达式

运算表达式，三元运算符，执行函数

1. this.state = {
2.       firstName: '张',
3.       lastName: '三',
4.       age: 20,
5.       movies: ["流浪地球", "星际穿越", "独行月球"]
6.     }
7.   // 渲染函数
8.   render () {
9.     const { firstName, lastName } = this.state
10.     const fullName = firstName + ' ' + lastName
11.     const { age } = this.state
12.     const ageText = age >= 18 ? "成年人" : "未成年人"
13.     return (
14.       <div>
15.         {/*1 运算表达式*/}
16.         <h2>{10 + 20}</h2>
17.         <h2>{firstName + '' + lastName}</h2>
18.         <h2>{fullName}</h2>
20.         {/*2 三元运算符*/}
21.         <h2>{ageText}</h2>
22.         <h2>{age > 18 ? '成年人' : '未成年人'}</h2>
24.         {/*3 执行一个函数*/}
25.         <ul>{this.state.movies.map(movie => <li>{movie}</li>)}</ul>
26.         <ul>{this.getMovieEls()}</ul>
27.       </div >
28.     )
29.   }
30.   getMovieEls () {
31.     const liEls = this.state.movies.map(movie => <li>{movie}</li>)
32.     return liEls
33.   }

复制代码

5. JSX绑定属性

(1) title,src,href属性

1. this.state = {
2.   title: "哈哈哈",
3.   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",
4.   href: "https://www.baidu.com",
5. }
6. // 渲染函数
7. render () {
8.    const { title, imgURL, href } = this.state
9.    return (
10.      <div>
11.        <h2 title={title}>h2 标题</h2>
12.        <img src={imgURL} />
13.        <a href={href}>百度链接</a>
14.      </div >
15.    )
16. }

复制代码

(2) 绑定class

需求：给h2绑定 abc cba, 当isActive为true时，绑定active,否则不绑。
留意：React绑定类名时，用className，而不是class（用class会有警告）
(1)方式一：拼接字符串

1.   this.state = {
2.     isActive: false
3.   }
4.   render () {
5.     const { isActive } = this.state
6.     // 1. 绑定方法一：字符串拼接
7.     const className = `abc cba ${ isActive ? 'active' : '' }`
8.      return (
9.       <div>
10.         <h2 className="abc cba">哈哈哈哈</h2>
11.         {/*动态绑定*/}
12.         <h2 className={className}>哈哈哈哈</h2>
13.       </div >
14.     )
15.   }

复制代码

缺点是，当isAcrtve为false时，类名里会多出一个空格

(2) 方式二：将所有的class类名放到数组里

1.    render () {
2.      const { isActive } = this.state
3.      // 2. 绑定方法二：将所有的class放到数组里
4.      const className = ['abc', 'cba']
5.      // isActive为true就添加active类名
6.      if (isActive) className.push('active')
7.      return (
8.        <div>
9.          <h2 className={className.join('')}>哈哈哈哈</h2>
10.        </div >
11.      )
12.    }
13. }

复制代码

  当className为数组时:
类名剖析出来有逗号：<h2 class="abc,cba">哈哈哈哈</h2>
以是必要.join进行处理惩罚
  (3)方式三：第三方库classnames -> npm install classnames；后续再补充
(3) 绑定style样式

绑定style样式时，必要使用对象情势，属性名采用驼峰定名；
留意：JSX绑定子元素时不可以用对象，这里是绑定属性，可以用对象

1.   this.state = {
2.     objStyle: { color: "red", fontSize: "30px" }
3.   }
4. render () {
5.      const {objStyle } = this.state
6.      return (
7.        <div>
8.          { /* 绑定style属性: 绑定对象类型，第一个{}是语法，第二个{}表示对象 */}
9.          <h2 style={{ color: "red", fontSize: "30px" }}>呵呵呵呵</h2>
10.          <h2 style={objStyle}>呵呵呵呵</h2>
11.        </div >
12.      )
13.    }

复制代码

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