5 个 TypeScript 库来改进你的代码

时间:2022-10-20 07:51:38

前言:根据公司实际项目梳理(只涉及技术)

1.react-fastclick :没完全理解

React Fastclick 会自动将 fastclick 触摸事件添加到具有 onClick 属性的元素(以及那些需要特殊功能的元素,例如输入),以防止在某些触摸设备上发生延迟。 

2.Normalize.css:一种CSS reset的替代方案

`Reset`通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果

当一个元素在不同的浏览器中有不同的默认值时,`Normalize.css`会力求让这些样式保持一致并尽可能与现代标准相符合

 Normalize.css 修复了浏览器的bug 

3.process.env

process.env 是 [Node].js 中的一个环境对象

可以再命令行 敲node->process.env 查看完整的对象 

4.props:Component自带的属性,readonly

class Component<P, S> {constructor(props: Readonly<P> | P);
} 

5.import { Provider, connect } from ‘react-redux’; 引用

<Provider store={store}>

provider组件的作用(很官方的,有点云里雾绕????):
provider包裹在根组件外层,使所有的子组件都可以拿到state。
它接受store作为props,然后通过context往下传,这样react中任何组件都可以通过context获取store。

人能听懂的话(show code):

1)Provider: Provider的作⽤是从最外部封装了整个应⽤,并向connect模块传递store
connect: 负责连接React和Redux connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

2)工作流程
1、获取state: connect通过context获取Provider中的store, 通过store.getState()获取整个store tree 上所有state

2、包装原组件: 将state和action通过props的⽅式传⼊到原组件内部wrapWithConnect返回⼀个ReactComponent对象Connect,Connect重新render外部传⼊的原组件WrappedComponent,并把connect中传⼊的mapStateToProps, mapDispatchToProps与组件上原有的props合并后,通过属性的⽅式传给WrappedComponent

3、 监听store tree变化: connect缓存了store tree中state的状态,通过当前state状态和变更前state状态进⾏⽐较,从⽽确定是否调⽤ this.setState() ⽅法触发Connect及其⼦组件的重新渲染

3)code

function connect (mapStateToProps, mapDispatchToProps, •mergeProps, options) {return function(cc){class myContext extends React.Componet{constructor (props){super(props)this.state = {initState: store.getstate()//关键代码:从store中初始化数据}render() {return (<cc{...this.props}{...mapStateToProps(store.getState())}//关键代码:合并store的state到props{...mapDispatchToProps(store.dispatch)}//关键代码,调用dispatch/>)}}}} 

6.redux 图解(先看图,再看代码体会)引用资料 引用资料二

5 个 TypeScript 库来改进你的代码

1)可能会有的疑惑:store 是怎么把 newState 和 组件关联起来的:在组件构造的时候绑定

store.subscribe(this.storeChange.bind(this)); // store发生改变时,自动触发 

2)redux dispatch异步 需要知道applyMiddleware的使用,网上查找即可

理解大概原理:

异步 action 创建函数的调用返回一个**函数**,该函数接收一个 dispatch 参数,实现在异步结果返回后调用 dispatch 来完成对 state 的修改。
该函数的返回值将成为 store.dispatch 调用的返回值。
为了使 redux 能以这样的方式(store.dispatch(一个函数))运作,标准的做法是使用 Redux Thunk 中间件。 

7.HashRouter 待整理
8.Route使用 待整理
9.Less使用 待整理

最后

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。
5 个 TypeScript 库来改进你的代码
5 个 TypeScript 库来改进你的代码
5 个 TypeScript 库来改进你的代码
5 个 TypeScript 库来改进你的代码

有需要的小伙伴,可以点击下方卡片领取,无偿分享