自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

冲锋

学秃的心

  • 博客(109)
  • 收藏
  • 关注

原创 使用 useMemo,useCallback,Reat.memo() 处理不必要的子组件渲染,以及它的实现原理

场景1- 演示一个子组件更新父组件中一个输入框, 输入值,父组件更新, 同时引入子组件,但子组件也会跟着更新import React, { useState } from "react";import ReactDOM from "react-dom";// 子组件function Bpp() { console.log("%c Bpp render", "color:green"); return ( <> <div&g

2021-06-24 18:25:08 35

原创 react-hooks 的 useState 原理以及出现不更新视图的场景和原因?

1. useState 使用demo// App 组件function App() { let [a, setA] = React.useState(0); // 改变a的值 const changeA = () => { setA(a + 1); console.log("render"); }; return ( <> <div>{a}</div&gt

2021-06-24 16:18:16 222

原创 使用get_connect对接多个接口,渲染页面

getConnect 使用 仓库代码

2021-04-28 16:49:19 111

原创 Getx - 使用getConnect 对接后台数据

## 1. GetConnectGetConnect是可以使用HTTP或WebSocks使前台与后台的通信,同时能保证数据出现错误时,不会出现App闪退演示接口地址代码仓库1.1 如何使用第一步:创建模型modeljson转dart网址:class MakeupModel { // 略了}第二步:创建 provider 集成自 GetConnectconst String APIADDRESS = 'https://makeup-api.herokuapp.com/ap

2021-03-26 15:30:55 620

原创 Getx - 如何使用依赖管理和Bindings

1.Getx 依赖管理这东西你可以理解为,把controller 和 路由进行分离, 然后由它负责沟通控制器和UI, 同时使用依赖的方式管理的控制器只需在某个页面中实例化一次,其它页面就可以直接使用,而不需要再实例化一次仓库文档参考1.1 如何使用依赖管理代码在 binding/demo01 下第一步:创建控制器// 控制器class GoodsController extends GetxController { final _goods = ["橘子", "apple", "pear"

2021-03-25 16:59:18 812

原创 Getx - 如何使用路由管理页面

路由使用英文文档参考,既然要get的使用,就需要首先再入口处使用 GetMaterialApp示例代码仓库1. GetMaterialAppGetMaterialApp常用配置参数说明配置同 MaterialApp 差不多可选参数名描述类型title是应用程序的描述StringdefaultTranstion路由的过渡效果Transition枚举initialRoute默认选中的路由页面字符串,或者页面类名unknownRoute路由找不到显

2021-03-25 12:04:41 1227 6

原创 Getx - 如何使用状态管理数据

pubspec.yaml 文件:dependencies: get:1. 状态管理状态管理其实就是管理应用的数据,在 get中也称为控制器,所有的数据都必须放在 继承自 GetController 的类中,才可以在视图中使用第一步:创建 一个Controllerimport 'package:get/get.dart';/// 定义数据控制器class HomeController extends GetxController {}第二步:在控制器中声明变量import 'pa

2021-03-24 17:22:18 926

原创 vite-v3-vant3体验下h5,配置接口环境和打包指令

vite脚手架配合vue3,vant仓库地址

2021-02-20 11:09:30 324

原创 简单实现react 列表自动向上滚动,进入暂停,离开继续

import React, { useEffect, useRef, useState } from 'react';import './1.css';function App() { const [list] = useState([1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13]); const [isScrolle, setIsScrolle] = useState(true); // 滚动速度,值越小,滚动越快 const sp

2020-12-30 17:32:32 578

原创 GetX- 简化flutter状态管理器

文档地址如何定义状态和响应式状态简化路由操作参考在语雀上整理的代码demo0. 参考文档示例,项目组织机构| - lib | - pages | - home | - home_view.dart | - home_controller.dart | - home_binding.dart1. 定义响应式数据虽然文档上给了3种方式参考文档,但我这边测试的第二种泛型的写法一直报红,有搞通的留言一个以下语法是最简单的了1.1 定

2020-12-21 15:28:27 4916 5

原创 flutter - 全局事件广播event_bus

这个东西用的挺多的, 比如换肤, 这个页面的用户改变了头像,返回其它页面时, 也要展示新换的头像,等等,使用EventBus,参考文档借助event_bus插件1. 点击换肤import 'dart:math';// 导包import 'package:event_bus/event_bus.dart';import 'package:flutter/material.dart';// 定义全局变量EventBus eventBus;Color themeColor;//.

2020-10-21 11:39:03 237

原创 flutter - GridView 网格布局,以及设置子元素的间距和大小

基础的 GridView 布局参数说明gridDelegate对子元素进行修饰,由于SliverGridDelegate 是一个抽象类, 找它的实现类有 【SliverGridDelegateWithFixedCrossAxisCount,SliverGridDelegateWithMaxCrossAxisExtent,】childAspectRatio子元素列表SliverGridDelegateWithFixedCrossAxisCount方法说明

2020-10-21 10:41:45 1366

原创 flutter - Form表单验证

表单验证class FormWidget extends StatefulWidget { @override _FormWidgetState createState() => _FormWidgetState();}class _FormWidgetState extends State<FormWidget> { GlobalKey<FormState> formGlobalKey = GlobalKey<FormState>();

2020-10-20 18:47:58 526

原创 flutter - 自定义TextFiled 输入框的样式,以及参数说明

系统默认的输入框样式命名参数使用说明obscureText让输入的文字模糊化, 也就是变成密码输入框, 填入布尔值contentPadding设置输入框中的文字内边距, 使用在装饰器中focusNode动态设置输入框的焦点 FocusNode 类型maxLength输入框的输入的长度maxLengthEnforced当输入的文字超过限制长度后,是否还能继续输入,如果是 false,则继续可以输入,但是边框线变红 ,为 true, 则不能再输入d

2020-10-20 15:44:40 701

原创 flutter - 给文字设置点击事件的几种方式

Text 部件 不能直接设置点击事件1. 如果单独给 一个文字设置 点击事件, 可以使用TextSpan 部件点击 word 文字添加事件class MyHomePage extends StatelessWidget { var i = 1; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Column( c

2020-10-20 13:48:12 2469 3

原创 flutter - 使用 SingleChildScrollView() 解决键盘遮挡输入框的问题

写好了,感觉可好点击输入框,输入内容时发现如下,键盘遮挡了输入框使用 SingleChildScrollView 解决遮挡问题, 就是让它滚动起来直接使用 SingleChildScrollView 包裹子元素class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colo

2020-10-20 12:22:29 673

原创 flutter - 使用 SingleChildScrollView 进行滚动布局,实现和 Warp 和LiestView 组合的效果

该部件 不能嵌套其它的滚动部件 - ListView,GridView 等class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { // 获取设备的宽度 var width = MediaQuery.of(context).size.width; return Scaffold( appBar: AppBar( title:

2020-10-20 12:06:30 380

原创 flutter - 使用 Wrap 实现自定义元素大小的网格布局,代替GridView 部件

使用 Wrap 代替 GridView 实现网格布局, 并且可以实现自定义元素的大小class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { // 获取设备的宽度 var width = MediaQuery.of(context).size.width; return Scaffold( appBar: AppBar( t

2020-10-20 12:03:00 238

原创 flutter - 滚动组件 ListView 和 GridView 一块使用

1. ListView 和 GridView 组合一块滚动问题: GridView 里的 元素 不能设置 大小, 只能通过 修改 crossAxisCount 的个数来自动控制class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("首页"), .

2020-10-20 12:01:49 90

原创 flutter - AppBar 参数设置布局效果

class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( // backgroundColor: Colors.red, // backgroundColor: Color(0xff45ff41), leading: Container( .

2020-10-20 11:28:30 663 1

原创 适用于小程序和web端的 canvas 文字换行及居中问题

// 获取真实字节长度 function getTrueLength(str) { let trueLength = 0; for (let x = 0; x < str.length; x++) { // 如果字节码 大于 128, 则 每次 +两个长度, 否则,每次加一个长度 trueLength += str.charCodeAt(x) > 128 ? 2 : 1; } ...

2020-07-31 19:26:29 271 1

原创 在vscode 上搭建 React 源代码调试环境(16.8v)

克隆此仓库git clone https://gitee.com/frontend-qin/react-source-code.git配置 vscode安装插件 Debugger for Chrome 后url:必须是你的 react 项目启动的开发环境地址{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "La

2020-06-08 10:14:26 1229

原创 react-router5 - 实现 Switch 和 Redirect 组件

用法 <HashRouter> <Link to='/'>home</Link> <Link to='/about'>about</Link> <Link to='/mine'>mine</Link> <div> <Switch> <Route component={Home} path='/' exact></Route

2020-06-04 17:46:53 672

原创 react-router4 - 实现Link组件进行点击跳转

原生Link组件用法 <Router> <Link to='/'>Home</Link> <Link to='/about'>About</Link> <Link to='/mine'>Mine</Link> <div> <Route component={Home} path='/' exact></Route> <Route comp

2020-06-03 17:49:11 758

原创 react-router3 - 利用 path-to-regexp 实现路径及参数的匹配

上节代码也看到了, 在判断的时候,是直接拿 props上传的 path 和 监听到的 pathname作的全等比较那这样的话,如果手动传入 /about/1, /about/page/2 这样的路径就匹配不到了, 肯定会返回 null 的,path-to-regexp仓库path-to-regexp部分用法// pathToRegexp(str, [], {})传3个参数, 要匹配的字符串目标,一个数组,最后是一个对象const { pathToRegexp } = require("path

2020-06-03 17:09:05 614

原创 react-router2 - 实现 HashRouter 和 Route组件理解实现原理

原生库的使用官方路由使用效果演示实现思路1. 先导出俩组件react-router-dom / index.jsimport Route from './Route';import HashRouter from './HashRouter';export { HashRouter, Route };2. 创建上下文对象import React from 'react';export default React.createContext();3. HashRouter组件i

2020-06-03 15:57:02 203

原创 reactRouter1 - 路由实现原理(hash, history)

实现原理1. 利用hash和history这两种模式实现对路由的切换2. 根据匹配到的路径,渲染对应的组件hash模式原理通过监听 hashchange 事件, 在回调里拿到 window.location.hash 的值hash 模式演示 <body> <a href="#/a">去a</a> <a href="#/b">去b</a> <div id="box"></div>

2020-06-03 13:47:50 952

原创 redux8 - redux 中间件 和 applyMiddleware 及其实现原理

参考redux仓库, redux-logger库新建个项目吧 - 引入 redux, react-redux中间件执行流程图演示代码仓库就这个演示了,点击 + 1 ,现在呢, 我想打印个日志,就是每次点击按钮,都能打印出老的状态和新的状态理逻辑,既然是在每次点击事件之后打印,那么,如果想拿到老的状态,就需要在派发前,想拿到新的状态,就是在派发后先这样写:let store = createStore(reducers);let dispatch = store.dispatc

2020-06-02 18:11:46 117

原创 redux7 - 手写实现 react - redux 基本功能 Provider 和 connect

参考reac-redux 库 源码以下实现的功能代码演示地址使用react-redux库官方 react-redux 库,使用index.jsimport React from 'react';import ReactDOM from 'react-dom';import { Provider } from 'react-redux';import store from './reducers/store';ReactDOM.render( <Provider store={st

2020-06-02 15:23:52 201

原创 redux6 - 实现 react-redux 前置技能react 高阶组件的使用

react-redux使用演示代码太多,就放codesandbox.io 了,可以看到,在组件中连接仓库和组件的一个重要方法, connect() ,该方法的返回值就是个高阶组件什么是高阶组件高阶组件: 同高阶函数,参数可以是组件, 或者返回一个组件,使用场景: 一般用于公共部分的抽离,对一个组件进行包装,让它产生一些新的功能,或者返回一个新的UI组件演示效果:class App extends Component { render() { return ( &.

2020-06-02 09:27:39 114

原创 redux5 - 实现 react-redux 前置技能之 react库的context的使用

参考redux仓库的src目录,初步手写实现了以下3个方法createStore() : 创建数据仓库,导出了3个方法(dispacth,subscribe,getState)combineReducers():合并多个小的reducer,传入一个对象bindActionCreators() : 简化代码 api,只需传入一次对象的语法, 就不用再导出写 dispatch 了还剩下几个,先不说了,然而,就这么几行代码,已经基本让项目配合这些代码跑起来一个数据仓库了,然而,它还是有很多的冗余代

2020-06-01 17:29:08 126

原创 redux4 - 处理有多个 reducer时如何合并,以及实现 combineReducers

参考源码redux仓库redux原则之一就是单一性,即状态,仓库,reducer都是唯一的,但在组件式的技术开发中,为了好管理状态,通常一个组件,或嵌套组件对应一个 reducer, 最后再合并成一个大的reducer代码太多,请参考演示代码代码演示两个组件的都有各自的组件状态,怎么进行合并可能有不明白,左边这个index.js 这个文件的 count1Reducer和count2Reducer的第一个参数为啥是那样写的解释一下:看右边的 count1Reducer() 函数,第一个参数

2020-06-01 16:04:50 381

原创 redux3 - 通过提交函数派发action及 手写 实现 bindActionCreators 函数

dispatch 即可以是提交一个对象的语法, 还可以提交一个函数的写法直接通过提交函数派发动作import React, { Component } from 'react';import ReactDOM from 'react-dom';import { createStore, bindActionCreators } from './redux';let initData = { num: 10,};// type 类型const ADD = 'ADD';cons.

2020-06-01 12:50:58 115

原创 redux2 - 原生html页面和react中使用自己手写的 - redux

原生html页面中redux.js// 创建仓库function createStore(reducer) { let currData; let listeners = []; const getState = () => currData; const dispatch = (action) => { currData = reducer(currData, action); listeners.forEach((fn) => fn()); }

2020-06-01 10:38:23 104

原创 redux1 - 20行代码实现redux

准备工作首先建一个React的脚手架项目, 删除src下的所有东西,保留一个空的 index.js当前目录index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <t

2020-05-27 16:45:39 106

原创 Vue源码系列-6- computed计算属性的实现原理

计算属性默认是有缓存的,内部实现参考源码src/core/instance/state.js调用initComputed() 方法,创建 watcher/** * 初始化 computed * @param {*} vm * @param {*} computed */function initComputed (vm: Component, computed: Object...

2020-03-30 10:07:16 184

原创 Vue源码系列-5- Vue.set() 使用场景以及实现原理?

官方api解释了它的使用场景向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)所以我们要知道,只有先定义在data 里 数据才具有响应式,如果自己后添加的属性是不具备响应式的比如下边这个 属性a 具有响应式,但是b ...

2020-03-29 00:29:18 271

原创 Vue源码系列-4- Vue为什么采用异步渲染以及原理

为什么采用异步渲染?因为如果不采用异步更新,那么每次更新数据都会对当前组件进行重新渲染, 这样就会可能进行大量的dom重流或者重绘,所以为了性能考虑,减少浏览器在Vue每次更新数据后会出现的Dom开销,Vue 会在本轮数据更新后,再去异步更新视图!src/core/observer/index.js在 defineReactive() 这个方法中定义setter 的时候 有个 dep....

2020-03-28 23:33:51 752

原创 Vue源码之旅-3- nextTick()实现原理

参考文档的 异步更新队列, 从官方文档的说明, 我们可以看出, Vue 的更新是组件级的,这么做的目的就是为了提升性能, 它内部怎么做的也比较好理解, 其实就是利用了 微任务 和 宏任务src/core/util/env.jsexport const nextTick = (function () { const callbacks = [] let pending = false...

2020-03-28 21:59:44 454

原创 vue源码之旅-2 - 数据响应式原理的实现

在官方文档的深入响应式原理这一节可以看到,Vue是通过Object.defineProperty 来定义数据的响应式的, 接着从源码层面来喵一眼到底是怎么做的?src/core/instance/state.js我简单注视了一下源码/** * 1. 调用initData()方法, 初始化用户传入的 data * @param {*} vm */function initData ...

2020-03-28 20:55:37 151

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除