React 基本使用和理解

React基本使用和理解

定义：

是一个将数据渲染成HTML视图的开源JavaScript库

1. 发送请求获取数据
2. 处理数据（过滤、整理格式等）
3. 操作DOM呈现页面

作用：

• 原生JavaScript操作DOM繁琐，效率低(DOM-API操作UI)
• 使用JavaScript直接操作DOM,浏览器会进行大量的**重绘重排 ** 不太友好
• 原生JavaScript没有组件化编码方案，代码复用 率低

react特点：

1. 采用组件化模式、声明式编码，提高开发效率及组件复用率

2. 在React Native 中可以使用React语法进行移动端开发

3. 关键特性：使用虚拟DOM(内存)+优秀Diffing算法，尽量减少与真实DOM的交互 --DOM的复用更新时会比较DOM
   

   依赖包：

   • babel.min.js : 注意生产环境最好不使用，加载翻译jsx需要一定时间 会出现白屏

     • ES6=>ES5
     • jsx=>js
     • import

   • react.development.js: react 核心库

   • react-dom.development.js: react 扩展库

   易错点：

   • 依赖加载顺序

   • babel作用：jsx=>js 如图：

     

   • 虚拟DOM的第二种创建方式：

     ​ React.createElement(标签名，标签属性，标签内容)

     

JSX与JS：

​ JSX: 能更友好的创建虚拟DOM，示例：

​ const VDOM = ( /此处一定不要写引号，因为不是字符串/

​ <h1 id="title">

​ <span>Hello,React</span>

​ </h1>

​ )

关于虚拟DOM：

1. 本质是Object类型的对象（一般对象）
2. 虚拟DOM比较“轻”，真实DOM比较”重“，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

JSX:

1. 全称JavaScript XML

2. react 定义一种类似XML的JS扩展语法：JS+XML

3. 语法规则：

   • 定义虚拟DOM时，不要写引号

   • 标签中混入JS表达式时要用{} ，注意只能写表达式

   • 引入样式使用className

   • 内联样式，要用style={{key:value}}的形式去写

   • 只有一个根标签

   • 标签必须闭合

   • 标签首字母

     1）若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错

     2）若大写字母开头，react会去渲染对应的组件，若组件不存在会报错

   语法规则如下图：

   

4. JS表达式： 一个表达式会产生一个值，可以放在任何一个需要值的地方

   下面这些都是表达式：

   1）a

   2）a+b

   3）demo(1) --无返回值就return undefined

   4）arr.map() –可遍历数组，但是对象obj不能遍历

       <script type="text/javascript">
           let arr = [1, 3, 5, 7, 9]
           let result = arr.map((num) => {
               return num + 1
           })
           console.log(result)
       </script>
   

   const data = ['Angular','React','Vue']
   const VDOM = (
       <div>
         <h1>前端js</h1>
         <ul>
           {
               data.map((item,index)=>{
                 return <li key={index}>{item}</li>
           })
           }
         </ul>
       </div>
   )
   

   5）function test(){} --定义一个函数

5. JS语句（代码）：

   下面这些都是语句：

   1）if(){}

   2）for(){}

   3）switch(){case:xxx}

React模块

定义：向外提供特定功能的js程序，一般就是一个js文件

作用： 复用js，简化js的编写

React组件

例如： 实现一个头部导航栏实用到的（html、css、js、img、video、font）等资源的一个集合

作用： 复用 ，方便其他地方引入

最后 谢谢阅读此篇
🥇个人主页：500佰 欢迎留言