发表于

Class组件的问题

  • 大型组件很难拆分和重构，很难测试（即class不易拆分）
  • 相同业务逻辑，分散到各个方法中，逻辑混乱
  • 复用逻辑变得复杂，如HOC、Render Prop

State Hook

函数组件是一个纯函数，执行完即销毁，无法存储state，需要State Hook，即把state功能”钩“到纯函数中

Effect Hook

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React, { useState, useEffect } from 'react'

function Index() {
	
	// 模拟class组价中 componentDidMount 和 componentDidUpdate
	useEffect(() => {
		console.log('在此发送一个ajax请求')
	})
	
	// 模拟class组件中 componentDidMount 挂载
	useEffect(() => {
		console.log('加载完了')
	}, []) // 第二个参数是 []（不依赖于任何 state）

	// 模拟class组件中 componetDidUpdate 更新
	useEffect(() => {
		console.log('更新了')
	}, [para1, para2]) // 第二个参数是依赖 state

	// 模拟class组件中 componentWillUnmount
	useEffect(() => {
		let timerId = window.setInterval(() => {
			console.log(Date.now())
		}, 1000)
		
		// 返回一个函数
		// 模拟class组件 componetWillUnmount 销毁
		return () => {
			window.clearInterval(timerId)
		}
	}, [])

	return <div>
		<div>Index test</div>
	</div>
}

export default Index
阅读全文 »

发表于

JSX语法

1
2
3
4
5
const text = {
	__html: '<div>hello world</div>'
}

return <div dangerouslySetInnerHTML={text}></div>

class组件和函数组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// class组件
class List extends React.Component {
	constructor(props) {
		super(props)
	}
	
	render() {
		const { list } = this.props
	
		return <ul>{list.map((item, index) => {
			return <li key={item.id}>
				<span>{item.title}</span>
			</li>
		})}</ul>
	}
}

// 函数组件
function List(props) {
	const { list } = props

	return <ul>{list.map(item => {
		return <li key={item.id}>
			<span>{item.title}</span>
		</li>
	)}</ul>
}
阅读全文 »

发表于

js判断类型的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1. typeof
// 只能判断原始类型（基本数据类型）
// 判断 null 除外

typeof null     // object
typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'

2. Object.prototype.toString()
Object.prototype.toString.call({})    // '[object Object]'

3. instanceof
// 适用于判断对象类型（引用数据类型）

const Person = function() {}
const p1 = new Person()
p1 instanceof Person // true

var arr = []
arr instanceof Array    // true

// 对于原始类型来说，你想直接通过 instanceof 来判断类型是不行的，当然我们还是有办法让 instanceof 判断原始类型的

class PrimitiveString {
  static [Symbol.hasInstance](x) {
    return typeof x === 'string'
  }
}
console.log('hello world' instanceof PrimitiveString) // true
阅读全文 »

发表于

git 代码提交

  1. git status 查看那些文件需要提交
  2. git add . 添加文件到本地
  3. git commit -m ‘备注’ 添加文件到git仓库
  4. git push 提交到git仓库
阅读全文 »

发表于
在main.js中注册全局组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 引入vuex 状态库
import store from "./store"

// 在main.js中注册全局组件
import toast from './components/toast/toast.vue'

Vue.component('my-toast', toast)

//挂在到Vue原型链上
Vue.prototype.$store = store

//是否显示加载中 的方法 调用store中的mutations方法
function loading(tf) {
    if (tf) {
        store.commit("switch_loading", tf)
    } else {
        store.commit("switch_loading")
    }
}

//也挂在到原型链上 方便在每个页面中  使用 this.$loading()  去显示加载中
Vue.prototype.$loading = loading
阅读全文 »

发表于

深度选择器

1. stylus, css使用方法：
1
.parent >>> .child{}
2. less使用方法：
1
2
3
.parent {
  /deep/ .child{}
}
3. sass使用方法：
1
.parent /deep/ .child{}

watch深度监听用法

监听对象属性的变化（方式一）
1
2
3
4
5
6
7
obj: {
  handler() {
      console.log(obj.a)
  },
  immediate: true,
  deep: true
}

监听对象属性的变化（方法二）

1
2
3
4
5
6
7
8
'obj.a': {
    handler(){
        console.log(obj.a)
    },
    immediate: true
}
1. 'immediate'：默认触发handler方法
2. 'deep': 深度监听对象中的属性
阅读全文 »

发表于

获取移动端 ua ,来判断设备类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var ua = navigator.userAgent.toLowerCase();

// 是否ios
var bIsIphoneOs = ua.match(/iphone os/i) == "iphone os";

// 是否为android
var bIsAndroid = ua.match(/android/i) == "android";

// 是否在微信浏览器中
function is_weixin(){
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      return true;
  } else {
      return false;
  }
}

// 是否在微博浏览器中
function is_weibo(){
  if (ua.match(/Weibo/i) == "weibo") {
      return true;
  } else {
      return false;
  }
}
阅读全文 »

发表于
欢迎来到yilidan的博客，该博客主要记录平时在做项目上的一些开发小技巧，希望大家有所收获！
阅读全文 »