React 入门（超详细）

瑞星  金牌会员 | 2024-6-21 13:33:23 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 861|帖子 861|积分 2583

前言：

   本文会引导我们进入一段 React 学习之旅。我们将逐步了解有关它的背景和用例的一些细节，在本身的电脑上建起根本的 React 工具链，创建并利用一个简单的入门应用程序，以学习一些关于 React 在此过程中如何工作的知识。
  
一、React 简介

1. 什么是 React


  • React 劈头于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定本身写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
  • React 是一个用于构建用户界面的JavaScript 库。React紧张用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和利用它。
  • React 是用于动态构建用户界面的 JavaScript 库(只关注于视图)
2. React 的特点


  • 声明式编码
  • 组件化编码
  • React Native 编写原生应用
  • 高效（优秀的Diffing算法）
  • JSX 语法
  • 单向数据绑定
  • 虚拟 DOM
  • Component
3. React 高效的缘故原由


  • 利用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
  • DOM Diffing算法, 最小化页面重绘。
4. React 官网


  • 英文官网: https://reactjs.org/
  • 中文官网: https://react.docschina.org/
5. React的紧张原理



  • 传统的web应用，操作DOM一般是直接更新操作的，但是我们知道DOM更新通常是比力昂贵的。而React为了尽大概减少对DOM的操作，提供了一种差别的而又强大的方式来更新DOM，代替直接的DOM操作。就是VirtualDOM,一个轻量级的虚拟的DOM，就是React抽象出来的一个对象，描述dom应该什么样子的，应该如何呈现。通过这个Virtual DOM去更新真实的DOM，由这个Virtual DOM管理真实DOM的更新。（想看更多就到PHP中文网React参考手册栏目中学习）
  • 为什么通过这多一层的Virtual DOM操作就能更快呢？ 这是因为React有个diff算法，更新VirtualDOM并不保证立刻影响真实的DOM，React会比及事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比力，计算出最小的步骤更新真实的DOM。
  • 最显着的一点利益就是React所谓的 dom diff ，能够实现delta级别的dom更新。当有数据变动导致DOM变动时，React不是全局革新，而是通过它内部的dom diff 算法计算出差别点，然后以最小粒度举行更新。这也是React号称性能好的缘故原由。
6. Facebook为什么要建造React?



  • Facebook的工程师在做大型项目时，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复杂，每当需要添加一项新的功能或特性时，体系的复杂度就成级数增长，致使代码变得脆弱和不可猜测，结果导致他们的MVC正在土崩瓦解,所以Facebook认为MVC不得当大规模应用，当体系中有很多的模子和相应的视图时，其复杂度就会迅速扩大，非常难以理解和调试，特别是模子和视图间大概存在的双向数据流动。
  • 基于上面的缘故原由，Facebook认为MVC无法满意他们的扩展需求，为了解决上述问题需要“以某种方式组织代码，使其更加可猜测”，于是他们提出的Flux和React来实现。
二、React 的根本利用

1. 底子代码

引入js 库地点下载地点
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <!-- 准备好一个容器 -->
  11.     <div id="test"></div>
  12.     <!-- 引入 React 核心库 -->
  13.     <script src="../js/react.development.js"></script>
  14.     <!-- 引入 react-dom 用于支持 react 操作 DOM -->
  15.     <script src="../js/react-dom.development.js"></script>
  17.     <!-- 引入babel：
  18.             1. ES6 ==> ES5
  19.             2. jsx ==> js
  20.     -->
  21.     <script src="../js/babel.min.js"></script>
  23.     <script type="text/babel">
  24.         // 1. 创建虚拟 DOM
  25.         const VDOM = <h1>Hello，React</h1>
  27.         // 2. 渲染到页面中的指定 DOM
  28.         // ReactDOM.render(虚拟DOM，真实DOM)
  29.         ReactDOM.render(VDOM,document.getElementById('test'))
  30.     </script>
  31. </body>
  32. </html>
复制代码
2. 结果


3. 相关 js 库


  • react.js：React 焦点库。
  • react-dom.js：提供操作 DOM 的 react 扩展库。
  • babel.min.js：剖析 JSX 语法代码转为 JS 代码的库。
  1. // 引入 React核心库
  2. <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  3. // 引入 react-dom 用于支持 react 操作 DOM
  4. <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  5. // 引入 babel：1. ES6 ==> ES5                2. jsx ==> js
  6. <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
复制代码
4. 创建虚拟DOM的两种方式


  • 纯JS方式(一般不用)
  1. <script type="text/javascript">
  2.     // 1. 创建虚拟 DOM
  3.     // const VDOM = React.createElement(标签名，标签属性，标签内容)
  4.     const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'Hello,React'))
  6.     // 2. 渲染到 DOM
  7.     ReactDOM.render(VDOM, document.getElementById('test'))
  8. </script>
复制代码

  • JSX方式
  1. <script type="text/babel">
  2.    // 1. 创建虚拟 DOM
  3.     const VDOM = (
  4.         <h1>Hello，
  5.             <span>React</span>
  6.         </h1>
  7.     )
  9.     // 2. 渲染到页面中的指定 DOM
  10.     // ReactDOM.render(虚拟DOM，真实DOM)
  11.     ReactDOM.render(VDOM,document.getElementById('test'))
  12. </script>
复制代码
5. 虚拟DOM与真实DOM

1.React提供了一些API来创建一种 “特别” 的一般js对象


  • const VDOM = React.createElement('xx',{id:'xx'},'xx')
  • 上面创建的就是一个简单的虚拟 DOM 对象
2.虚拟DOM对象终极都会被React转换为真实的DOM
3.我们编码时根本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。
6. 虚拟DOM与真实DOM的区别

   关于虚拟DOM：

  

  • 本质是Object类型的对象（一般对象）
  • 虚拟DOM比力“轻”，真实DOM比力“重”，因为虚拟DOM是React内部天生并利用的。
  • 虚拟DOM终极会被React转换为真实DOM，渲染在页面上；
  1. <script type="text/babel">
  2.     // 1. 创建虚拟 DOM
  3.     const VDOM = (
  4.         <h1>Hello，
  5.             <span>React</span>
  6.         </h1>
  7.     )
  9.     // 2. 渲染到页面中的指定 DOM
  10.     // ReactDOM.render(虚拟DOM，真实DOM)
  11.     ReactDOM.render(VDOM,document.getElementById('test'))
  12.     const TDOM = document.getElementById('demo')
  13.     // console.log(typeof VDOM) // Object
  14.     // console.log(VDOM instanceof Object) // true
  15.     console.log('虚拟DOM',VDOM)
  16.     console.log('真实DOM',TDOM)
  17.     // 调试
  18.     debugger
  19. </script>
复制代码
三、React JSX

1. 什么是 JSX



  • JSX是React的焦点构成部分，它利用XML标记的方式去直接声明界面，界面组件之间可以相互嵌套。可以理解为在JS中编写与XML类似的语言,一种界说带属性树结构（DOM结构）的语法，它的目的不是要在欣赏器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。
  • 固然你可以完全不利用JSX语法，只利用JS语法，但还是推荐利用JSX，可以界说包含属性的树状结构的语法，类似HTML标签那样的利用，而且更便于代码的阅读。
  • 利用JSX语法后，你必须要引入babel的JSX剖析器，把JSX转化成JS语法，这个工作会由babel自动完成。同时引入babel后，你就可以利用新的es6语法，babel会帮你把es6语法转化成es5语法，兼容更多的欣赏器。

  • 全称: JavaScript XML
  • react 界说的一种类似于 XML 的JS扩展语法: JS + XML 本质是 React.createElement(component, props, ...children) 方法的语法糖
  • 作用: 用来简化创建虚拟DOM

    • 写法：var ele = <h1>Hello JSX!</h1>
    • 注意1：它不是字符串, 也不是 HTML/XML 标签
    • 注意2：它终极产生的就是一个JS对象

  • 标签名任意: HTML 标签或其它标签
  • 标签属性任意: HTML 标签属性或其它
  • 根本语法规则

    • 碰到 <开头的代码, 以标签的语法剖析: html同名标签转换为html同名元素, 其它标签需要特别剖析
    • 碰到以 { 开头的代码，以JS语法剖析: 标签中的js表达式必须用{ }包含

  • babel.js的作用

    • 欣赏器不能直接剖析JSX代码, 需要 babel 转译为纯JS的代码才能运行
    • 只要用了JSX，都要加上type="text/babel", 声明需要 babel 来处理

2. 渲染虚拟DOM(元素)


  • 语法: ReactDOM.render(virtualDOM, containerDOM)
  • 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中表现
  • 参数分析

    • 参数一: 纯js或jsx创建的虚拟dom对象
    • 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

3. JSX 的利用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .title{
  10.             background-color: aliceblue;
  11.             width: 200px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <!-- 准备好一个容器 -->
  17.     <div id="test"></div>
  19.     <!-- 引入 React 核心库 -->
  20.     <script src="../js/react.development.js"></script>
  21.     <!-- 引入 react-dom 用于支持 react 操作 DOM -->
  22.     <script src="../js/react-dom.development.js"></script>
  24.     <!-- 引入babel：
  25.             1. ES6 ==> ES5
  26.             2. jsx ==> js
  27.     -->
  28.     <script src="../js/babel.min.js"></script>
  30.     <script type="text/babel">
  32.         let myData = 'Student'
  33.         let myId = 'ITStudent'
  34.         // 1. 创建虚拟 DOM
  35.         const VDOM = (
  36.             <div>
  37.                 <h1 className="title" id={myId.toUpperCase()}>Hello，
  38.                     <span style={{color:'white',fontSize:'20px'}}>{myData}</span>
  39.                 </h1>
  40.                 <input type="text" />
  41.                 <Good></Good>
  42.             </div>
  43.         )
  45.         // 2. 渲染到页面中的指定 DOM
  46.         // ReactDOM.render(虚拟DOM，真实DOM)
  47.         ReactDOM.render(VDOM,document.getElementById('test'))
  49.     </script>
  50. </body>
  51. </html>
复制代码
4. JSX 的语法规则


  • 界说虚拟DOM时，不要写引号；
  • 标签中混入JS表达式时，要用 {}
  • 样式的类名指定不要用class，要用className；
  • 内联样式，要用style={{key:value}}的形式去写
  • 只能有一个根元素
  • 所有标签都必须闭合
  • 标签的首字母：
    1. 若小写字母开头，则将该标签转化为html同名的元素，渲染到页面；
    若html没有同名的元素，则报错。
    2. 若大写字母开头，react就去渲染对应的组件，若组件没有界说，则报错；
四、模块与组件、模块化与组件化的理解

1. 模块


  • 理解：向外提供特定功能的js程序, 一般就是一个js文件
  • 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
  • 作用：复用js, 简化js的编写, 进步js运行效率
   什么是模块化？

  当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
  
2. 组件

1.理解：用来实现局部功能结果的代码和资源的聚集(html/css/js/image等等)
2.为什么要用组件： 一个界面的功能更复杂
3.作用：复用编码, 简化项目编码, 进步运行效率
   什么是组件化？

  当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
  

3. 函数式组件

  1. <script type="text/babel">
  2.     // 1. 创建函数式组件
  3.     function MyComponent(){
  4.         // 这里的this是undefined，因为babel编译，开启了严格模式
  5.         console.log(this)
  6.         // 一定需要有返回值
  7.         return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
  8.     }
  10.     // 2. 渲染到页面中的指定 DOM
  11.     // ReactDOM.render(虚拟DOM，真实DOM)
  12.     ReactDOM.render(<MyComponent />,document.getElementById('test'))
  14.     /*
  15.         执行 ReactDOM.render() 方法之后，发生了什么？
  16.             1. React 解析了组件标签，找到对应的组件
  17.             2. 发现这个组件是一个函数定义的，随后调用该函数，生成了一个虚拟DOM
  18.             3. 最后将虚拟DOM转化为真实DOM，呈现在页面中；
  19.     */
  20. </script>
复制代码
  函数式组件执行过程？

  

  • React 剖析了组件标签，找到对应的组件
  • 发现这个组件是一个函数界说的，随后调用该函数，天生了一个虚拟DOM
  • 最后将虚拟DOM转化为真实DOM，呈现在页面中；
  
4. 类式组件

  1. <script type="text/babel">
  2.     // 1. 创建一个类式组件
  3.     class MyComponent extends React.Component{
  4.         // render方法是放在原型上的
  5.         // render中的this是谁？ -- 实例对象 <===> MyComponent组件实例对象
  6.         render(){
  7.             console.log('render中的this',this)
  8.             return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
  9.         }
  10.     }
  12.     // 2. 渲染到页面中的指定 DOM
  13.     // ReactDOM.render(虚拟DOM，真实DOM)
  14.     ReactDOM.render(<MyComponent />,document.getElementById('test'))
  16.     /*
  17.         执行 ReactDOM.render() 方法之后，发生了什么？
  18.             1. React 解析了组件标签，找到对应的组件
  19.             2. 发现这个组件是一个类定义的，随后new出来一个实例对象，并通过该实例调用原型上的render方法
  20.             3. 将render()返回的内容生成了一个虚拟DOM
  21.             4. 最后将虚拟DOM转化为真实DOM，呈现在页面中；
  22.     */
  23.    let c = new MyComponent()
  24.    console.log(c)
  25. </script>
复制代码
  类式组件执行过程？

  

  • React 剖析了组件标签，找到对应的组件
  • 发现这个组件是一个类界说的，随后new出来一个实例对象，并通过该实例调用原型上的render方法
  • 将render()返回的内容天生了一个虚拟DOM
  • 最后将虚拟DOM转化为真实DOM，呈现在页面中；
  
总结：

   欢迎各人加入我的社区，在社区中会不定时发布一些精选内容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003
  
以上就是 React 入门（超详细），不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

瑞星

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表