2020年05月_L?z ^f my

原创 React Hooks 使用

Hooks 是一项新功能提案，可以在不编写类的情况下使用 state（状态）和其他 react 功能使用 hooks 的理由高阶组件为了复用，会导致代码层级复杂类声明的组件中，生命周期复杂，代码编写容易混乱写成函数式组件，是无状态组件；因为需要状态，又得改成 class 组件，开发成本变高hooks 的使用useState() 保存组件状态/* 语法：const [state, setstate] = useState(initState)，可以定义多个状态 state.

2020-05-27 22:38:00 285

原创 Mobx 状态管理

Mobx 介绍Mobx 是一个功能强大，上手非常容易的状态管理工具Mobx 背后的哲学很简单：任何源自应用状态的东西都应该自动地获得Mobx 利用 getter 和 setter 来收集组件的数据依赖关系，从而在数据发生变化时，精确的知道哪些组件需要重绘Mobx 与 redux 的区别Mobx 写法上更偏向于面向对象对数据直接进行修改操作，不需要始终返回一个新的数据并非单一 store，可以有多个 storeredux 默认以 JavaScript 原生对象形式存储数据，而 Mobx

2020-05-26 22:29:08 444

原创 react 中的状态管理

flux 介绍flux 是一种架构思想，专门解决软件的结构问题。它跟 MVC 架构是同一类东西，但是更加简单和清晰。flux 存在多种实现（至少 15 种）Facebook Flux 是用来构建客户端 web 应用的应用架构，它利用单向数据流的方式来组合 react 中的视图组件。它更像一个模式而不是一个正式的框架。reduxredux 是什么redux 是一个 JavaScript 容器，用于进行全局的状态管理redux 可以让你构建一致化的应用，运行于不同环境，并且易于测试red

2020-05-26 22:16:18 335

原创使用 immutable.js 对引用数据类型进行深拷贝

immutable.js 介绍每次修改一个 immutable 对象时都会创建一个新的不可变的对象，在新的对象上操作并不会影响到原对象的数据深拷贝与浅拷贝let arr = {}，arr2 = arr 这种属于浅拷贝Object.assign() 、扩展运算符(…) 都只是一级属性复制，比浅拷贝多深拷贝一层而已const obj1 = JSON.parse(JSON.stringify(obj)) 可以实现深拷贝，但是如果属性值中有 undefined 时会丢属性，属性值是数据的引用地址

2020-05-26 14:24:02 407

原创 react 中使 css 样式局部生效

在 react 中，css 样式默认是全局生效的，想要使样式局部生效可以使用以下方案给 css 文件名加一个 .module.css 后缀，编译后的 css 样式文件就会导出一个对象，为每个选择器起一个随机名字// 文件名假设为 index.module.css.box { width: 50px; height: 50px;}// 在这个文件中设置全局样式:global(.active) { color: red;}import React, { Co.

2020-05-20 22:05:09 3354

原创 react 路由

什么是路由路由是根据不同的 url 地址展示不同的内容或者页面。在 react 中，react-router-dom 包，可以友好的帮我们解决 react components 到 url 之间的同步映射关系。使用路由安装路由$ npm install react-router-dom -S引入路由import React, { Component } from 'react'// 引入路由文件import { HashRouter, // 哈希模式 BrowserR

2020-05-20 21:53:15 203

原创 react 基础

react 官方脚手架 create-react-app 的使用全局安装脚手架$ npm install create-react-app -g创建项目$ create-react-app 项目名称 # 项目名不能是大写字母# OR$ npx create-react-app 项目名称 # 先检测有没有安装脚手架，没有就先本地安装，再创建项目react 介绍react 起源于 Facebook 的内部项目，后发现这套框架好用，在 2013年5月开源了。react 并

2020-05-20 21:47:28 152

原创 mock 数据模拟

mock 数据模拟这里介绍一款非常好用的 json-server 数据模拟服务器全局安装 json-server$ npm install -g json-server创建一个 json 文件，假设文件名为 data.json{ "user": [ {"id": 1, "username": "张三", "password": "abc123"}, {"id": 2, "username": "李四", "password": "abc456"

2020-05-15 08:34:13 288

原创 particles 粒子效果

particles 粒子库使用在 react 中的基础使用，npm 地址安装依赖包$ npm install react-particles-js -S在组件中使用import Particles from 'react-particles-js' class App extends Component{ render(){ return ( <Particles /> ) }}具

2020-05-14 13:05:18 399 1

原创 react 生命周期钩子函数的触发时机

react 生命周期钩子函数老的生命周期初始化阶段// 组件将要被挂载，render 之前最后一次修改状态的机会componentWillMount () {} // 不安全，将被新生命周期替代// 渲染，只能访问 this.props 和 this.state，不允许修改状态和 dom 输出render () {}// 成功 render 并渲染完成真实 dom 之后触发，可以修改 domcomponentDidMount () {}运行中阶段// 子组件将要接收 p

2020-05-12 09:18:49 674

原创 node 操作 mongodb 数据库

mongodb非关系型数据库，又叫 nosql ，使用场景多是解决大规模数据集合多重数据种类官网下载安装即可如果安装文件目录中没有 data 文件夹，手动建一个 data 文件夹，data 下面再建一个 db 文件夹为了可以在任一盘符下都可以启动，最好手动配置一下全局环境变量服务端启动终端中输入指令 mongod --dbpath 安装路径 (D:\MongDB\bin...

2020-05-05 21:49:38 204

原创后端路由的使用

后端路由路由：说明你要去的路径。对于前端，就是告诉浏览器应该去哪里；对于后端，可以理解成一个子服务，一个路由就是一个小的服务，处理一个接口使用路由子服务配置路由，如下：./routers/user.js 文件// 子服务配置路由// 1.引入 express 模块const express = require('express')// 2.创建路由对象let rout...

2020-05-05 21:34:33 1849

原创 express 基本使用

EXPRESS 的使用介绍：express 是一个第三方模块，是封装了 nodejs 的库，使工作简单化，提高开发效率。搭建 web 服务下载 express 包到项目运行依赖中$ npm i express -S搭建服务// 引入 express 模块const express = require('express')// 创建一个 web 服务const ...

2020-05-05 21:02:44 250

原创 npm、yarn、bower 包管理工具及nrm和nvm的使用

npm 包管理工具安装安装 node 后，会自动携带这个 npm 包管理工具的，不需要我们再去安装常用指令# 安装全局包$ npm install 包名 -g# 卸载全局包$ npm uninstall 包名 -g# 初始化项目，会生成一个 package.json 文件记录项目依赖$ npm init# 下载项目依赖$ npm i 包名 -S # 下...

2020-05-05 15:49:01 384

原创 vant 基本使用

vant 库的基本使用vant 库是一款配合 Vue 使用的移动端 UI 组件库，轻量、高效。项目本地安装 vant$ npm install vant -S在 main.js 文件中引入 vant 库核心模块与它的样式import Vue from 'vue'import Vant from 'vant'import 'vant/lib/index.css'Vu...

2020-05-05 13:00:00 1886

原创 Vue-cli 简单使用

Vue-cli 基础使用介绍现在使用前端工程化开发项目是主流的趋势，也就是说，我们需要使用一些工具来搭建 vue 的开发环境。一般情况下我们都会选择使用 webpack 进行项目的构建，在这里我们直接使用 vue 官方提供的，基于 webpack 的脚手架工具进行项目开发。安装全局安装 vue-cli$ npm install -g @vue/cli# 或者$ y...

2020-05-05 11:17:37 166

原创移动端 rem 布局

移动端 rem 布局viewport 视口宽度 (clientWidth)当浏览器宽度小于 980px 时，视口宽度就是 980px ，当浏览器宽度大于 980px时，视口宽度和浏览器宽度保持一致移动端布局移动端使用视网膜高清屏（Retina）Retina 屏幕有一个属性叫 dpr(设备像素缩放比) = 物理像素/ 逻辑像素比如 iPhone 6 的宽度 750，这...

2020-05-05 09:36:43 217

原创 elementUI 的基本使用

elementUI 的基本使用项目本地安装 element-ui$ npm install element-ui -S在 main.js 文件中引入 UI 库核心模块与它的样式import Vue from 'vue'import App from './App.vue'// 引入 element-ui 和它的样式文件import ElementUi from 'ele...

2020-05-05 08:27:37 664

原创 postcss-pxtorem 插件自动转换 rem 单位

px 自动转换 rem 单位安装 postcss-pxtorem 与 lib-flexible$ npm install postcss-pxtorem lib-flexible --save-dev使用 postcss-pxtorem 插件来自动转换代码中的 px 单位为 rem 单位在项目根目录下创建一个 postcss.config.js 文件，书写如下配置modul...

2020-05-04 08:27:10 974

原创 nprogress 进度条插件的使用

nprogress 进度条插件npm地址安装$ npm install nprogress --save在 router.js 文件中引入，并使用//导入import NProgress from 'nprogress'import 'nprogress/nprogress.css'// 如果不需要转圈配置如下代码，默认是 trueNProgress.confi...

2020-05-04 08:24:12 473

原创 better-scroll滚动插件的基础使用

better-scroll 滚动插件官网地址基础使用 (与 Swiper 用法很像)安装$ npm install better-scroll --save在需要使用的文件中引入import BScroll from 'better-scroll'创建实例（这里是进行真实 dom 操作，注意创建时机）let scroll = new BScroll('.wr...

2020-05-04 08:22:44 316

原创 vue-lazyload 图片懒加载的使用

vue-lazyload 图片懒加载插件库官网地址基础使用安装$ npm i vue-lazyload -Smain .js 中引入import Vue from 'vue'import App from './App.vue'import VueLazyload from 'vue-lazyload' // 引入 // 1. 基础使用Vue.use(Vue...

2020-05-04 08:20:32 196

原创 vue 基础

Vue 2.x 学习介绍Vue 是渐进式 JavaScript 框架，用到什么功能，就引入对应功能模块；Vue 是一个 MVVM 的 js 框架，Vue 的核心库只关注视图层，开发者只关注 M-V 的隐射关系。Vue 的特点：使用成本低灵活，生态系统完善，适用于任何规模的项目高效，体积小、优化好、性能好MV 模式（MVC/MVP/MVVM)*MVC ：（Mod...

2020-05-03 21:14:23 212

原创 Vue虚拟DOM

Vue 中虚拟 dom 介绍虚拟 dom核心思想：对复杂的文档 DOM 结构，提供一种方便的工具，进行最小化地 DOM 操作具体操作：内存中会生成一颗虚拟 dom 树，并将内存中的虚拟 dom 树初始化渲染成真实 dom 树当我们修改了 data 里面的数据时，将之前的虚拟 dom 树结合新的数据，生成一颗新的虚拟 dom 树并将新的虚拟 dom 树和之前的虚拟 dom 树...

2020-05-03 11:34:43 267

原创 node 项目线上环境

腾讯云服务器搭建Node 安装选择安装目录：$ cd /usr/local下载 node 包：$ wget http://npm.taobao.org/mirrors/node/v12.13.1/node-v12.13.1-linux-x64.tar.xz解压xz:$ xz -d node-v12.13.1-linux-x64.tar.xz解压tar$ ta...

2020-05-03 11:13:07 363

Luzhangfeng的博客