文章目录
webpack的loader使用：style-resources-loader
在style资源中注入内容：主要作用是导入一些公共的样式文件，默认在样式之前导入。
style-resources-loader
在项目中使用的时候可以在这个公共的样式文件里定义一些mixin函数:（变量）
而这些变量直接在index.less引入有可能是不起作用的：
[vue-cli3 关于样式引入的问题 ---- style-resources-loader
比如：
.iconbefore(@font) {
&::before {
content: @font;
font-family: 'iconfont';
font-size: .9rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
speak: none;
}
}
这是一个很经典的利用伪元素向一些元素前添加图标的方法，使用时只需要把iconfont作为参数传入使用即可。
##伪元素的使用：伪元素对于前端布局而言意义重大：
- 间隔使用法
- 使用伪元素添加一些图标
- 使用伪元素清除浮动
区分好：伪元素和伪类：
##样式的覆盖
项目中使用某些第三方库的组件，但是有些样式需要自己修改：找到样式名字–>自定义覆盖样式
##css选择器
在做样式的时候发现自己对样式的处理很笨拙，但是css或者less文件的编写原则就是：尽量少写样式，提高页面性能。
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型 使用方法：
p:nth-child(1) /*匹配p元素的第一个子元素*/
具体可以参考开发文档。
##常见的块级元素和行内元素
球球不要只会用div和span了，还有很多常用的元素：
div
p
h1-h6
ul ol li
table
hr
table
header
footer
span
img
a
label
imput
em
cite
i(斜体)
textarea
u(下划线)
button(默认display:inline-block)
对于想对行内元素设置margin的上下，或者设置高度，可以display:inline-block
常用的块级元素（block）、行内元素（inline）以及行内块元素（inline-block）的解析
标签使用原则：
- 尽量语义化
- 尽量少写css样式
##移动端布局必须要知道的flex布局
这篇文章总结的比较齐全，注意区分父级元素的使用和子级元素的使用
##前端解决页面样式bug，一定要多多审查元素
##有关于数组去重
自己比较常用的去重方法中：
-
排序后去重：
- sort
- 检查res最后一个元素是否等于arr的下一个待检查元素，不等于就push进去
-
直接去重：
- indexOf检查res中是否有arr的下一个待检查元素，没有就push进去
-
直接去重：
- 判断arr的某个元素第一次出现的位置是不是当前位，可以采用filter方法筛选
-
ES6去重
- Array.from或者[…]
- new Set()
-
数组对象去重
//reduce方法遍历数组，进行缩减 var obj={};//一个中间对象 res=arr.reduce((res0,item)=>{ obj[item.key]?'':(obj[item.key]=true&&res0.push(item)); return res0; },[])
CSSmodules详解
在我的react学习笔记系列（一）中已经讲过css或者less模块化的知识，但是这次又拿出来讲，是因为在做一个移动端项目的时候试图使用better-scroll，但是页面一直无法滚动，原因竟是我试图一开始用style.wrapper测试时，cssmodules已经将其编译为其他字符串，这种错误实在低级！
阅读CSS Modules 用法教程后补充几个知识点：
-
css-loader默认的默认的哈希算法是
[hash:base64]webpack.config.js里面可以定制哈希字符串的格式 -
CSS Modules 支持使用变量，不过需要安装 PostCSS
关于postCSS是做什么用的，我可以理解为：将css转换成js可以操作的抽象语法树结构。PostCSS 基本用法
-
react中使用better-scroll
以前主要在MVVM框架比如vue中使用better-scroll，最近用react用到了better-scroll,起因是我想用上拉加载功能，最初试图用antd-mobile的pullToRefresh，效果不错，但是因为页面存在吸底按钮，下拉后无法拉到按钮处，也就是说无法在滑动完列表后事件冒泡到最外层。而且因为微信内置浏览器的原因，每次下拉都会把一部分底拉起来，用户体验极差。
2019/09/09 重新审视这个当初项目中遇到的问题，我想阐述的其实是当时发生了两个问题：1. 下拉列表到底部拉不出来底部的吸底按钮 2.微信内置浏览器的“橡皮筋效果”导致存在列表滑动的页面用户体验极其不佳。
- 针对问题1，可以查看antd-mobile给出的listview结合pullToRefresh做的demo，只有吸顶效果的没有吸底效果的，且不说产品设计的存在吸底按钮的怪异，但是既然要实现这种效果，在pullToRefresh本身没有任何问题的基础上说明当时对列表位置的设置有问题；再者就是无法继续冒泡的问题。（但目前仍然没有什么解决方案，只能更换了组件用的better-scroll）
- 针对问题2，有几个references可以看一下：
阻止微信浏览器下拉滑动效果（ios11.3 橡皮筋效果）
禁止ios浏览器页面上下滚动 (橡皮筋效果)
当时没有很好的审视这个问题的普遍性，只是应急用better-scroll处理了一下默认事件(preventDefault设为false)。
那么通过设置：
document.body.addEventListener('touchmove', function (e) {
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android
结合pullToRefresh是否能得到较好的结果呢？
在react中使用better-scroll时借鉴了https://github.com/soluteli/react-bscroll
因此在项目中使用时也是对better-scroll进行了重新封装，为什么要封装呢，因为我们尽量避免在组件里使用太多的命令式操作，把数据请求和better-scroll做一个剥离，同时在一些比如下拉刷新 上拉加载的功能上做一个自己的样式出来。
iconfont的使用
参与项目每次下载新图标覆盖文件会自动累加的（前提是在同一个项目里）（跟进理解 ）
关于react-redux与componentWillReceiveProps
起因：我在使用dva框架时想要处理redux中异步获取的数据，而我们在react中修改数据只有两种方式：
- 父组件中修改数据也就是要传给子组件的props
- 把数据放进state中，setState修改，这种方式是同步的，只要修改了state，获取的地方就能接收到改动
那么回到我们现在的问题，我试图在render函数里修改redux中由state映射为的props，发现修改无效。原因：当前组件只是一个单纯的** UI组件**，真正使用它的时候是用的@connect把它跟容器组件连接起来，但是！我在render里面修改props，每次渲染这个组件的时候都要进行一次数据处理，显然效率低性能差–>于是我将前期的数据处理放在了effect中，然后本组件接收的props放在state里面，对state修改内容，子组件就总能同步收到我操作后的数据
此时问题：
本父组件是在componentDidMount里面利用已有参数作为payload–dispatch的action获取异步数据，除非在render函数里获取this.props能拿到数据，其他地方并不能–> componentWillReceiveProps的使用
仔细阅读下面第一篇文章可以知道：
componentDidMount
void componentDidMount()
在初始化render之后只执行一次，在这个方法内，可以访问任何组件，componentDidMount()方法中的子组件在父组件之前执行.(嵌套组件树中：先子组件componentDidMount完成后再执行父组件的componentDidMount)
从这个函数开始，就可以和 js 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求.
初始化render之后，componentDidMount只执行一次，在这里无法获得更新后store中的值（更何况这里我们dispatch的action），那么这时候我们可以在shouldComponentUpdate/componentWillUpdate/componentDidUpdate/componentWillReceiveProps
中通过nextProps获取:
再仔细阅读：
shouldComponentUpdate
boolean shouldComponentUpdate(
object nextProps, object nextState
}
这个方法在初始化render时不会执行，当props或者state发生变化时执行，并且是在render之前，当新的props或者state不需要更新组件时，返回false。
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}
当shouldComponentUpdate方法返回false时，就不会执行render()方法，componentWillUpdate和componentDidUpdate方法也不会被调用。
默认情况下，shouldComponentUpdate方法返回true防止state快速变化时的问题，但是如果·state不变，props只读，可以直接覆盖shouldComponentUpdate用于比较props和state的变化，决定UI是否更新，当组件比较多时，使用这个方法能有效提高应用性能
componentWillUpdate
void componentWillUpdate(
object nextProps, object nextState
)
当props和state发生变化时执行，并且在render方法之前执行，当然初始化render时不执行该方法，需要特别注意的是，在这个函数里面，你就不能使用this.setState来修改状态。这个函数调用之后，就会把nextProps和nextState分别设置到this.props和this.state中。紧接着这个函数，就会调用render()来更新界面了
componentDidUpdate
void componentDidUpdate(
object prevProps, object prevState
)
组件更新结束之后执行，在初始化render时不执行.
componentWillReceiveProps
void componentDidUpdate(
object prevProps, object prevState
)
当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用;
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
总结：
适用情况：在当前组件获取componentDidMount发起网络请求并存入store后的值。(即更新后的store值)
如果想拿到这个值并作修改：
可以用componentWillReceiveProps，因为它可以setState,其他不可以。
componentWillReceiveProps详解（this.props）状态改变检测机制
谈谈React–componentWillReceiveProps的使用
React的componentWillUpdate获取不到更新的props值（redux）
componentWillReceiveProps是在组件的props改动时触发，那么结合我们的业务需求，想要修改父组件接收到的props0，然后传给子组件，子组件待接收的props1会随时改动，于是把props0放在父组件的state里面，state赋值给props1，state初始值的设定就可以在componentWillReceiveProps里获取nextProps
具体参考：
react+redux教程（五）异步、单一state树结构、componentWillReceiveProps
单一state树结构
通过浏览器调试redux界面中的charts可以看到我们项目里的state树是啥样的，根reducer将所有子reducer合成一个单一的state树。
-其他：
平常在UI组件里处理不是由redux的reducer传来的state-props时没有必要去componentWillReceiveProps结束props。
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
