当前位置：首页 > news >正文

5 个 TypeScript 库来改进你的代码

news 来源：原创 2024/4/23 21:53:15

前言：根据公司实际项目梳理（只涉及技术）

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 图解（先看图，再看代码体会）引用资料引用资料二

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使用待整理