老愚公的博客

原创 vue 强制更新子组件

vue 强制更新子组件需要注意的问题

原创 Mac OS nvm 安装问题

每次都要手动执行‘source ~/.bash_profile’ 环境变量才生效

原创 setState 异步还是同步

this.setState 真的是异步吗？

原创 node(mac)升级或版本切换方法

node(mac)升级或版本切换方法首先安装node.js模块：sudo npm install -g n升级node.js到最新稳定版sudo n stable升级到最新版sudo n latestn后面也可以跟随版本号,升级到任意版本sudo n v12.18.1sudo n 12.18.1切换使用版本sudo n 12.18.1删除制定版本sudo n rm 12.18.1用制定的版本执行脚本n use 12.18.1 index.jssudo n可以查

原创 gatsby.js 架构静态网站技术要点

gatsby.js 架构静态网站技术要点静态资源加载通过 gatsby / gatsby-image / gatsby-plugin-sharp 实现图片静态资源的加载以及渲染，支持 fluid | fixed 两种 type。使用实例如下：import { graphql, useStaticQuery } from 'gatsby';import Img from 'gatsby-image';// 加载资源const imagesData = useStaticQuery(gra

原创 redux/react-redux流程图

原创 2019年工作总结

茅友公社APP基于react-native的开发探索使IOS和Android系统开发和共用同一套代码，尽量抹平两个系统的差异，以便更快速的开发迭代以及后续的维护。搭建起完整的react-native工程代码，包括页面的通用代码和样式、路由管理、异步接口请求数据的全局状态管理以及部分通用组件的抽象整理等。完成了茅友公社社区列表、详情以及发贴等相关功能的开发。…H5工程搭建以及开发在create...

原创 code-splitting(webpack v4 & react v16.8)

技术在更新，业务在增加，需求也在变化，weback v1 的版本已经不再适合现有的业务，决定对 webpack 做一次升级。webpack v1 -> webpack v3 的升级webpack v3 一下的版本 code-splitting 基于 CommonsChunkPlugin 和 require.ensure 而实现。弊端就是 css 分离以及 css 修改对 chu...

原创 react-native 之 DeviceEventEmitter (通知)

react-native 之 DeviceEventEmitter (通知)应用场景：rn 中由 A 页进入到 B 页之后，在 B 页上做相应操作之后，需要 A 页更新相应数据。伪代码实现如下：** B 页 ** import {DeviceEventEmitter} from 'react-native'; // 语法 DeviceEventEmitter.e...

原创 react-native screen 组成

// TODO: 引入三方依赖import React, { Component } from 'react';import { connect } from 'react-redux';import { SafeAreaView, View, FlatList, RefreshControl } from 'react-native';// TODO: 引入自定义组件import X...

原创 axios 拦截封装，全局统一处理异常

封装 axios 以更好的适应现有业务!!所有接口请求均应通过此方法来实现。!!统一处理：Android平台 cookie 不存在情况统一处理：错误提示和错误上报统一处理：双平台（Android | IOS）netHeaderimport { Platform } from 'react-native';import axios from 'axios';import lodash ...

原创 bind、call、apply

bind、call、apply三者都是用于改变函数体内this的指向，但是bind与apply和call的最大的区别是：bind不会立即调用，而是返回一个新函数，称为绑定函数，其内的this指向为创建它时传入bind的第一个参数，而传入bind的第二个及以后的参数作为原函数的参数来调用原函数。var obj = {};function test() { console.log(thi...

原创 关于弹性盒子

containerflex-box display: flex/inline-flex; flex-direction: [row] | row-reverse | column | column-reverse; flex-wrap: [nowrap] | wrap | wrap-reverse; flex-flow: flex-direction flex-wrap justi...

原创 关于 Ant Design 中 Input 组件的 defaultValue 属性的一个小问题

记录关于一次 Ant Design 使用时遇到的一个问题，defaultValue属性赋值，页面交互操作处理数据之后页面数据未更新（未按照预期显示）。 class Component extends React.Component{ constructor(props) { super(props); this....

原创 import和require的区别

import和require的区别node编程中最重要的思想就是模块化，import和require都是被模块化所使用。遵循规范require 是 AMD规范引入方式import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法调用时间require是运行时调用，所以require理论上可以运用在代码的任何地方，require可以理解为一个全局方...

原创 关于react、react-router、react-redux技术栈的总结

import React from 'react'; import ReactDOM from 'react-dom'; import {Router, Route, hashHistory} from 'react-router'; import {Provider} from 'react-redux';react class ComponentName e...

原创 css3 过渡和动画

过渡、动画(-webkit- || -moz- || -o-) 兼容ie10+ fun: linear ease ease-in ease-out ease-in-out cubic-bezier trigger method: :hoever :focus :checked * 过渡：transition transition: property duration fun delay ...

原创 BOM的location信息

// BOM的location信息location: { /** * window.location.origin方法兼容ie9 * * @return {String} */ origin: function () { ...

原创 移动端事件穿透：点击穿透和滑动穿透

前些日子面试的时候被问及移动端的滑动穿透问题，当时没有滑动穿透的概念(其实平时的工作从滑动穿透的问题已经默认解决掉了)，上网查了一下，所以有了以下的个人小结：移动端事件穿透：点击穿透||滑动穿透移动端，手指点击一个元素，会经过：touchstart --> touchmove --> touchend --> click点击穿透： click 事件机制：延迟300...

原创 webpack 3.0 配置说明

webpack我们使用webpack主要完成以下功能： 1. 编译js代码 2. 提取，分割js代码 3. 编译sass代码 4. 压缩js代码 5. 压缩css代码 6. 生成页面 7. 调试 8. 其他webpack配制webapck配制中最主要的是4个部分： * entry * output * loaders * pluginsEntry...

原创 BOM的location信息

BOM location url参数

原创 Gulp的安装以及配置使用说明

Gulp的使用基于node.js、npm平台或者工具，所以首先检测node.js以及npm，在二者的基础上全局安装gulp 我本地已安装，不再次重复安装，上面为执行安装指令安装成功后，执行 gulp –v指令，用以确定gulp安装成功 项目下执行 npm init 指令，初始化package.json文件 输入yes 然后回车执行，工程下自动生成 package.json 文件...

原创 浏览器检测

// 浏览器信息 browserType: { _ua: this.window.navigator.userAgent, /** * 是否 Chrome 浏览器 * * @return {boolean} */ isChrome: function () {...

原创 检测浏览器平台信息-PC/mobile/ios/android/ipad/ipod

// 平台信息 platForm: { _ua: this.window.navigator.userAgent, /** * 判断当前平台是否为andriod * * @return {boolean} */ isAndroid: function () { ...

原创 js字符串截取

关于字符串截取的方法slice();subString();substr()概要如下：1.关于参数 str.slice(startIndex[, endIndex]); str.substring(startIndex[, endIndex]); str.substr(startIndex[, length]);// length 缺省时，startIndex位置开始至st