自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 redux添加中间件

function compose(...funcs) { return arg => funcs.reduceRight((composed, f) => f(composed), arg); } // 参数:传入中间件数组 function applyMiddleware(......

2017-05-25 14:48:28 307 0

原创 koa:当创建一个服务时,做了什么

创建一个简单的应用// 1、实例化app var Koa = require('koa'); const app = new Koa(); // 2、声明中间件函数 async function responseTime(ctx, next) { const start =...

2017-04-25 11:09:01 660 0

翻译 react-bits:Using Pure Components

Pure Components默认在shouldComponentUpdate进行浅对比,避免props和state未改变时的重复渲染Recompose提供了高阶函数pure用于生成Pure Componentsbadexport default (props, context) => { ...

2017-04-20 11:49:23 238 0

翻译 react-bits:shouldComponentUpdate() check

使用shouldComponentUpdate避免昂贵的重复渲染 react组件的props和state改变时会触发重复渲染,每次改变重新渲染整个页面会对浏览器造成很大负担。render之前会触发shouldComponentUpdate,手动判断props和state是否改变,并返回true或...

2017-04-20 11:43:45 236 0

原创 微信小程序开发:一个音乐播放器

github源码地址 花了点时间撸了个微信小程序,分两个部分,音乐播放界面和音乐列表。 总结一下遇到的问题 UI分4层,第一层背景高斯模糊,第二层灰色半透明蒙层,第三层播放器,第四层列表 css设置背景图片路径不能是本地的,需要设置为网络图片,或者base64编码 图片旋转暂停通过移除或添...

2017-04-12 22:11:59 16172 7

原创 react-native报错Could not get BatchedBridge, make sure your bundle is packaged correctly

Could not get BatchedBridge, make sure your bundle is packaged correctly执行react-native bundle --platform android --dev false --entry-file index.andro...

2017-04-09 21:37:40 898 1

原创 react-native run-android报错A problem occurred configuring project ':app'. > SDK location not found

Building and installing the app on the device (cd android && gradlew.bat installDebug)...FAILURE: Build failed with an exception.* What went ...

2017-04-09 17:48:56 10361 0

原创 js判断对象构造函数

调用Object原生toString()方法function isArray(value) { return Object.prototype.toString.call(value) === "[object Array]" }function isFuction(v...

2017-04-06 15:33:24 1500 0

翻译 react-bits:Children types

// You might create a component designed to apply context and render its children.class SomeContextProvider extends React.Component { getChildConte...

2017-04-06 15:23:32 193 0

翻译 react-bits:Render Callback

组件children设为函数const Width = ({ children }) => children(500) // The component calls children as a function, with some number of arguments. // Here,...

2017-04-06 15:02:21 564 0

翻译 react-bits:Function As Children

使用函数作为子元素并不常见<div>{ () => { return "hello world!" }() }</div>可以用于渲染回调,ReactMotion中有使用这种技术。把渲染逻辑保存在自有组件中,而不是被委派。

2017-04-06 14:42:17 222 0

翻译 react-bits:Proxy Component

Buttons随处可见,所有Buttons都需要设置type=”button”<button type="button">我们可以写一个更高层级的组件把它包裹起来,并代理propsconst Button = props => <button type=...

2017-04-06 14:32:45 443 0

翻译 react-bits:数组作为子元素

react-bits 原文数组作为子元素很常见// We use map() to create an array of React Elements for every value in the array. (<ul> {["first", "s...

2017-04-06 13:10:40 209 0

翻译 react-bits:Children类型

react-bits 原文react渲染的children元素可以有很多类型,大多情况下是数组或字符串字符串Stringfunction render() { return ( <div> Hello World! </div> ) }...

2017-04-06 11:39:14 190 0

翻译 react-bits:条件渲染

react-bits 原文条件渲染时可以使用if/else,但当更复杂或需要判断的变量更多时,推荐分离组件替代//if function render() { return condition && <span>Rendered when `truthy`<...

2017-04-06 11:29:48 206 0

翻译 react-bits:解构参数

react-bits 原文解构赋值是ES2016特性,在处理无状态函数的props时很方便 下面两个例子是等价的:const Greeting = props => <div>Hi {props.name}!</div>;const Greeting = ({ n...

2017-04-06 11:18:29 345 0

翻译 react-bits:JSX扩展属性

react-bits 原文扩展属性是JSX的一个特性,是把所有对象属性传递给JSX属性的语法糖。…运算符已经被ES6的数组支持,ES2017对象也被建议支持。下面的两个例子是等价的:// props written as attributes let main = () => <ma...

2017-04-06 11:00:47 556 0

翻译 react-bits:组件切换

react-bits 原文从多个组件中选一个渲染 使用对象映射props值和组件import HomePage from './HomePage.jsx'; import AboutPage from './AboutPage.jsx'; import ...

2017-04-06 00:13:06 625 0

翻译 react-bits:从父组件获取子组件

react-bits 原文从父组件获取子组件 例如:操作父组件使子组件获取焦点子组件 一个输入框,带focus()函数可以自动获取焦点class Input extends Component { focus() { this.el.focus(); } render() ...

2017-04-06 00:08:56 808 0

翻译 react-bits:列表组件

react-bits 原文不建议将列表内单个元素抽象出组件,建议使用mapconst SearchSuggestions = (props) => { // renderSearchSuggestion() behaves as a pseudo SearchSuggestion co...

2017-04-05 23:58:10 208 0

翻译 react-bits:使用HOC共享跟踪逻辑

react-bits 原文使用高阶组件在不同的组件间共享跟踪逻辑 例如:给不同组件添加分析跟踪代码 减少重复代码 从表层组件移除跟踪逻辑代码,更有利于测试 import tracker from './tracker.js';// HOC const pageLoadTra...

2017-04-05 23:49:52 368 0

翻译 react-bits:使用组件进行文本格式化

react-bits 原文 我们倾向于创建一个单独的组件格式化文本,而不是调用render内的函数使用组件 render更容易理解,因为它只是组件组合在一起const Price = (props) => { // toLocaleString is not React speci...

2017-04-05 23:40:30 586 0

翻译 react-bits:无状态函数组件

react-bits 原文 无状态函数是一种很有用的定义高可复用组件的方法。 他们不拥有状态,只是函数。 使用函数的优点是视图和逻辑的分离,由于没有内部的状态处理和逻辑,视图和逻辑的分离更为彻底。 无状态函数组件因为没有状态和生命周期函数,性能得以提升,react团队在未来的版本将会避免...

2017-04-05 23:31:35 785 0

原创 js常用正则

创建正则对象// 构造函数创建 var patt=new RegExp(pattern,modifiers); // var patt=/pattern/modifiers;使用正则 正则方法var str="Hello world!"; var patt1=/Hello/...

2017-04-05 17:41:39 264 1

原创 html和native使用JSBridge交互

网页通过webview加载,webview作为native和js交互的中介 ios ios调用jswebview.stringByEvaluatingJavaScriptFromString:返回js脚本的执行结果// Swift webview.stringByEvaluatingJavaS...

2017-04-05 14:26:02 864 0

原创 redux的reducer纯函数处理state的2种方法

1、使用lodash的_.cloneDeep()函数 深复制,可以递归复制复杂的对象,Object.assign()和_.assign()只会复制对象的第一层属性,更深层次的属性是引用赋值的,指向同一对象const newState = cloneDeep(state) newState.nam...

2017-04-02 21:47:43 1952 0

原创 redux的合并多个reducer

//创建store需要传入reducer createStore(reducer, preloadedState, enhancer) //reducer是一个函数,传入当前state和action,返回新的state // (preState, action) => nextState当...

2017-04-02 21:18:21 3460 0

原创 redux源码

1、redux初始化最先做的是使用createStore创建store,store用于管理state createStore(reducer, preloadedState, enhancer) // 传入preloadedState对象作为redux的默认state,当使用combineRedu...

2017-04-02 20:21:21 701 0

原创 Missing letters

Find the missing letter in the passed letter range and return it.If all letters are present in the range, return undefined.判断字符串相邻字符是否连续,若连续返回undefin...

2017-04-01 11:23:15 436 1

原创 DNA Pairing

The DNA strand is missing the pairing element. Take each character, get its pair, and return the results as a 2d array.Base pairs are a pair of AT an...

2017-04-01 11:07:41 285 0

原创 Pig Latin

Translate the provided string to pig latin.Pig Latin takes the first consonant (or consonant cluster) of an English word, moves it to the end of the ...

2017-04-01 11:01:42 315 0

原创 Search and Replace

Perform a search and replace on the sentence using the arguments provided and return the new sentence.First argument is the sentence to perform the s...

2017-04-01 10:38:06 268 0

原创 Wherefore art thou

返回collection内对象包含source对象内所有属性,并且值相等 function whatIsInAName(collection, source) { // What's in a name? var arr = []; // Only change code b...

2017-04-01 10:22:27 244 0

原创 Roman Numeral Converter

Roman Numeral Converter 把数字转换成罗马数字转换规则 function convertToRoman(num) { var a=[["","I","II","III","IV&q...

2017-04-01 01:01:31 230 0

原创 Diff Two Arrays

Diff Two Arrays 求两个数组不同的值 function diffArray(arr1, arr2) { var newArr = []; // Same, same; but different. var arr1Diff = arr1.filter((cur) =&g...

2017-04-01 00:37:51 598 0

原创 Sum All Numbers in a Range

Sum All Numbers in a Range 求两个数字间所有数字之和function sumAll(arr) { var min = Math.min(arr[0], arr[1]); var max = Math.max(arr[0], arr[1]); var arrO...

2017-04-01 00:33:39 416 0

原创 除了border,还可以使用box-shadow生成边框

<html> <head> <style> .border{ background: blue; width: 200px; ...

2017-03-30 19:14:22 1217 0

原创 background-clip设置半透明border

<html> <head> <style> .bg{ background: red; width: 200px; h...

2017-03-30 18:51:09 968 0

原创 d3.js小记

d3:data-driven-documents,数据驱动文档 d3以数据驱动的方式操作文档1、选择器 d3使用//document.querySelectorAll(selector) //选择器 body.select("p") .style("col...

2017-03-30 14:13:21 195 0

原创 206. Reverse Linked List

Reverse a singly linked list. 反转单向链表解题思路:迭代或递归迭代/** * Definition for singly-linked list. * function ListNode(val) { * this.val = val; * ...

2017-03-29 22:56:05 117 0

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