1.0.19 • Published 1 year ago
@52css/weact v1.0.19
Weact
微信js使用react-like语言开发js(只是js部分)
page-demo
整体页面是WPage包裹hook方法,可以使用useState定义数据,onShow、onHide、onLoad、onUnload、onReady、onPullDownRefresh、onReachBottom 控制生命周期
- onShow 如果返回fn 可以出发 onHide执行
- onLoad 如果返回fn 可以出发 onUnload执行
import { WPage, useState, onShow, onLoad } from "../../utils/weact"
WPage(() => {
const [num, updateNum] = useState(0);
const [num1, updateNum1] = useState(100);
const toLogs = () => {
wx.navigateTo({
url: '/pages/logs/logs',
})
}
onLoad((options) => {
console.log('page1 onLoad', options)
})
onShow(() => {
console.log('page1 onShow')
return () => {
console.log('page1 onHide')
}
})
return {
num,
num1,
toLogs,
click(e) {
console.log('e', e.currentTarget.dataset)
updateNum((num) => num + 1);
},
focus() {
updateNum1(num => num + 3);
}
};
})
component-demo
整体页面是WComponent包裹hook方法,可以使用useState定义数据,created、attached、ready、moved、detached、error 控制生命周期
- attached 如果返回fn 可以出发 detached执行
props
需要return
- 支持解构
- 支持解构带默认值
import { WComponent, useState, attached } from "../../utils/weact"
WComponent(({ name, abc = 1 }) => {
const [count, setCount] = useState(10)
const bindTap = () => {
setCount(count => count + 1)
}
attached(() => {
console.log('attached')
})
return {
name,
abc,
count,
bindTap
}
})
获取this
- 函数不能是佚名函数,不然获取不到this
WPage(function () {
console.log('page-this', this)
});
WComponent(function () {
console.log('component-this', this)
});
增加useEffect
WPage(() => {
useEffect(() => {
console.log('useEffect, 立即执行')
})
useEffect(() => {
console.log('useEffect, 只执行一次')
}, [])
useEffect(() => {
console.log('useEffect, num变更就执行', num)
}, [num])
useEffect(() => {
const timer = setTimeout(() => {
setShowText(() => true);
}, 2000);
return () => {
// 页面销毁的时候执行
clearTimeout(timer);
};
}, [])
});
增加useMemo
WPage(() => {
const [count, setCount] = useState(0);
const [count1, setCount1] = useState(0);
const y = useMemo(() => {
console.log('只有count触发才会更新')
return count * 2 + 1
}, [count])
return {
count,
y,
bindTap() {
setCount(c => c + 1);
},
count1,
bindTap1() {
setCount1(c => c + 1);
}
}
});
触发
触发方法
WComponent((change = () => {}) => {
change({hello: '123'});
})
触发props的双向绑定更新
WComponent((props = {visible: false}) => {
// 手动更新,不能解构visible直接更新
props.visible = true
})
1.0.19
1 year ago
1.0.18
1 year ago
1.0.17
1 year ago
1.0.16
1 year ago
1.0.15
1 year ago
1.0.14
1 year ago
1.0.13
1 year ago
1.0.12
1 year ago
1.0.11
1 year ago
1.0.10
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago