Composition API和 React Hooks的对比

681 阅读2分钟
  • 前者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…