小程序入门总结篇

一、小程序代码组成

阅读全文

React之组件通信方式

组件通信

阅读全文

React之context

简介

  • React 组件之间的通信是基于 props 的单向数据流,即父组件通过 props 向子组件传值,亦或是子组件执行传入的函数来更新父组件的state,这都满足了我们大部分的使用场景

阅读全文

实现一个迷你版的redux

迷你版redux实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
export const createStore = (reducer,enhancer)=>{
if(enhancer) {
return enhancer(createStore)(reducer)
}
let currentState = {}
let currentListeners = []

const getState = ()=>currentState
const subscribe = (listener)=>{
currentListeners.push(listener)
}
const dispatch = action=>{
currentState = reducer(currentState, action)
currentListeners.forEach(v=>v())
return action
}
dispatch({type:'@@INIT'})
return {getState,subscribe,dispatch}
}

//中间件实现
export applyMiddleWare(...middlewares){
return createStore=>...args=>{
const store = createStore(...args)
let dispatch = store.dispatch

const midApi = {
getState:store.getState,
dispatch:...args=>dispatch(...args)
}
const middlewaresChain = middlewares.map(middleware=>middleware(midApi))
dispatch = compose(...middlewaresChain)(store.dispatch)
return {
...store,
dispatch
}
}

// fn1(fn2(fn3())) 把函数嵌套依次调用
export function compose(...funcs){
if(funcs.length===0){
return arg=>arg
}
if(funs.length===1){
return funs[0]
}
return funcs.reduce((ret,item)=>(...args)=>ret(item(...args)))
}


//bindActionCreator实现

function bindActionCreator(creator,dispatch){
return ...args=>dispatch(creator(...args))
}
function bindActionCreators(creators,didpatch){
//let bound = {}
//Object.keys(creators).forEach(v=>{
// let creator = creator[v]
// bound[v] = bindActionCreator(creator,dispatch)
//})
//return bound

return Object.keys(creators).reduce((ret,item)=>{
ret[item] = bindActionCreator(creators[item],dispatch)
return ret
},{})
}

阅读全文

浅析React高阶组件HOC

高阶组件是什么

  • 高阶组件其实就是一个函数,传入一个组件返回一个新的组件。它接受一个组件作为参数,返回一个新的组件。这个新的组件会使用你传给它的组件作为子组件

阅读全文

组(Array)操作之splice() --删除、插入、替换

splice()方法,号称最强大的数组方法!!

splice()的主要用途是向数组的中部插入项,但是用这种方法的方式则有如下3中。

1、删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。例如,splice(0, 2)会删除数组中的前两项。

阅读全文

vue子组件改变父组件数据的方法 emit方法

场景:自己封装的插件需要点击子组件的按钮去操作父组件的数据

方法
子组件代码

1
2
3
4
5
6
7
8
9
10
<template>
<child @click="close"></child>
</template>
<script>
methods: {
close() {
this.$emit('close',true); //触发close方法,true为向父组件传递的数据
}
}
</script>

阅读全文

react-router v4中,不提供browserHistory等的导出~~怎么解决

问题
当我们使用react-router v3的时候,我们想跳转路由,我们一般这样处理
我们从react-router导出browserHistory。
我们使用browserHistory.push()等等方法操作路由跳转。
问题来了,在react-router v4中,不提供browserHistory等的导出~~
那怎么办?我如何控制路由跳转呢???

阅读全文

React 如何监听路由变化重新渲染数据

应用场景:

1
2
3
4
5
6
7
8
9
10
// route.js
<Router>
<Switch>
<Route path="/" component={NewsList} />
<Route path="/a" component={NewsList} />
<Route path="/b" component={NewsList} />
<Route path="/c" component={NewsList} />
<Route path="/d" component={NewsList} />
</Switch>
</Router>

阅读全文

使用slice()简单封装实现将数组分割为几个等长度的子数组

使用数组的时候,我们有时候希望将一个数组分成几个相同长度的子数组,使用slice()方法可以返回一个子数组,所以我们可以将slice()再进行封装一下,以实现上面的功能。

首先我们先来看一下slice()方法:

slice()

阅读全文