前端矿场常年招矿工啦啦啦 - muyuxingguang@qq.com

摘要： 函数式编程风格中有一个“纯函数”的概念，纯函数是一种无副作用的函数，除此之外纯函数还有一个显著的特点：对于同样的输入参数，总是返回同样的结果。在平时的开发过程中，我们也应该尽量把无副作用的“纯计算”提取出来实现成“纯函数”，尤其是涉及到大量重复计算的过程，使用纯函数+函数缓存的方式能够大幅提高程序的执行效率。本文的主题即是函数缓存实现的及应用，必须强调的是Memoization起作用的对象只能是纯... 阅读全文

摘要： 原文链接：React: hybrid controlled components in action受控组件非受控组件混用受控组件和非受控组件原则一原则二原则三原则四实施方案总结FBI WARNING: 对于提倡无状态设计的React来说这可能是一种反模式。众所周知，有很多web组件可以通过用户交互改变它的状态，如，，或者我们常用的一些在线富文本编辑器。这些组件在日常开发中不是很起眼 - 我们可以... 阅读全文

摘要： 最新消息：react官方已支持懒加载https://reactjs.org/docs/code-splitting.html#reactlazy文章webpack分片chunk加载原理中深入探究了异步chunk的加载原理，根据这个特性，在大型单页应用中，很容易实现大到子业务，中到子路由，小到子模块或者子组件的按需加载。react-loadable即封装了组件按需加载的流程并对外提供了一系列配置选项... 阅读全文

摘要： 每隔半年不看官方文档，你就会不认识React了😁React组件生命周期受控组件与非受控组件多个输入的解决方法Props.children可以传递任何数据包括函数布尔值、Null 和 Undefined 被忽略使用 PropTypes 进行类型检查(直接参考官方文档)react-redux中mapDispatchToProps方法无法访问Store中state，怎么办？？？React组件生命周期1... 阅读全文

摘要： 函数式编程中有一种模式是通过组合多个函数的功能来实现一个组合函数。一般支持函数式编程的工具库都实现了这种模式，这种模式一般被称作compose与pipe。以函数式著称的Ramda工具库为例。const R = require('ramda');function inc (num) { return ++num;}const fun1 = R.compose(Math.abs, inc, Math... 阅读全文

摘要： 首先，使用create-react-app快速创建一个demonpx create-react-app react-demo # npx命令需要npm5.2+ cd react-demonpm start通过http://localhost:3000/端口可以访问页面，接下来修改主应用组件App.jsimport React, { Component } from 'react';import '... 阅读全文

摘要： 最近开始做自己的第一个开源项目:一个基于思维导图的测试用例管理系统MinderCase,在做了一周的技术调研后，决定采用kityminder-editor作为思维导图编辑器，为了支持实时存储，当思维导图内容变化时使用JSON-Patch计算出内容变化产生的diffPatches,然后将diffPatches传给后台映射为对应的MongoDB操作符，执行更新操作JSON-Patch是用来描述JSON... 阅读全文

摘要： 1.概念篇MongoDB和MySQL分别作为非关系型数据库和关系型数据库的代表，通过它们之间的对比可以很快的建立起对MongoDB的认知。MongoDBMySQL数据库（Database）数据库（Database）集合（Collection）表（Table）文档（Document）记录（record）对于关系型数据库，一般来说，我们可以简单的理解为：一个数据库管理应用，可以创建多个数据库（data... 阅读全文

摘要： 1.zIndex在Android上使用zIndex来控制组件的层级，会遇到元素不显示的问题。解决方案：尽量改变组件的顺序，而不用zIndex尽量不要使用zIndex来控制组件的层级，默认情况下，使用position: 'absolute'后，后面的元素会默认覆盖在前面的元素之上。所以删除zIndex，改变一下组件的顺序就OK啦。issues: https://github.com/facebook... 阅读全文

摘要： 1.窗口关系及框架2.浏览器窗口位置3.窗口大小4.视口大小5.元素（组件）大小和偏移量6.客户区大小7.元素滚动区域大小8. getBoundingClientRect()9. 鼠标点击事件的位置1.窗口关系及框架 Frameset Example 每个框架都拥有自己的window对象，并且保存在frames集合中可以通过数值索引(从0... 阅读全文

摘要： 数组的元素可能是数组，这样一层层嵌套，可能得到一个嵌套很深的数组，数组降维要做的事就是把嵌套很深的数组展开，一般最后得到一个一维数组，其中的元素都是非数组元素，比如数组[1, [2, 3, [4, 5], 6], 7, 8]降维展开后是[1, 2, 3, 4, 5, 6, 7, 8].1.普通方法2.数组concat方法3.数组join和split方法的结合（有缺陷）4.最佳实践方法1.普通方法f... 阅读全文

摘要： CSS中大部分属性值都有对应的量词单位，常见的如描述盒模型尺寸的 width, height, margin, padding, border，又比如CSS3中的transform属性的一些值。下面的导图中基本上包括了所有的单位，下面将详细介绍它们的定义及使用方式。一、长度单位1、相对字体长度单位单位描述em相对于当前元素的字体大小（注意当前元素字体大小可能是继承父元素的）rem相对于根元素字体... 阅读全文

摘要： 前端开发往往需要在本地调试环境和线上环境之间灵活切换，以将要调试的一个页面为例，页面引用了如下的静态资源，要想在本地开发调试下面引入的js代码，最直接的方法是在把引入的资源路径改成本地调试路径，并起一个本地服务器访问页面，使用这种方法最大的缺点就是上线前需要恢复原来的引入路径，再或者我们没有权限修改页面代码，上述方法也无法使用。因此代理的方式才是首选。Mac上常用两种代理工具:Nginx和Char... 阅读全文

摘要： iPhoneX的正面几乎都是屏幕，除了一块齐刘海（sensor housing）来放置前置摄像头和一些传感器。为了让全屏的网页在iPhoneX上有比较好的浏览效果，必须保证布局的内容不被iPhneX的四角的圆角屏幕以及刘海遮挡，除此之外，还要尽量避免让有交互的区域固定在嘴巴上（home indicator）。如下图所示在iPhoneX全屏模式下打开v2ex社区，其导航头被状态栏遮住，体验不是很好... 阅读全文

摘要： 在RN的页面布局和操作中，有时需要获取元素的大小和位置信息，本文从网上抄袭了几个常用方法，以备不时之需。首先是获取设备屏幕的宽高import {Dimensions} from 'react-native';var {height, width} = Dimensions.get('window');下面介绍获取普通元素的大小和位置信息的方法方法一：onLayout 事件属性_onLayout(e... 阅读全文