React全家桶(一)

文章	分类	评论
195	3	34

React的介绍（技术角度）

React是什么？
1. React：用于构建用户界面的 JavaScript 库；
2. React的官网文档：https://zh-hans.reactjs.org

React的特点 – 声明式编程

声明式编程：
1. 声明式编程是目前整个大前端开发的模式：Vue、React、Flutter、SwiftUI；
2. 它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面；

React特点 – 组件化开发

组件化开发：
1. 组件化开发页面目前前端的流行趋势，我们会将复杂的界面拆分成一个个小的组件；
2. 如何合理的进行组件的划分和设计也是后面我会讲到的一个重点；

React的特点 – 多平台适配

多平台适配：
1. 2013年，React发布之初主要是开发Web页面；
2. 2015年，Facebook推出了ReactNative，用于开发移动端跨平台；（虽然目前Flutter非常火爆，但是还是有很多公司在使用
ReactNative）；
1. 2017年，Facebook推出ReactVR，用于开发虚拟现实Web应用程序；（VR也会是一个火爆的应用场景）；

Hello React案例说明

为了演练React，我们可以提出一个小的需求：

在界面显示一个文本：Hello World
点击下方的一个按钮，点击后文本改变为Hello React

第一版本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <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 crossorigin="" src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- 编写React代码 -->
  <script type="text/babel">
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      // 1.将文本定义成变量
      let message = "Hello world"
      // 2.监听按钮的点击
      function btnClick(){
          // 1.1 修改数据
          message = "Hello React"
          // 2.重新渲染界面
          rootRender()
         
      }

       // 3.封装一个渲染函数
       function rootRender(){
              root.render((
                  <div>
                      <h2>{message}</h2>    
                      <button onClick={btnClick}>修改文本</button>
                  </div>
              ))
          }
          rootRender()
  </script>
</body>
</html>

React的开发依赖

开发React必须依赖三个库：
1. react：包含react所必须的核心代码
2. react-dom：react渲染在不同平台所需要的核心代码
3. babel：将jsx转换成React代码的工具
第一次接触React会被它繁琐的依赖搞蒙，居然依赖这么多东西：（直接放弃？）
1. 对于Vue来说，我们只是依赖一个vue.js文件即可，但是react居然要依赖三个包。
2. 其实呢，这三个库是各司其职的，目的就是让每一个库只单纯做自己的事情;
3. 在React的0.14版本之前是没有react-dom这个概念的，所有功能都包含在react里；
为什么要进行拆分呢？原因就是react-native。
1. react包中包含了react web和react-native所共同拥有的核心代码。
2. react-dom针对web和native所完成的事情不同：
✓ web端：react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中
✓ native端：react-dom会将jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIButton）。

Babel和React的关系

babel是什么呢？
1. Babel ，又名 Babel.js。
2. 是目前前端使用非常广泛的编译器、转移器。
3. 比如当下很多浏览器并不支持ES6的语法，但是确实ES6的语法非常的简洁和方便，我们开发时希望使用它。
4. 那么编写源码时我们就可以使用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持的ES5的语法。
React和Babel的关系：
1. 默认情况下开发React其实可以不使用babel。
2. 但是前提是我们自己使用 React.createElement 来编写源代码，它编写的代码非常的繁琐和可读性差。
3. 那么我们就可以直接编写jsx（JavaScript XML）的语法，并且让babel帮助我们转换成React.createElement。
4. 后续还会详细讲到；

React的依赖引入

所以，我们在编写React代码时，这三个依赖都是必不可少的。
那么，如何添加这三个依赖：
1. 方式一：直接CDN引入
2. 方式二：下载后，添加本地依赖
3. 方式三：通过npm管理（后续脚手架再使用）
暂时我们直接通过CDN引入，来演练下面的示例程序：
1. 这里有一个crossorigin的属性，这个属性的目的是为了拿到跨域脚本的错误信息

React的依赖引入

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

Hello World

第一步：在界面上通过React显示一个Hello World
1. 注意：这里我们编写React的script代码中，必须添加 type="text/babel"，作用是可以让babel解析jsx的语法
ReactDOM. createRoot函数：用于创建一个React根，之后渲染的内容会包含在这个根中
1. 参数：将渲染的内容，挂载到哪一个HTML元素上
✓ 这里我们已经提定义一个id为app的div
root.render函数:
1. 参数：要渲染的根组件
我们可以通过{}语法来引入外部的变量或者表达式

第一个React程序
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React</title>
</head>
<body>
    <div id="root"></div>
    <div id="app"></div>
    <!-- 添加依赖 -->
    <!-- 依赖三个包 -->
    <!-- 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>
    <!-- babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- npm下载引入（手脚架） -->
    <script type="text/babel">
        // 编写React代码（jsx语法）
        // jsx语法 -> 普通的Javascript代码 -> babel
        // 渲染Hello World
        // React18之前：ReactDOM.render
        // ReactDOM.render(<h2>Hello World！</h2>,document.querySelector("#root"))

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

        // const app = ReactDOM.createRoot(document.querySelector("#app"))
        // app.render(<h2>你好，世界</h2>)
    </script>
</body>
</html>

Hello React – 组件化开发

整个逻辑其实可以看做一个整体，那么我们就可以将其封装成一个组件：
1. 我们说过root.render 参数是一个HTML元素或者一个组件；
2. 所以我们可以先将之前的业务逻辑封装到一个组件中，然后传入到 ReactDOM.render 函数中的第一个参数；
在React中，如何封装一个组件呢？这里我们暂时使用类的方式封装组件：
1. 1.定义一个类（类名大写，组件的名称是必须大写的，小写会被认为是HTML元素），继承自React.Component
2. 2.实现当前组件的render函数
✓ render当中返回的jsx内容，就是之后React会帮助我们渲染的内容

第二版，重构Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>

    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
        // let message = "Hello World"

        // function btnClick(){
        //     message = "Hello React"
        //     rootRender()
        // }

        // const root = ReactDOM.createRoot(document.querySelector("#root"))

        // function rootRender(){
        //     root.render((
        //         <div>
        //             <h2>{message}</h2>
        //             <button onClick={btnClick}>修改文本</button>
        //         </div>
        //     ))
        // }

        // rootRender()

        // 使用组件进行重构代码
        // 类组件和函数式组件
        class App extends React.Component{
            // 组件数据
            constructor(){
                super()
                this.state = {
                    message:"Hello World",
                    name:"why",
                    age:18 
                }

                // 对需要绑定的方法，提前绑定好this
                this.btnClick = this.btnClick.bind(this)
            }

            // 组件方法（实例方法）
            btnClick(){
                // 内部完成了两件事情：
                // 1.将state中message值修改掉  2. 自动重新执行render函数
                this.setState({
                    message:"Hello React"
                })
            }

            // 渲染内容  render方法
            render(){
                return (
                    <div>
                        <h2>{this.state.message}</h2>
                        <button onClick={this.btnClick}>修改文本</button>
                    </div>
                )
            }
        }

        // this绑定的问题
        // const app = new App()
        // const foo = app.btnClick
        // foo(); // 默认绑定 =》 window =》严格模式下 =》 undefined

        // function bar(){
        //     console.log("bar:",this);
        // }
        // bar()

        // 将组件渲染到界面上
        const root = ReactDOM.createRoot(document.querySelector("#root"))
        // App根组件
        root.render(<App/>)
    </script>
</body>
</html>

组件化 - 数据依赖

组件化问题一：数据在哪里定义？
在组件中的数据，我们可以分成两类：
1. 参与界面更新的数据：当数据变量时，需要更新组件渲染的内容；
2. 不参与界面更新的数据：当数据变量时，不需要更新将组建渲染的内容；
参与界面更新的数据我们也可以称之为是参与数据流，这个数据是定义在当前对象的state中
1. 我们可以通过在构造函数中 this.state = {定义的数据}
2. 当我们的数据发生变化时，我们可以调用 this.setState 来更新数据，并且通知React进行update操作；
✓ 在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面

组件化 – 事件绑定

组件化问题二：事件绑定中的this
1. 在类中直接定义一个函数，并且将这个函数绑定到元素的onClick事件上，当前这个函数的this指向的是谁呢？
默认情况下是undefined
1. 很奇怪，居然是undefined；
2. 因为在正常的DOM操作中，监听点击，监听函数中的this其实是节点对象（比如说是button对象）；
3. 这次因为React并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，它的本质React的Element对象；
4. 那么在这里发生监听的时候，react在执行函数时并没有绑定this，默认情况下就是一个undefined；
我们在绑定的函数中，可能想要使用当前对象，比如执行 this.setState 函数，就必须拿到当前对象的this
1. 我们就需要在传入函数时，给这个函数直接绑定this
2. 类似于下面的写法： <button onClick={this.changeText.bind(this)}>改变文本</button>

电影列表展示

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <div id="root"></div>
   <script src="../lib/react.js"></script>
   <script src="../lib/react-dom.js"></script>
   <script src="../lib/babel.js"></script>

   <script type="text/babel">
       // 1.创建root
       const root = ReactDOM.createRoot(document.querySelector("#root"))
       // 封装App组件
       class App extends React.Component{
           constructor(){
               super()

               this.state = {
                   movies:["星际穿越","流浪地球","独行月球","大话西游","火星救援"]
               }
           }

           render(){
               // 1.对movies进行for循环
               // const liEls = []
               // for(let i=0;i<this.state.movies.length;i++){
               //     const movie = this.state.movies[i]
               //     const liEl = <li>{movie}</li>
               //     liEls.push(liEl)
               // }

               // 2.movies数组 =》 liEls数组
               // const liEls = this.state.movies.map(movie => <li>{movie}</li>)

               return (
                   <div>
                       <h2>电影列表</h2>
                       <ul> 
                           {this.state.movies.map(movie => <li>{movie}</li>)}
                       </ul>
                   </div>
               )
           }
       }

       // 2.渲染组件
       root.render(<App />)
   </script>
</body>
</html>

计数器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
</head>
<body>
    <div id="root"></div>
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
        const root = ReactDOM.createRoot(document.querySelector("#root"))

        class App extends React.Component{
            constructor(){
                super()
                this.state = {
                    message:"Hello World",
                    counter:100 
                }

                this.increment = this.increment.bind(this)
                this.decrement = this.decrement.bind(this)
            }

            render(){
                const { counter } = this.state

                return (
                    <div>
                        <h2>当前计数：{counter}</h2>    
                        <button onClick={this.increment}>+1</button>
                        <button onClick={this.decrement}>-1</button>
                    </div>
                )
            }

            // 组件的方法
            increment(){
                this.setState({
                    counter:this.state.counter + 1
                })
            }

            decrement(){
                this.setState({
                    counter:this.state.counter - 1
                })
            }
        }

        root.render(<App />)
    </script>
</body>
</html>

VSCode代码片段

我们在前面练习React的过程中，有些代码片段是需要经常写的，我们在VSCode中我们可以生成一个代码片段，方便我们快速
生成。
VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。
具体的步骤如下：
1. 第一步，复制自己需要生成代码片段的代码；
2. 第二步，https://snippet-generator.app/在该网站中生成代码片段；
3. 第三步，在VSCode中配置代码片段；

感谢大家观看，我们下次见

什么是作用域链以及作用域链在javascript中的作用是什么？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]回顾如何定义作用域链如何定义'作用域'？说明不同类型的作用域作用域链Scope Chain是JavaScript中的一个基本概念，它属于确定当前执行代码的上下文变量的查找和访问机制。在作用域的构建基于词法作用域的解构，即变量和函数的可见性由它们在源代码中的位置决定。在JavaScript中，每个执行上下文如函数执行上下文都绑有一个与之关联的作用域链。这个作用域就是一个包含多个环境记录Environ[...]

Hary

哈喽，你的SSL好像过期喽

abzzp

@秋风于渭水确实 [[微笑]]

通常会采取哪些措施来确保网站或者应用在不同的浏览器上的兼容性? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]不同的浏览器存在兼容性问题的核心原因是不同的浏览器可能使用的是不同的浏览器内核。在现代化开发中，大多数的浏览器兼容性问题是可以通过工程化中的配置选项来解决的。1.比如browserslist可以配置目标的浏览器或者Node环境，然后在不同的工具中起作用，比如autoprefixer/babel/postess preset env等，在进行了正确的配置后，开发的Vue或者React项目在进行打包时[...]

BFC的作用是什么呢? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]在BFC中，box会在垂直方向上一个挨着一个的排布垂直方向的间距由margin属性决定在同一个BFC中，相邻两个box之间的margin会折叠(collapse)在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的然后我们再看一下官方文档中如何说明的？总结BFC是什么？W3C文档讲：在标准流中，我们所有的盒子，不管是块级盒子还是行内盒子，它们都属于某一个FC格式化上下文，块级盒子属于BFC`块级格[...]

什么是FC呢?他是用来干什么的？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]什么是FC呢这里我们给出W3C给出的文档，FC文档FC的全称是FormattingContext，元素在标准流里面都是属于一个FC的。那么什么又是IFC，BFC呢？IFC行内元素的布局都属于Inline Formatting,inline level box都是在IFC中布局的BFCBFC英文全称是Block Formatting Context,也就是block level box都是在BFC中[...]

秋风于渭水

这确实是一个盲点，这个还是很有必要的，处理不好会导致网页内的元素出现抖动问题。

defer属性在javascript标签中有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]我们知道，当浏览器在执行到script标签的时候，首先会停止构建DOM树，然后下载Javascript文件并且执行，当JavaScript脚本执行完毕之后才会继续解析HTML标签构建DOM树。为什么Javascript程序会这样做呢？原因是我们的Javascript的作用就是操作DOM并且可以修改DOM。如果我们等到HTML执行完成之后再去执行JavaScript就会造成严重的回流和重绘，尤其是现[...]

async属性是什么？它有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]async属性和defer属性目标一样它也是为了不让js阻塞DOM树的构建。不过他们两个还是有区别的。async让js脚本的下载和执行是独立的。浏览器不会因为async属性的script脚本的执行而阻塞，这一点和defer属性类似。然而async属性比较任性，只要脚本被浏览器下载完成之后就会立即执行，不会等待在DOMContentLoaded之前执行。所以它不能保证是在DOMContentLoad[...]

城市教堂

我热爱旅游专栏。令人惊艳了解路线。

日	一	二	三	四	五	六
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

程序员鸡皮

站点介绍

React全家桶(一)

React的介绍（技术角度）

React的特点 – 声明式编程

React特点 – 组件化开发

React的特点 – 多平台适配

Hello React案例说明

React的开发依赖

Babel和React的关系

React的依赖引入

Hello World

Hello React – 组件化开发

组件化 - 数据依赖

组件化 – 事件绑定

电影列表展示

计数器案例

VSCode代码片段

评论(0)

文章目录

热门文章

最新评论

日历

标签云

赞赏作者

日	一	二	三	四	五	六
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

日	一	二	三	四	五	六
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

日	一	二	三	四	五	六
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30