大口喝脉动的博客

原创 Hooks如何与memoizedState关联

react中有一颗current当前dom树，初始化时没有，在完成一次组件更新后，会把当前workInProgress树赋值给current树，current会在commit阶段替换成真实的Dom树。 workInProgress树，更新后会赋值给current树。 workInProgress有一个memoizedState属性，在渲染时以链表的 形式存放hooks信息。 workInProgress上的expirationTime过期时间属性来确定更新优先级。 renderWithH...

原创 浅谈React中useRef的原理及实现

useRef的用法初始化：constcount=useRef(0)读取：count.current特点：useRef返回一个可变的ref对象（每次渲染时都会返回一个相同的引用，引用地址不会发生变化），其.current属性被初始化为传入的参数（initialValue）。返回的ref对象在组件的整个生命周期内保持不变。useRef能够拿到最新的.current里的值。我们举个例子来看一下。import { u...

原创 浅谈useMemo、useCallbac的原理及实现

在我理解useMemo和useCallback是负责缓存优化的。我最开始讲到react组件有个机制：当父组件任何变动的情况下，子组件都会被重新渲染，即使prop所依赖的值没有发生变化。在类组件中，我们通常在shouldComponentUpdate中进行判断是否更新。但是在函数组件中没有shouldComponentUpdate。这意味着函数组件的每一次调用都会执行其内部的所有逻辑，那么会带来较大的性能损耗。因此useMemo和useCallback就是...

原创 浅谈React Hooks的原理及实现

什么是hooks？在function组件中，每一次更新都是一次新的函数执行,为了保存一些状态,执行一些副作用钩子,所以产生了hooks，去帮助记录组件的状态，处理一些额外的副作用。hooks的内部运行机制首先每次执行一个hooks函数，都产生一个hook对象，里面保存了当前hook信息,然后将每个hooks按照定义的顺序以链表形式串联起来，并存放到memoizedState中。更新的时候，再按照顺序，从memoizedState中把上次记录的值拿出来。这样我们就可以解答几个问题：...

原创 React中的自定义Hook

封装数据操作 简单例子：// useList.jsimport {useState, useEffect} from 'react'const useList = () => { const [list, setList] = useState(null) useEffect(() => { ajax().then(list => { setList(list) }) }, []) //确保..

原创 React中的Hooks—进阶篇

在之前的文章中我提到了三个基础的hooks useState、useEffect和useRef。大家可以打开下面链接进行查看。react中Hooks的基本用法下面我们来讲解几个额外的hooks。useReducer 用来践行Flux/Redux思想 看代码，分四步走一、创建初始值initialState二、创建所有操作reducer(state, action);三、传给userReducer，得到读和写API四、调用写({typ...

原创 结合vant组件库对封装的axios进行优化

import axios from 'axios'import {Toast} from 'vant'//创建axios实例const axiosObj = axios.create({ baseURL: 'http://api.web1024.cn', timeout: 8000, params: { key: 'gxn759' }})let toast//请求拦截axiosObj.interceptors.request.use(co.

原创 封装axios模块

import axios from 'axios'//创建axios实例const axiosObj = axios.create({ baseURL: 'http://api.web1024.cn', timeout: 8000, params: { key: 'gxn759' }})/** * 用于发送请求的通用方法 * @param {*} options 配置信息，method请求方法，params参数，path路由 * @retu.

原创 axios的基本用法

1、基本用法安装cnpm i axios --save在 main.js 中引入 axiosimport axios from 'axios'Vue.prototype.$axios = axios在组件中使用 axios<script> export default { mounted(){ this.$axios.get('/goods.json').then(res=>{

原创 React中的文档碎片—Fragment

使用：<Fragment><Fragment><></>作用：>可以不用必须有一个真实的DOM根标签了案例：import React, { Component,Fragment } from 'react'export default class Demo extends Component { render() { return ( <Fragment key={1}> &...

原创 在React中通过路由拦截进行权限校验

具体思路：通过配置一个路由表，在路由信息中添加一个字段来判断是否被拦截。通过写js操作来判断是否有这个字段。如果有则通过重定向进行拦截。下面看代码：主页：import React, { Component } from 'react'import MyView from './MyView'import routerList from './routerConfig'export default class index extends Component { ren

原创 React中路由组件的lazyLoad

1.通过React的lazy函数配合import()函数动态加载路由组件===>路由组件代码会被分开打包constLogin=lazy(()=>import('@/pages/Login'))2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面<Suspensefallback={<h1>loading.....</h1>}><Swit...

原创 React中setState更新状态的2种写法

(1).setState(stateChange,[callback])------对象式的setState1.stateChange为状态改变对象(该对象可以体现出状态的更改)2.callback是可选的回调函数,它在状态更新完毕、界面也更新后(render调用后)才被调用(2).setState(updater,[callback])------函数式的setState...

原创 一张图带你了解React

原创 一张图带你了解TypeScript

原创 浅谈immutable的使用方法

在聊immutable之前我们先思考一个问题。敲代码时经常会使用深拷贝的方法，但是一般的深拷贝方法是把所有的数据节点都拷贝下来，此时没有改变的数据也会被拷贝一份。这就会造成性能的消耗。我们该如何解决性能消耗问题。此时我们就需要一个结构共享的方案。什么是结构共享？简单来说在拷贝时，我们拷贝改变的数据节点极其父节点，而没有改变的数据我们就直接拿过来，不进行拷贝，这就是结构共享。而在项目中我们就需要immutable这个工具来实现结构共享。Immutable数据是一个不可变数据，就是一旦创建，就不能再被

原创 redux的基本用法

什么是redux？简单地说，我是把它理解为一个状态管理仓库，里面可以存储状态，并且可以对这些状态进行操作。配置redux：npm install redux1、创建redux文件：import{createStore}from'redux'//引入redux，解构createStore2、创建一个store对象：conststore=createStore(reducer) store对象有两个参数；...

原创 react中Hooks的基本用法

hook 做为 react 新增特性，可以让我们在不编写 class 的情况下使用 state 以及其他的 react 特性。这里我们主要介绍两个特性useState和useEffect。1、useStateuseState主要用来改变一个state状态值。我们先看一下基本写法：let [state,setState] = useState({ n: 0 })第一个参数state为useState的对象，也就是值。第二个参数为改变第一个参数state值的方法

原创 react中如何实现双向数据绑定

学过vue的小伙伴都知道，在vue中可以通过v-model实现数据的双向绑定。而react的设计思路是单向数据流，我们该如何在react中实现双向数据绑定呢？我们先整理一下具体思路。实现效果：一个input标签、在state中设置一个状态。改变input标签内容，状态中的值会改变。改变状态中的值，input标签中内容会改变。思路：1、给input标签绑定一个onchange改变事件2、通过获取事件目标中value值...

原创 react中组件的生命周期函数

react中组件的生命周期函数主要分为三个阶段，分别为：1.初始化阶段:由ReactDOM.render()触发---初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount()=====>常用 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅...

原创 webpack中的四个核心概念

在配置webpaak时需要在项目的根目录下创建webpack.config.js配置文件。其中涉及到webpack中四个核心概念，分别为：（1）配置入口（entry）module.exports = { entry:'./src/index.js'}（2）配置出口（output）const path = require('path');module.exports = { // ... output: { path: path.resolve(__dirname, '

原创 JavaScript中ES6的class类语法

ES6中的类是一个专门用来创建类的内容。我们可以简单的把它理解为一个构造函数。直接上语法！+class类名{}=> {}里面书写的内容+constructor(){} => 等价于构造函数体+方法名(){} =>构造函数原型上的方法 =>等价于构造函数.prototype.方法名=function(){}注意:+因为构造函数的本质是函数,所以可以当做普通函...

原创 浅谈react中的组件

react最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件 component。react中有两种创建组建的方式，分别为：函数式组件和class组件。接下来我们一起看一下。在写组件前先定义一个jsx变量let str =( <div> <h3>哈哈哈哈</h3> </div>)// 特别注意这里的写法//在JSX里写js表达式(只能是表达式，不能流程控制)就需要加 {}//包括注释也是一样，并且可以多层嵌套

原创 Vue.js中路由的导航守卫

vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。1. 全局守卫 （是由router对象调用） 前置守卫 router.beforeEach((to,from,next)=>{}) 后置守卫 router.afterEach((to,from)=>{})// to 要去的路由对象 // from 来的路径 // next 要去的路径2. 组件内守卫钩子 ...

原创 Vue.js中vuex详解

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。store是vuex的一个实例对象，每个应用仅包含一个store实例对象。下面我们来看一下vuex中的五个核心特性。1. State对象类型，用来存储所有的数据对象。state: { //用于管理全局的数据 val: 'hello' }调用state中的数据<template> <div> {{$store.state.val}} .

原创 Vue.js中路由的编程式导航

在vue中书写路由分为声明式和编程式两种。声明式导航：通过点击链接的方式实现的导航<router-link to="/user">User1</router-link>编程式导航：调用js的api方法实现导航this.$router.push( { name:'user' } )编程式导航可以进行传参，并且减少了一层a标签的嵌套。query形式:this.$router.push({ path: '/home', query: { .

原创 Vue.js中路由的懒加载

vue中路由的懒加载是一种常见的优化方式。在项目中如果没有应用懒加载，页面会先加载所有的路由页面，这会影响页面的加载速度。懒加载可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，起到项目优化作用。如何来进行路由的懒加载，举个栗子看一下。未应用路由的懒加载。import Vue from 'vue'import VueRouter from 'vue-router'import Main from '@/views/Main.vue'import Home

原创 Vue.js中常见的组件通信

1. 父组件向子组件传值父组件通过以属性的方式把值绑定在子组件上身上。 子组件通过props属性来接收该值举个栗子来看一下：父组件<div> <input type="text" v-model="fv" > <div>fv: {{fv}} </div> <hr> <son1 :fv = "fv" ></son1> </div&.

原创 Vue.js中的内置组件component

组件 (Component) 是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。语法：Vue.component('组件名称', { })第1个参数是标签名称，第2个参数是一个选项对象有一个特殊属性is ，用来决定哪个组件被渲染。动态组件模板template在创建组件时，需要把HTML结构刚在组件模板(template)中；组件模板内必须是单个根元素；组件模板的内容可以是模板字符串 ；例：设置一个搜索组件模板 te

原创 Vue.js中的自定义指令directives

除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。自定义指令，需要声明钩子函数。注册自定义指令也分为注册全局自定义指令和注册局部自定义指令。两者用法相同，局部指令只能在当前组件里面使用。当全局指令和局部指令同名时以局部指令为准。1. 自定义指令中的钩子函数一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind、inserted、update、componentUpdated和unbind。bind => 指令被绑定...

原创 Vue.js常见的选项属性——过滤器filter

Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示。语法：用法 {{str | filterName}}要过滤的内容会作为 filterName() 参数，filterName()的返回值就是在页面要渲染的内容过滤器分为全局过滤器和局部过滤器，全局注册时是filter，没有s的。而局部过滤器是filters，是有s的。1. 全局过滤器filter...

原创 Vue.js中的常见选项属性——监听器watch

1.监听器watch监听器watch一般用来响应数据的变化，一般用于异步或者开销较大的操作。watch 中的属性 一定是data 中 已经存在的数据。注意：不要使用箭头函数来定义watch函数2.深度监听当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。下面通过一个案例来看一下监听器watch和深度监听。HTML文件 <div id="app">

原创 Vue.js常见的选项属性——计算属性computed

计算属性是基于它们的响应式依赖进行缓存的 ，计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。computed是一个选项属性，需要书写成一个对象格式，内部写成函数格式。 <body> <div id="app"> {{i}} <!-- 给按钮绑定一个事件，用来改变i值 --> <button type="button" @click="i++">+

原创 Vue.js入门——指令大全

什么是指令？Vue的指令是带有特殊前缀v-的HTML特性，他可以绑定一个表达式，并且把一些特性作用到DOM结构上去。 下面我们来看一下常见的指令。1. v-textv-text指令用于将数据填充到标签中，作用于插值表达式类似。如果数据中有HTML标签会将html标签一并输出。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。 <div id="box"> {{msg}} &lt.

原创 Node.js中的路由

路由是指客户端请求地址与服务器端程序代码的对应关系。简单的说，就是请求什么响应什么。举个栗子!var http = require('http')var url = require('url')http.createServer((req,res)=>{ //客户端发来请求 //设置响应信息的编码格式 res.setHeader('Content-Type','text/html;charset=UTF8') // url.parse() 函数第一

原创 Node.js的模块化开发

1.Node.js的模块化开发在node.js中的模块主要分为三类:内置模块、第三方模块和自定义模块。2.内置模块Node运行环境提供的API. 因为这些API都是以模块化的方式进行开发的, 所以我们又称Node运行环境提供的API为系统模块。常用的内置模块有：fs、os、path、EventEmitter、http。1.系统模块fs（文件操作系统）//读文件fs.reaFile('文件路径/文件名称'[,'文件编码'], callback);fs.readFile('..