- 博客(17)
- 收藏
- 关注
RSS订阅
原创 vue3.x 核心语法 ， vue3.x + vueRouter+vuex
vue3.x 核心语法 ， vue3.x + vueRouter+vuex创建vue3.0项目yarn global add @vue/cli 安装脚手架版本必须大于4.5.0升级脚手架yarn global upgrade @vue/cli项目2.x版本升级3.x版本Vue add vue-next使用vite创建新的3.x项目1- npm init vite-app 项目名称2- 进入项目文件，进行依赖安装 yarn3- 启动项目yarn dev注意：只挂载的实例，其他都没有 、
2021-06-17 22:42:51
469
4
原创 简说_mobx
mobx— 5.x初始化mobx --5.15.7mobx-react — 5.4.4create-react-app mobx-study安装改变 create-react-app 中 webpack 配置插件yarn add -D react-app-rewired customize-cra @babel/plugin-proposal-decorators在项目根目录下创建 config-overrides.js 并写入以下内容const { override, addD
2021-09-05 23:25:02
116
原创 丐版的Promise
简易版的Promise const PENDING = 'PENDING' const REJECT = 'REJECT' const FULFIllED = 'FULFIllED' class Promise { constructor(executor) { this.state = PENDING this.value = null this.reason = null const resolv
2021-09-02 23:47:04
95
原创 TS基础（2）
html中使用ts文件每次都要转成js文件html 只认识js文件后缀，所以要将ts文件转成js文件步骤一：运行终端中运行 ： tsc xxx.ts (会生成一个xxx.js的文件) （每次修改都需要这么做）步骤二：在html文件中引入js文件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="v
2021-07-08 21:09:25
180
1
原创 TS基础（1）
TypeScript使用步骤npm i -g typescript---->给电脑安装的tsc xxx.ts ---->将ts文件转变为 xxx.js ----> 运行 node xxx.js优化1- npm i – g ts-node2- ts-node xxx.ts 在node环境下直接执行ts文件 （直接运行ts文件，不需要再转化为js文件了）运行tsc --watch xxx.ts 监听文件变化，自动转化为js文件声明变量// de
2021-07-04 21:22:58
261
原创 react - 性能优化
setState更新数据setState() 是异步更新数据的注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState()1. 当你调用 setState 的时候，React.js 并不会马上修改 state （为什么）2. 而是把这个对象放到一个更新队列里面3. 稍后才会从队列当中把新的状态提取出来合并到 state 当中，然后再触发组件更新。可以多次调用 setState() ，只会触发一次重新渲染this.state = { count: 1 }
2021-07-04 09:10:14
117
原创 react-组件通讯
组件通讯组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。props组件是封闭的，要接收外部数据应该通过props来实现props的作用：接收传递给组件的数据传递数据：给组件标签添加属性接收数据：函数组件通过参数props接收数据，类组件通过this.props接收
2021-07-02 23:20:07
92
3
原创 redux-saga
redux-sagayarn add redux-sagaimport { takeEvery, takeLatest, throttle, put, take, call, all} from 'redux-saga/effects' // 1-引包//takeEvery(监听参数，回调)----->短时间内触发多次接口，执行多次接口//takeLatest(监听参数，回调)---->短时间内触发多次接口，只会执行最后一次，中间的会被后面的覆盖//t
2021-07-01 23:00:23
127
原创 react 基础 - JSX语法
JSX的基本使用JSX简介JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码优势：声明式语法更加直观，与HTML结构相同，降低学习成本，提高开发效率。JSX是react的核心内容使用步骤- 导入react和reactDOM包- 使用jsx语法创建react元素- 把react元素渲染到页面中导入react和reactDOM// 导入react和react-domimport React from 'react'impor
2021-06-30 21:11:44
171
原创 数组去重的方法
reduce使用reduce配合数组的查找的几个方法实现const arr = [ { id: 1, num: 2, count: 3, name: 'zs' }, { id: 2, num: 3, count: 4, name: 'ls1' }, { id: 2, num: 3, count: 4, name: 'ls2' }, { id: 3, num: 4, count: 5, name: 'lss' },]//方法一// const newArr = arr.reduc
2021-06-26 10:48:49
48
原创 Hooks-useCallback
useCallback1. 说明useCallback 可以让你在函数组件中 缓存计算函数2. 语法2.1 语法格式const fnA = useCallback(fnB, [a])2.2 语法说明useCallback 会将我们传递给它的函数fnB返回，并且将这个结果fnA 缓存；当依赖a变更时，会返回新的函数。把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传
2021-06-24 21:08:44
216
1
原创 Hooks-useMemo
useMemo1. 说明useMemo 可以让你在函数组件中 缓存计算结果2. 语法###2.1 语法格式const memoizedValue = useMemo(() => fn(a,b), deps[a,b])2.2 语法说明它接收两个参数，第一个参数为回调函数 (计算过程fn，必须返回一个结果)，第二个参数是依赖项(数组)，当依赖项中某一个发生变化，结果将会重新计算。注意 : 因为是缓存计算结果,所以参数1回调函数里面一定要有return返回值2. 使用
2021-06-23 19:48:14
156
2
原创 Hooks-useContext
useContext1. 说明useContext，能够让我们在函数组件中使用context的能力, 替换之前的 context.Consumer2. 语法2.1 语法格式const value = useContext(MyContext);2.2 语法说明参数 : 一个 context对象返回值 : 返回 Provider 提供的 value 值2.3 使用说明回忆 :之前在类组件件中 , 使用 context实现从上到下跨多层组件传递数据1. 通过 cr
2021-06-22 20:31:28
240
原创 Hooks-useReducer
useReducer1. 说明useState 的替代方案。它接收一个( 形如 (oldState, action) => newState 的) reducer，并返回当前的 state 以及与其配套的 dispatch 方法。2. 语法###2.1 语法格式const [state, dispatch] = useReducer(reducer, initial);2.2 语法说明参数 : 1-reducer 2-状态初始值返回值 : 当前的 state 以及
2021-06-21 20:17:21
69
原创 Hooks-useRef
useRef1. 说明useRef 返回一个可变的 ref 对象，返回的 ref 对象在组件的整个生命周期内保持不变。用途 :绑定DOM节点，或者React元素保持可变变量2. 语法2.1 语法格式// 创建ref对象const myRef = useRef()2.2 语法说明import { useRef } from 'react' // 引入// 创建ref对象const myRef = useRef()// 获取myRef.current3. 使用
2021-06-20 11:39:58
130
原创 Hooks-useEffect
useEffect1. 说明Effect Hook 可以让你在函数组件中执行副作用操作副作用 : 数据获取、设置/销毁定时器以及手动更改 React 组件中的 DOM 都属于副作用在函数组件中，每当DOM完成一次渲染，都会有对应的副作用执行官网提示 :如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
2021-06-19 19:58:39
126
原创 React-hook语法
React-HooksHooks 是什么 ?hookHooks 是 React 16.8 新增的特性，它可以让你在不编写 class(类组件) 的情况下使用 state 以及其他的 React 特性React 一直都提倡使用函数组件的，但是函数组件没有实例不能操作state，也没有生命周期函数，只有类组件才有.如果有一天你在编写函数组件中, 突然意识到需要向其添加一些 state， 怎么办呢? 以前的做法是必须将其它转化为 类组件, 现在呢? Hooks出现之后, 你可以在现有的函数组件中配合
2021-05-21 00:02:38
198
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人