项目实战【vue,react,微信小程序】(1710C)
目录
一、严格模式(Strict Mode)
StrictMode
是一个用以标记出应用中潜在问题的工具。
http://react.html.cn/docs/strict-mode.html
二、React快捷方式
rcc:
import React, { Component } from 'react'
export default class Footer extends Component {
render() {
return (
<div>
</div>
)
}
}
rafce:
import React from 'react'
const Footer = () => {
return (
<div>
</div>
)
}
export default Footer
三、react 类型检查
import React from 'react'
import PropTypes from 'prop-types'
const Icon = (props) => {
let { name, className } = props
return (
<span className={`icon iconfont icon-${name} ${className}`} onClick={props.onClick} ></span>
)
}
Icon.propTypes = {
name: PropTypes.string
}
export default Icon
四、immutable.js
let obj = fromJS({
a: {
b: 1
},
c: 2
})
let newObj = obj.setIn(['a', 'b'], 2)
console.log('obj:', obj.toJS())
console.log('newObj:', newObj.getIn(['a']).toJS())
五、100vh
vh就是当前屏幕可见高度的1%,也就是说
height:100vh == height:100%;
但是当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,
但是设置height:100vh,该元素会被撑开屏幕高度一致。
六、微信小程序查询dom位置
handleImgLoad() {
if (!isImgLoad) {
const query = this.createSelectorQuery();
query.selectAll('.js-category').boundingClientRect((res) => {
topArr = res.map(item => item.top)
topArr.push(Infinity)
console.log(topArr)
}).exec()
isImgLoad = true
}
}
七、组件样式隔离
options: {
styleIsolation: 'shared'
},
八、first-child
.m-sidebar-item:first-child{border-top: 1rpx solid #ddd;}
九、小程序理论题官网截屏
十、vue对象 Vue 无法检测 property 的添加或移除
https://cn.vuejs.org/v2/guide/reactivity.html#%E5%AF%B9%E4%BA%8E%E5%AF%B9%E8%B1%A1
十一、better-scroll
https://zhuanlan.zhihu.com/p/27407024
gitHub源码:
https://github.com/baweireact/m-apps/tree/master/demo
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步