By_Xb

React-native - 基础主要讲解以下React的基础知识,方便同学们更好的学习项目的知识。 React Native 介绍 文件目录结构 JSX RN样式 基本标签 插值表达式 调试 事件 生命周期 mobx React Native 介绍 文件目录结构1234567│ App.js --- 项目的根组件│ index.js --- 项目的入口文件 │ package.json --- 项目的描述文件 │ .eslintrc.js --- eslint的配置文件 │ .prettierrc.js --- 格式化配置文件 │ android --- 编译安卓相关 │ ios --- 编译ios相关 老师的vs code的插件 JSX React中写组件的代码格式 全称是 JavaScript xml 12345678import React from ...

hadoop1. hadoop概述Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。Hadoop实现了一个分布式文件系统（ Distributed File System），其中一个组件是HDFS（Hadoop Distributed File System）。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，而MapReduce则为海量的数据提供了计算 1.hadoop搭建 [待记录]hive1.hive概述 hive是基于Hadoop的一个数据仓库工具，可以将结构化的数据文件映射为一张数据库表，并 ...

环境搭建概述react-native 的环境搭建相比较于普通的web项目(vue、react）来说要繁琐不少，但是通过以下的方式基本都可以得到解决。 笔记的文档 RN的官网文档 百度+谷歌 安装环境介绍 操作系统：win10专业版 手机：安卓手机真机一部或夜神模拟器 必须安装的依赖有:Node、JDK、Yarn、Android SDK、Python2 Node的安装 先到 官网 去下载node版本(使用 nvm 工具来安装也可以) 老师当前是用的 12.16.3 版本 以 管理员 身份安装 然后一直点击下一步即可 Yarn的安装Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载 1npm install yarn -g  // 使用npm全局安装yarn 检查是否安装成功 1yarn -v 效果如下: JDK的安装与配置 Java SE Development Kit 安卓系统的APP离不开JAVA环境，因此需要下载安装JDK(1.8版本)。到该网站下载JDK 需要注意的是单击下载之后，会跳转到一个Oracler的登陆页面，得登陆之后才可以下载 ...

移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 1.2 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局，还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称”项目”。 总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 3 ...

Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% …… 2.源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking …… 3.拥抱TypeScript Vue3可以更好的支持TypeScript 4.新的特性 Composition API（组合API） setup配置 ref与reactive watch与watchEffect provide与inject …… 新的内置组件 Fragment Teleport Suspense 其他改变 新的生命周期钩子 data 选项应始终被声明为一 ...

Vue3移步到此链接：https://24kcs.github.io/vue3_study/chapter1/01_%E5%88%9D%E8%AF%86TS.html#typescript-%E7%9A%84%E4%BB%8B%E7%BB%8D ES61.1块级作用域 ES6之前没有块级作用域，ES5的var没有块级作用域的概念，只有function有作用域的概念，ES6的let、const引入了块级作用域。 ES5之前if和for都没有作用域，所以很多时候需要使用function的作用域，比如闭包。 1.1.1 什么是变量作用域 变量在什么范围内可用，类似Java的全局变量和局部变量的概念，全局变量，全局都可用，局部变量只在范围内可用。ES5之前的var是没有块级作用域的概念，使用var声明的变量就是全局的。 123456{ var name = 'zzz'; console.log(name);}//可以打印出 zzzconsole.log(name); 上述代码中{}外的console.log(name)可以获取到name值并打 ...

常用命令 进行相关 123#查看当前端口运行状态lsof -i:6379 格式：lsof -i:端口号kill -9 2200093 格式：lsof -i:pid CentOS8 安装Nginx首先，介绍一下 Linux 的安装方式，可以是 yum 安装，也可以是源码包安装。 yum 安装：简单方便，不易出错。 源码包安装：有点繁琐，但是服务性能好。 yum 安装 1. 安装 Nginxyum 安装 nginx 非常简单，就输入一条命令即可。 12$ sudo yum -y install nginx # 安装 nginx$ sudo yum remove nginx # 卸载 nginx 使用 yum 进行 Nginx 安装时，Nginx 配置文件在 /etc/nginx 目录下。 2. 配置 Nginx 服务12345$ sudo systemctl enable nginx # 设置开机启动 $ sudo service nginx start # 启动 nginx 服务$ sudo service nginx stop # 停止 nginx 服务$ sudo ...

TypeScript中的基本类型TypeScript中的基本类型： 类型声明 类型声明是TS非常重要的一个特点； 通过类型声明可以指定TS中变量（参数、形参）的类型； 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错； 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值； 语法： 自动类型判断 1234567let 变量: 类型;let 变量: 类型 = 值;function fn(参数: 类型, 参数: 类型): 类型{ ...} TS拥有自动的类型判断机制 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明 类型： 类型 例子 描述 number 1, -33, 2.5 任意数字 string ‘hi’, “hi”, hi 任意字符串 boolean true、false 布尔值true或false 字面量 其本身 限制变量的值就是该字面量的值 any * 任意类 ...

思维导图 [一] 传统布局和flex布局对比传统布局特点兼容性好 布局繁琐 局限性，不能再移动端很好的布局 flex布局特点操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 建议移动端 或者 PC端不需要兼容低版本浏览器 就可以使用用flex布局 flex布局原理给父盒子设置display:flex;来控制子元素的排列方式 flex布局注意事项使用flex布局就不要使用浮动、vertical-align，这两个样式会失效 flex布局中没有X轴和Y轴的概念 主轴和交叉轴是相对的，可以变换的。主轴方向是横的，交叉轴方向就是竖的。主轴方向是竖的，交叉轴方向就是横的 主轴相关配置注意事项1.主轴侧轴相关配置要写到父盒子中 flex-direction功能和注意事项功能：设置主轴的方向 注意事项：主轴和交叉轴是相对的，可以变换的。主轴是横的，交叉轴就是竖的，主轴是竖的，交叉轴就是横的 取值范围 值 说明 row(默认) 主轴为横轴，子元素横着排列(默认，常用) column 主轴为纵轴，子元素竖着排列 fle ...

本章介绍精灵图、字体图标、CSS三角形、鼠标样式、输入框轮廓、图片和文本居中、溢出文本省略号、PC端CSS初始化样式 思维导图 [一] 精灵图（重点）为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 为什么使用精灵图（目的）： 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。 核心原理： 将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。 精灵图举例: 1.2 精灵图（sprites）的使用使用精灵图核心： 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。 这个大图片也称为 sprites 精灵图 或者 雪碧图 移动背景图片位置， 此时可以使用 background-position 。 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同 因为一般情况下都是往上往左移动，所以数值是负值。 使用 ...