Fork me on GitHub

发表于 |

我一直认为，会用框架和用好框架是有很大的区别的，当用框架到一定程度的时候，就需要看看框架对应生态中那些不可获取的库，这样能加深在不同框架中同样的功能的优秀实现方案。

了解React Router的实现原理
如何监听路有变化以及渲染对应的组件

React Router是什么？

React Router是React团队开发的基于React框架架构所实现的路由库。

react-router

React Router有多个版本。

react-router-dom是基于react-router再封装的一个带有React DOM组件的库，其中包括了Link、HashRouter、BrowserRouter等组件提供给开发者通过使用标签的方式控制路由跳转。

阅读全文 »

发表于 |

https://codesandbox.io/s/misty-haze-eq546?file=/example.js

react-router-dom

react-router-dom文档地址： https://reactrouter.com/web/guides/quick-start/

1.安装

react-router提供多个包可以单独使用

package description
react-router 路由核心功能
react-router-dom 基于react-router提供在浏览器运行环境下功能
react-router-native for React Native
react-router-config static route congif helpers

在浏览器中运行只需要安装react-router-dom，reac-router-dom依赖react-router会自动安装依赖，所以不需要再手动安装react-router

1
2
3
npm install react-router-dom -S
// 或者
yarn add react-router-dom
阅读全文 »

发表于 |

近期针对react-router的原理以及适用的场景有新的认知，会重新温习一遍react-router的使用方式以及适用场景，同时会延伸出一些实用的解决方案来解决项目中遇到的问题；

思考的点

  • react-router的使用方式
  • react-router的原理
  • react一切皆组件 的理念
  • redux的实现原理

发表于 |

1. Object.prototype.toString.call()

每一个继承 Object 的对象都有 toString 方法，如果 toString 方法没有重写的话，会返回 [Object type]，其中 type 为对象的类型。但当除了 Object 类型的对象外，其他类型直接使用 toString 方法时，会直接返回都是内容的字符串，所以我们需要使用call或者apply方法来改变toString方法的执行上下文。

1
2
3
const an = ['Hello','An'];
an.toString(); // "Hello,An"
Object.prototype.toString.call(an); // "[object Array]"

这种方法对于所有基本的数据类型都能进行判断，即使是 null 和 undefined 。

1
2
3
4
5
6
7
Object.prototype.toString.call('An') // "[object String]"
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(function(){}) // "[object Function]"
Object.prototype.toString.call({name: 'An'}) // "[object Object]"

更多实现可见 谈谈 Object.prototype.toString

阅读全文 »

发表于 |

Ant Design(AntD)是React的一种UI组件。开发中使用AntD的Modal,在处理用户处理事务,在当前页面弹出一个对话框,承载相应的操作。现在来看看AntD的实现原理

先写列出部分Modal基本用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>Open a modal dialog</Button>
        <Modal title="Basic Modal" visible={this.state.visible}
          onOk={this.handleOk} onCancel={this.handleCancel}
        >
          <p>some contents...</p>
          <p>some contents...</p>
          <p>some contents...</p>
        </Modal>
      </div>
    );
  }
//----------------
ReactDOM.render(<App />,mountNode)

这样即可使用模态对话框组件。
打开浏览器的开发者功能可以看到对话框的div始终在body内层中，而不是在mountNode内部。当然模态对话框本就应该存在body内存中，而不是任意其他组件元素内部,否则嵌套效果不好，添加动画会招来性能问题。

阅读全文 »

发表于 |

1.认识 Function

mdn-Function介绍

我们先来看一行代码
这是js最基本的用法，用函数来输出表达式

1
2
3
4
function fn () {
  console.log('哈哈哈')
}
fn() // 哈哈哈

我们稍微变一下形
在之前的js函数篇分析中我有提过函数也是可以用构造函数Function 来创建

1
2
var fn = new Function(` console.log('哈哈哈') `)
fn() // 哈哈哈

看到这里也行你明白了点什么，如果没有也没关系，我们接着向下看

1
2
3
var str = '哈哈哈'
var fn = new Function(` console.log(str) `)
fn() // 哈哈哈

再来复杂一点

1
2
3
4
5
6
var str = '哈哈哈'
function cons (s) {
  console.log(s)
}
var fn = new Function(` cons(str) `)
fn() // 哈哈哈

结合项目中

1
2
3
4
5
6
7
8
9
var codemirrorText = 'LEN(text_1)' // 设置的公司表达式

var text_1 = '哈哈哈'
function LEN (s) {
  console.log(s.length)
}

var fn = new Function(`return ${codemirrorText} `)
fn() // 3

github 公式解析库
formula

阅读全文 »

发表于 |

Eruda 一个被人遗忘的调试神器

项目中如何引入？直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function debugInit(type){
  console.log('debugInit')
	var debug = sessionStorage.getItem('debug') || type || false;
	if(location.href && (location.href.includes('debug') || location.href.includes('dingnianhuiapp.superboss.cc'))) {
		debug = true;
		window._debug = true
	}

	if(debug) {
		var script = document.createElement('script'); 
    // script.src="https://dingtalkcdn.superboss.cc/nianhui/front/pc/vconsole.min.js"; 
    script.src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js"; 
		document.body.appendChild(script); 
		script.onload = function () { 
      // window.vConsole = new VConsole();
      eruda.init();
		}
		sessionStorage.setItem('debug', true);
	}
}
debugInit()

Eruda 一个被人遗忘的调试神器