項目實戰【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