04.JSX练习篇以及组件模块概念定义

最新推荐文章于 2024-07-18 11:48:33 发布

pikaqiu_komorebi

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量70

点赞数

分类专栏： react学习文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/pikaqiu_komorebi/article/details/129123385

版权

react学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

组件化与模块化定义

文章目录

组件化与模块化定义
一、模块化与组件化相关概念
- 语句与表达式
JSX练习篇

一、模块化与组件化相关概念

  模块：按功能化开发，提供特定功能的js程序，一般就是js文件(类似业务逻辑的提取)
  why: 业务逻辑增加，代码多且复杂
  作用：复用js，简化编写，提高运行效率    
   
   
  组件：按区域开发
  理解：用来实现局部功能效果的代码和资源的集合（html/css/js/image）
  why: 一个界面功能复杂
  作用：复用编码，简化项目的编码，提高运行效率
*/

总结：
模块化：用模块来编写的应用，该应用就是模块化的应用
组件化：当应用以多组件的方式实现，该应用就是组件化的应用

语句与表达式

【js语句（代码）】与【js表达式】

表达式：一个表达式会产生一个值，可以放在任何一个需要值得地方
a a+b a.map() demo(1) function test(){} 三目运算
语句（代码）变量去接接不到，语句控制代码的走向，没有值
if(){}
for(){}
Switch(){}

JSX练习篇

<!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="test"></div>
   <div id="box"></div>
   <!-- 引入react核心库 -->
   <!-- src:定义引用外部脚本 -->
   <!-- type: 该属性定义 script 元素包含或src引用的脚本语言-->
   <script type="text/javascript" src="../js/react.development.js"></script>
   <!-- 引入react扩展库，用于支持react操作DOM -->
   <script type="text/javascript" src="../js/react-dom.development.js"></script>
   <!-- 引入babel,用于jsx转换为就是 -->
   <script type="text/javascript" src="../js/babel.min.js"></script>
   <!-- 此处一定要写babel,需要他进行翻译 -->
   <script type="text/babel">
      // 模拟一些数据
    const data = ['天外天','雷家堡','雪月城'] 
    const data2 = [<li>天外天</li>,<li>雷家堡</li>,<li>雪月城</li>] 
     // 1.创建虚拟DOM到页面 
     // 第一个会报错，因为数组的li标签的DOM节点并不是唯一的
     const VDOM2 = <div> 
        <h1>少年歌行</h1>
        <ul>
          {data2}  
        </ul>  
        </div>
     const VDOM = <div>
          <h1>少年歌行</h1>
          <ul>
             {
                data.map((item,index)=>{
                return <li key={index}>{item}</li>
             })
            }
          </ul>
        </div>
      // 2. 渲染到页面
      ReactDOM.render(VDOM2,document.getElementById('test'))
      ReactDOM.render(VDOM,document.getElementById('box'))
	 // 1. react自动数组可以遍历，但是对象不行
     // 2. 标签里可混入js表达式，但是语句不可以
     /* 一定注意区分：【js语句（代码）】与【js表达式】
        1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值得地方
          a a+b a.map() demo(1) function test(){} 三目运算
        2. 语句（代码）变量去接接不到，语句控制代码的走向，没有值
           if(){}
           for(){} 
           Switch(){}   
    */
   /* 模块：按功能化开发，提供特定功能的js程序，一般就是js文件(类似业务逻辑的提取)
      why: 业务逻辑增加，代码多且复杂
      作用：复用js，简化编写，提高运行效率
       
      组件：按区域开发
      理解：用来实现局部功能效果的代码和资源的集合（html/css/js/image）
      why: 一个界面功能复杂
      作用：复用编码，简化项目的编码，提高运行效率
      模块化：用模块来编写的应用，该应用就是模块化的应用
      组件化：当应用以多组件的方式实现，该应用就是组件化的应用
    */
   // 安装拓展应用 打包未打包状态不一样，美团
   // components 观察组件的组成
   // profiler 记录网站的性能，哪个组件最慢等等
</script>
</body>
</html>