LittleMoon_lyy-CSDN博客

Mobx关于Mobx1.关于Mobx和ReduxMobx和Redux一样，是React状态管理比较流行的解决方案之一。和Redux的原理不一样的是，Mobx早期参考了vue，使用了响应式编程，而React+Mobx的选型就是一个复杂版的Vue。Mobx工作流程：Redux工作流程：Mobx的流程相比Redux而言，非常简洁也很容易上手，性能也相对更好。react以及redux的各种hooks本身的特性以及hooks带来的各种新的状态管理库确实写起来非常顺手，但是hooks不能完全代替clas

2023-07-30 21:13:29 487

原创 taro项目小程序场景下scrollview引发的问题汇总

小程序scroll-view的踩坑记录

2022-07-16 22:05:19 2883 1

原创小程序引入外部组件后报loader和ts语法问题的处理

小程序引入外部组件后报loader和ts语法问题的处理

2022-07-16 17:24:21 2554

原创小程序打包体积过大的解决方案

小程序打包体积过大

2022-06-18 16:39:36 11194 1

原创 React Hooks(六) useRuducer

一关于useRuducer的用法useRuducer是useState的升级版本，当状态更新逻辑比较复杂的时候，就应该考虑使用useReudcer，因为useReducer比useState更擅长描述如何更新状态，并且通过使用useReducer的dispatch能减少状态值的传递。用法：const [state, dispatch] = useReducer(reducer, initialState);看一个简单的例子：const initialState = { n: 0,};c

2022-05-15 16:47:13 446

原创 React之Redux (三) 中间件和异步

一为什么要用中间件从前两篇文章中可以知道，更新Redux中状态的流程是：action -> reducer -> new state。那么问题来了。每次action被触发（dispatch）。reducer就会同步地对store进行更新，在实际开发项目的时候，有非常多需求都是须要通过接口等形式获取异步数据后再进行更新操作的。怎样异步地对store进行更新呢？这里就需要新的工具：中间件middleware二有哪些中间件Redux本身提供的Api与功能并不多，可是它提供了一个中间件（插

2022-05-03 23:08:01 911

原创 React之React-Redux用法(二 )

React-ReduxRedux实现了一个store作为数据存储中心，可以供外部访问，修改等，这就是Redux的思想。但是Redux本身是和React没什么本质联系，只不过Redux的这种数据管理方式和React的数据驱动视图理念很合拍。现在既然有了一个安全的地方存取数据，怎么结合到React里面呢？我们可以在应用初始化的时候，创建一个store = createStore(reducer)，然后在需要的地方通过store.getState()去获取数据，通过store.dispatch去更新数据，通过

2022-05-03 21:25:04 182

原创 React之Redux用法(一)

ReduxRedux是将整个应用状态存储到store，store里存在一个状态树state tree组件可通过store.dispatch派发行为action给store，store不会直接修改state，而是通过用户编写的reducer来生成新的state，并返回给store其他组件通过订阅store中的state状态来刷新试图注意点：整个应用有且只有一个store，其内部的state tree存储整个应用的statestate是只读的，修改state只能通过派发action，需要通过

2022-05-03 18:01:40 524

原创 React Hooks(五) useCallback和useMemo

一 React.memo和useMemo1.memo的作用当父组件的数据变化时，代码会重新执行一遍，子组件数据没有变化也会执行，这个时候可以使用memo将子组件封装起来，让子组件的数据只在发生改变时才会执行。我们先来看一个不用memo的例子：改变count和num的值都会触发子组件的重新渲染import React, { useEffect, useCallback, useState, useMemo } from 'react';import Test4 from './Test4'co

2022-05-02 23:20:09 809

原创 React Hooks(四) useRef

一介绍useRef是一个返回可变引用对象的函数，该对象current属性的初始值为传入的initialValue，且返回的对象在组件整个生命周期中持续存在。1.用法通过ref属性完成对DOM元素的引用通过useRef()实现初始赋值通过current属性查看值import {useRef} from 'react';const ref = useRef(initialValue);···//可以在组件生命周期的任何时间log该属性以查看其值console.log(ref.curr

2022-05-02 16:02:43 1289

原创 React Hooks(三) useContext

react hooks(三) useContextuseContext()可以用于组件之间共享状态。使用方法1.引入createContext, useContext2.通过createContext来创建句柄3.通过Context.Provider来确定共享范围4.通过value来分发内容5.在子组件中通过useContext(Context)来获取数据现在有俩组件，需要共享状态，如下：<div className="test"> <Navbar /> &lt

2022-04-30 23:48:29 504

原创 React Hooks(二) useEffect

一介绍useEffect是在React更新DOM之后运行一些额外的代码，也就是执行副作用操作，比如请求数据，设置订阅，手动更改React组件中的DOM等。二用法useEffect(() => { // 相当于 componentDidMount、componentDidUpdate console.log("code"); return () => { // 相当于 componentWillUnmount console.log("code"); }

2022-04-30 21:56:03 489

原创 React Hooks(一) useState

一什么是React Hooks在讲useState的用法之前，先来看看什么是React Hooks。hooks其实就是有状态的函数式组件。闭包，是react hooks的核心。闭包闭包是一个特殊的对象，由两部分组成，执行上下文的A以及在A中创建的函数B。当执行B时，如果访问了A中的变量对象，那么闭包就会产生。 // 执行上下文,这里暂时写为一个函数，它也可以指一个模块 const A = () => { const a = "aaa" const B = () =>

2022-04-30 21:11:24 474

原创 TS语法七高级类型(二)

TS中的高级类型：1.this类型2.索引类型索引类型查询操作符索引访问操作符3.映射类型基础由映射类型进行推断增加或移除特定修饰符4.条件类型基础分布式条件类型条件类型的类型推断-infer一 this类型this也可以作为一种类型。class Counter { constructor(public count: number = 0){} public add(value: number){ this.count += valu

2022-04-17 14:13:41 2575 1

原创 TS语法六高级类型(一)

TS中的高级类型：交叉类型联合类型类型保护null和undefined类型别名枚举成员类型可辨识联合一交叉类型交叉类型(&)：用于组合多个类型为一个类型，常用于对象类型interface Employee { employeeID: number; age: number;}interface Manager { stockPlan: boolean;}type ManagementEmployee = Employee & Manager;l

2022-04-16 21:34:48 2177

原创 TS语法五类型推论和兼容性

一类型推论：基础多类型联合上下文类型二类型兼容性：1.基础2.函数兼容性参数个数参数类型返回值类型可选参数和剩余参数参数双向协变函数重载3.类4.泛型类型推论//1.基础let name5 = 'lyy'// name5 = 222 报错//2.多类型联合let arr = [1, 'a'] //ts会自动将其推断为 let arr: Array<number | string> = [1, 'a']arr = [2, 3, 'a

2022-04-16 19:21:46 405

原创 TS语法四类

TS中的类：创建类实例constructor方法取值函数和存值函数class表达式静态方法实例属性其他写法实现私有方法ES5中创建类实例function Point(x, y){ this.x = x this.y= y}Point.prototype.getPosition = function(){ return '(' + this.x + ' , ' + this.y +')'}var p1 = new Point(2,3)console

2022-04-16 18:53:45 626

原创 TS语法三函数和泛型

一 TS中的函数TS中的函数主要包括以下几个方面：(1)函数类型为函数定义类型完整的函数类型使用接口定义函数类型使用类型别名(2)参数可选参数默认参数剩余参数(3)重载1.定义函数类型//(1)使用类型别名定义函数类型type Adder = (x:number, y:number) => numberlet adder:Adder = (arg1:number ,arg2:number) => arg1+arg2 //add2 = (arg1 ,arg

2022-04-12 14:10:28 1421

原创 TS语法二接口

TS中的接口主要包括以下内容：基本用法可选属性多余属性检查绕开多余属性检查只读属性函数类型索引类型继承接口混合类型接口// 基础用法interface NameInfo { firstName:string, lastName:string,}const getFullName = ({firstName,lastName}:NameInfo):string => { return `${firstName}-${lastName}`}get

2022-04-10 21:39:09 490

原创 TS语法一基础类型

一 ts的基础类型包括：布尔值数值字符串数组元祖枚举值anyvoidnull和undefinedneverobject类型断言let bool:boolean=truelet num:number=333//同时支持二进制，八进制，十进制，十六进制的表示num = 0b1111011 // 二进制num = 0o173 // 八进制num = 0x7b // 十六进制let str:string = 'aaa'str = `数值是：${num}

2022-04-10 12:02:40 1321

原创 react中使用styled-components制作动画

一简单介绍1. 一个简单的效果页面数字从0开始每隔一段时间+1，到10后数字有一个放大缩小的动画，如下：2.如果不使用styled-components，我们可以这么做：import React, { useEffect, useRef, useState } from 'react';import styles from './index.module.scss'const Test2 = () => { const [count, setCount] = useState(0

2022-02-12 20:53:59 1058

转载 react中的css

css一直是react的痛点，也是被很多开发者诟病的一个点。在组件化中选择合适的CSS解决方案应该符合以下条件：可以编写局部css：css具备自己的具备作用域，不会随意污染其他组件内的原生；可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；支持所有的css特性：伪类、动画、媒体查询等；编写起来简洁方便、最好符合一贯的css风格特点；等等…在这一点上，Vue做的要远远好于React：Vue通过在.vue文件中编写 Vue在CSS上虽然不能称之为完美，但

2022-02-10 15:58:44 545

原创 mac m1安装和使用nvm的问题

第一个问题最近换了mac M1芯片的笔记本后，使用nvm安装node时报错。过程：执行nvm install 10.10.9后，报错信息为clang: error: no such file or directory: 'CXX=c++'然后就发现github上关于这个问题的issue，地址：M1芯片的mac系统使用nvm安装报错问题处理根据上面的解决方案，只需要执行arch -x86_64 zsh后再安装即可。但是执行了arch -x86_64 zsh之后报错：complete:13: co

2022-02-09 22:29:25 2148

原创 react hooks踩坑合集

react hooks

2022-01-28 14:27:36 1250

原创 react Render机制

react Render机制

2022-01-28 14:10:39 1190

原创 ESLint配置

ESLintESLint是一个用来识别ECMAScript并且按照规则给出报告的代码检测工具，使用它可以避免低级错误，统一代码的风格，从而有效控制代码的质量。一生成关于ESLint的配置文件官方一共提供了三种配置文件：JavaScript (eslintrc.js)YAML (eslintrc.yaml)JSON (eslintrc.json)根据ESLint的源码，可以看到配置文件的优先级由高到低依次为：const configFilenames = [ ".eslintrc.j

2021-08-22 23:28:26 1704 1

原创 Vue中给对象添加新属性界面不刷新的问题

Vue中给对象添加新属性界面不刷新的问题一、直接添加属性的问题我们从一个例子开始定义一个p标签，通过v-for指令进行遍历，然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也新增一行<p v-for="(value,key) in item" :key="key"> {{ value }}</p><button @click="addProperty">动态添加新属性</button>实例化一个vue实例，

2021-08-22 15:33:17 1425

原创 VUE双向绑定原理

VUE双向绑定原理一双向数据绑定目前几种主流的mvc(mvvm)框架都实现了单向数据绑定，双向数据绑定无非就是在单向绑定的基础上给可输入元素(input, textarea等)添加了change(input)事件，来动态修改model和view。实现数据绑定的做法大致有以下几种：1.发布者-订阅者模式(backbone.js)一般通过sub,pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是vm.set("property",value)，但是现在我们更希望通过vm.property=v

2021-08-22 15:32:33 245

LittleMoon_lyy的博客

原创 Promise

原创 mobx用法