项目实战【vue，react，微信小程序】（1710C）

目录

​​一、严格模式(Strict Mode)​​

​​二、React快捷方式​​

​​三、react 类型检查​​

​​四、immutable.js​​

​​五、100vh​​

​​六、微信小程序查询dom位置​​

​​七、组件样式隔离​​

​​八、first-child​​

一、严格模式(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​​