directory

1. Strict Mode

React shortcut

React type check

Four, immutable. Js

Five or 100 vh

Vi. Wechat applets query dom location

Component style isolation

Eight, the first child

 

 

 

 

 

 

 

 

1. Strict Mode

StrictMode is a tool for flagging potential problems in your application.

The react. HTML. Cn/docs/strict…

 

React shortcut

RCC:

import React, { Component } from 'react'

export default class Footer extends Component {
  render() {
    return (
      <div>
        
      </div>)}}Copy the code

Rafce:

import React from 'react'

const Footer = () = > {
  return (
    <div>
      
    </div>)}export default Footer
Copy the code

React type check

import React from 'react'
import PropTypes from 'prop-types'

const Icon = (props) = > {
  let { name, className } = props

  return (
    <span className={`icon iconfont icon-The ${name} ${className} `}onClick={props.onClick} ></span>
  )
}

Icon.propTypes = {
  name: PropTypes.string
}

export default Icon
Copy the code

Four, 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())
Copy the code

Five or 100 vh

Vh is 1% of the height of the current screen visibility, that is

height:100vh == height:100%;

But when the element has no content, set height:100%, the element will not be stretched, and the height is 0,

But if you set height to 100vh, the element will be spread out at the same height.

Vi. Wechat applets query dom location

    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}}Copy the code

Component style isolation

  options: {
    styleIsolation: 'shared'
  },
Copy the code

Eight, the first child

.m-sidebar-item:first-child{border-top: 1rpx solid #ddd; }Copy the code

Nine, small program theory problem official website screenshot

Vue cannot detect the addition or removal of property

 

Cn.vuejs.org/v2/guide/re…

 

11, the better – scroll

 

zhuanlan.zhihu.com/p/27407024

 

 

 

 

 

 

 

 

 

 

Making the source code:

Github.com/baweireact/…