菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-陈旭辉-20230711 [打印本页]

---

作者: 陌殇    时间: 2023-7-15 09:32
标题: 前端-陈旭辉-20230711
一、学习内容

1.react简介

• React 主要是用来构建 UI（User Interface）的 JavaScript 库
• 从 MVC 的角度来说，开发的是 V 层的代码
• React 是起源于Facebook的内部项目，用于构建 Instagram 网站，在 2013.05 开源
  
  

2.react特点

• 声明式：使用 React 编写UI界面和写HTML几乎一样
• 组件化:   将业务逻辑和UI拆分到不同的组件中，哪里需要哪里调用，提升开发效率
• 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互
• 灵活：React 可以与已知的库 或 框架很好地配合
  
  

3.MVC

MVC： 开发模式（开发架构）

  M（Model）： 模型，一般是指数据表模型，内部封装了针对于数据表的增删改查操作。

  V（View）：视图，页面。给最终用户看的网页。

  C（Controller）： 控制器，控制程序的运行。在什么情况下调用哪个模型，显示哪个视图。

为什么要使用MVC？

  核心优势： 前后端分离开发。前端程序员只关注V，后端程序员关注 M 和 C。提升开发效率。

不管是Vue 还是 React 都是关注 V 层的开发。并且，Vue 和 React 都能使用脚手架来创建独立的Web项目，通过Ajax来访问后端服务器，得到需要渲染到页面上的数据。这个时候就产生了前后端分离的开发模式。

前后端分离的开发模式：1）M和C是后端服务器  2）V是前端服务器   3）两个服务器通过Ajax来联系

4.public目录

public:  存放静态资源文件

• favicon.ico:  网站图标
• index.html： 首页文件
• logo192.png \ logo512.png： 不同尺寸的网站图标
• manifest.json： 应用加壳文件，可以将移动端项目包装成安卓或者ios应用
• robots： 爬虫规则文件
  
  

5.src文件目录

src： 项目文件

• index.js： 项目入口文件
  
  
  • index.css：通用css文件
    
    
• App.js： App组件
  
  
  • App.css： App组件使用的css
  • App.test.js： App组件测试文件
    
    
• logo.svg： logo图标
• reportWebVitals.js：页面性能报告文件
• setupTest.js：项目整体测试文件
  
  

6.react基本使用

• 导入 react 和 react-dom 两个包
• 使用 ==JSX== 语法创建 react 元素
• 调用 ReactDOM.render() 方法将元素渲染到页面中
  
  

8.jsx中的表达式

在 JSX 中，可以在 { } 中嵌入表达式

• 变量 （除了对象都可以）
• 算数表达式
• 直接调用数组
• 三元运算符
• 函数表达式
• jsx自身也能作为表达式
  
  

不能出现在 { } 中的东西

• 变量中保存了一个对象 （只有 style 中可以使用对象）
• if/for 等流程控制不能出现在 {} 中
  
  

9.循环渲染

核心思想：  

• 使用数组的 map 方法循环将每个单元的数据改造成 jsx ，并保存在一个新的数组中
• 在 {} 中的数组是可以直接被循环渲染的
• 注意： 要使用 key 绑定每一次循环，key 值要唯一
  
  

10.样式处理

两种方式：

• 行内样式 --- style ：对象形式设置样式
• 类名 --- className ： 1）className 就是标签中的 class属性，在 jsx 中必须使用 className   2）css样式写在一个独立的文件内   3）使用 import 导入css文件
  
  

11.react组件基础

• 组件最大的特点是可以复用（UI结构 和 业务逻辑）
• 通常情况下：一个页面是由多个组件组合而成的，每个组件都完成了页面上某个区域的功能
• 组件之间也能进行嵌套（父-子结构）
• 组件是封闭的，在组件中定义的数据是不能直接交给外界来操作的
• React 中的组件分为  函数组件 和  类组件两种
  
  

11.1.使用函数创建组件

• 使用函数创建的组件叫做 ==函数组件==
• 函数名称首字母必须大写
• 函数组件需要有返回值，而且是 JSX 结构； 返回值可以为 null， 意思是不渲染任何内容
• 使用函数名作为组件标签名（也就是组件名）
  
  

11.2使用类创建组件

• 使用 class 创建的组件叫做 类组件
• 类名首字母需要大写，并且要继承 React.Component 父类
• 继承父类就意味着能够调用父类中提供的属性和方法
• 类组件必须要有 render 方法，用来返回 JSX
  
  

11.3组件抽离

将每个组件放到单独的 js 或者 jsx 文件中，组件就会更加易于开发和维护

目标： 创建一个独立的 MyCom 组件，并在 index.js 使用该组件

步骤：

1) 创建 MyCom.js 文件 （组件文件，内部可以使用函数组件或者类组件）

2) 在 index.js 文件中导入 MyCom.js 文件，再渲染组件

12.事件

• React中的事件叫做合成事件，模拟了原生事件，并解决了浏览器兼容性的问题
• 语法： on+事件名称={ 事件处理程序 }， 例如： onClick={()=>{}}
• 注意： 事件名必须用驼峰命名法，例如： onMouseEnter、onKeyUp
  
  

        

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4