默

前言

最近用 React Hook 实战了一个 React 项目。今天来总结一下，因为都是拼凑的时间所以项目历时半个多月之久，通过本次学习进一步的熟悉了 AntD 常用组件的使用，业务功能（增删改查）的开发及百度地图 API、富文本组件的使用、权限设置模块，最重要的是把学习的 React Hook 落实到了项目中。

前言

React Hooks 是 React 16.12 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

1.useState

调用useState方法时做了什么？

定义一个 state 变量，这是一种在函数调用时保存变量的方式——useState是一种新方法，它与class里的this.state提供的功能完全相同。一般来说，在函数退出后变量就会“消失”，而state中的变量会被react保留。

前言

为什么不可以呢？我们 JS 的使用习惯在遍历时使用条件判断是很常见的， vue 模版中当然也是可以使用的，但是v-for和v-if不可以出现在同一个元素上。
因为在 vue 中会优先执行 v-for,如果每一次都遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

使用情景

v-for 和 v-if 同时使用有 3 种情景：

1. 部分遍历（内/外部条件）：一个 list 中某个属性值符合条件的遍历出来；
2. 全部遍历（外部条件）：某外部条件符合条件时遍历全部。
3. 全部遍历（内部条件）：根据某内部条件渲染出不同的内容。

注：内部条件指被遍历数据内部属性值或条件；外部条件指与独立于被遍历数据以外的数据。

一.单行文本超出省略

关键属性：text-overflow:ellipsis|clip 。
clip : 　不显示省略标记（…），而是简单的裁切掉溢出的文本
ellipsis : 　当对象内文本溢出时显示省略标记（…）
string: 使用指定字符串来代表被修剪的文本
兼容性：所有主流浏览器都兼容, IE6+

1.css 实现：

1
2
3
4
5

div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2.css+html 实现：

使用<nobr>不换行标签（行内标签）此标签与 css white-space 功能相同。
详情参考http://www.divcss5.com/html/h533.shtml 。
<nobr>兼容性：IE11+

持续更新…

1.使用 antv ，当有两种渲染方式：canvas 和 svg，最好选择 canvas 方式，因为 svg 在 IE 浏览器下有很多 bug。

前言

基于 vue 开发的项目中有的交互需要修改元素的样式，就会用到 class 或 style 的动态绑定。当样式的属性值是变量时一般使用 style，其他情况最好使用 class，个人觉得这样模版代码更好维护一点。

1.绑定 class 方式

js 代码：

1
2
3
4
5
6
7

data(){
  return {
    isActive:true,
    isCenter: false,
    class2: 'align-center'
    }
  }

前言

git 相关知识可以说是开发者的必备常识，虽然目前市面有很多方便的可视化操作工具，但是 git 的指令用起来不仅方便快捷而且显得更加有逼格，况且面试的时候有可能被问到，所以还是有必要学习并掌握的。

1.基础指令

克隆远程仓库代码到本地

1

git clone 远程仓库地址

添加变更到暂存区

1
2

git add . //添加全部变更
git add <fileName> //添加指定文件的变更

前言

先来了解几个概念：

数组：是有序的元素序列，其索引是从 0 开始自然增长的整数，元素值可以是任何 JavaScript 值，并且包含一个名为 length 属性，该属性值表示数组元素的长度。

对象：JavaScript 中对象类型为一组无序的由键/值组成的数据集合，其元素的键名和值都可以自定义。

类数组对象：是一种类似数组的对象。最基本的要求就是具有 length 属性的对象。

三种使用方式

根据传参的形式不同分为三种使用方式。

1. Array.from({length: x}, Fn)

第一个参数指定了第二个参数的执行次数，返回一个长度为 x 的数组。

1
2
3
4

Array.from({ length: 3 }, () => 'lemon') // ["lemon", "lemon", "lemon"]
Array.from({ length: 3 }, (v, i) => i) // 生成一个从0开始的的数组[0, 1, 2] 这里我暂时还有疑问参数v是什么？？？

Array.from({ length: 3 }, (v, i) => (item = { year: i + 2000 })) // 生成一个年份对象数组[{'year': 2000, 'year': 2001, 'year': 2002}]

前言

Vue I18n 是 Vue.js 的国际化插件。最近项目需求——给网站加中英文语言切换功能，使用的是 vue-i8n。老大修改了项目架构使项目支持 i8n，铺垫做的好就使用起来很 easy 了，整理数据然后比着葫芦画瓢就实现了想要的功能。一直以来我的短板就是学习东西不够深入，总是浅尝辄止于会用，发现了不足就去努力克服吧。不能止步于会用，现在就开始从头学习整理一下项目架构是如何配合 i18n 来使用的。

1.安装

1)npm

1

npm install vue-i18n

2)yarn

1

yarn add vue-i18n

2.开始

对于每个前端开发者来说，CSS 中的 background 属性用起来该是游刃有余了。但是 CSS3 的 background-clip 属性可能不太了解，下面就来跟我一起学习这个属性吧。

background-clip，顾名思义肯定跟背景裁切有关。没错，它存在以下四个属性值

• border-box（默认值）
• padding-box
• content-box
• text

我在网上查了很多资源大部分都只写了前三个属性值，这也是这篇博客诞生的缘故之一。作为一个笔记，假如碰巧被你看到，再碰巧对你有所帮助那就再好不过啦~

下面我们通过具体 Demo 介绍一下每个属性值。