- 前者setup只会调用一次,后者函数会被多次调用
- 前者无需useMemo useCallback,因为setup只调用一次
- 前者无需顾虑调用顺序,而后者需要保证hooks的顺序一致
- 前者reactive + ref 比后者useState,要难理解
react中setState是同步还是异步
- 在setTimeout和自定义的DOM事件中是同步的
- 其它情况是异步的,通过第二个参数返回一个函数可以拿到更新的DOM值
- 传入对象会别合并
- 传入函数不会被合并
// // 传入对象,会被合并(类似 Object.assign )。执行结果只一次 +1
// this.setState({
// count: this.state.count + 1
// })
// this.setState({
// count: this.state.count + 1
// })
// this.setState({
// count: this.state.count + 1
// })
// 传入函数,不会被合并。执行结果是 +3
this.setState((prevState, props) => {
return {
count: prevState.count + 1
}
})
this.setState((prevState, props) => {
return {
count: prevState.count + 1
}
})
this.setState((prevState, props) => {
return {
count: prevState.count + 1
}
})
// componentDidMount() {
// // 自己定义的 DOM 事件,setState 是同步的
// document.body.addEventListener('click', this.bodyClickHandler)
// }
渲染到body中,相当于vue3的vue.extend,vue3的teleoprt
render() {
// // 正常渲染
// return <div className="modal">
// {this.props.children} {/* vue slot */}
// </div>
// 使用 Portals 渲染到 body 上。
// fixed 元素要放在 body 上,有更好的浏览器兼容性。
return ReactDOM.createPortal(
<div className="modal">{this.props.children}</div>,
document.body // DOM 节点
)
}
为何需要事件合成机制
- 更好的兼容性和跨平台
- 转到document,减少内存消耗,避免频繁解绑
- 方便事件的统一管理(如事物机制)
git
- git stash 加入缓存中,没有提交的代码
- git stash pop 放开缓存
forEach跳出当前循环
/* 第一种通过抛出错误,跳出循环 */
/* 第二种终止当前循环通过some和every */
arr.some(v => {
if(v === 3) {
return true
}
console.log('item', v)
})
arr.every(v => {
if(v === 3) {
return false
}
console.log('item', v)
return true
})
await 实现promise.all
async function awaitAll(...fnArr) {
if ({}.toString.call(fnArr[0]) === '[object Array]') {
fnArr = fnArr[0];
}
const fnNum = fnArr.length;
const promiseArr = [];
const resultArr = [];
for (let i = 0; i < fnNum; i++) {
promiseArr.push(fnArr[i]());
}
for (let i = 0; i < fnNum; i++) {
resultArr.push(await promiseArr[i])
}
console.log('你好啊', resultArr)
return resultArr;
}
function wait(ms) {return new Promise(resolve => setTimeout(() => resolve(), ms));}
async function fn1() {
await wait(1000);
console.log('fn1');
await wait(1000);
return 'fn1';
}
async function fn2() {
await wait(3000);
console.log('fn2');
return 'fn2';
}
async function fn3() {
console.log('fn3');
await wait(2000);
return 'fn3';
}
function fn4() {
console.log('fn4');
return 'fn4';
}
awaitAll(fn1, fn2, fn3, fn4).then(results => {
console.log('results', results);
});
react兄弟组件之间传值
一般用第三方组件pubsub-js
发布订阅的模式
www.npmjs.com/package/pub…
react第三方路由reactnavigation
一般用第三方组件reactnavigation
发布订阅的模式
reactnavigation.org/docs/gettin…