前言:根据公司实际项目梳理(只涉及技术)
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使用 待整理
最后
最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。
有需要的小伙伴,可以点击下方卡片领取,无偿分享