React和响应式系统7 | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第12天

React反向代理

npm install http-proxy-middleware

const {createProxyMiddleware} = require("http-proxy-middleware")
module.exports =(app)=>{
    //  /api是代理路径
    app.use(createProxyMiddleware('/api',{
        target:"https://localhost:8080",
        changeOrigin:true,
        pathWrite:{
            '^/api':''
        }
    }))
}

如何阻止组件渲染

类组件

shouldComponentUpdate return false

继承React.PureComponent,只要props未改变,就不会执行render

函数组件

使用React.memo包裹组件函数,props没改变就不会执行函数

使用React.memo包裹组件函数,returnTRUE就不会执行

useMemo和useCallBack的区别

概念:useMemo和useCallback都是reactHook提供的两个API，用于缓存数据，优化性能；两者接收的参数都是一样的，第一个参数表示一个回调函数，第二个表示依赖的数据。

共同作用 在依赖数据发生变化的时候，才会调用传进去的回调函数去重新计算结果，起到一个缓存的作用

两者的区别

useMemo : 缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态

useCallback : 缓存的结果是函数，主要用于缓存函数，应用场景如需要缓存的函数，因为函数式组件每次任何一个state发生变化，会触发整个组件更新，一些函数是没有必要更新的，此时就应该缓存起来**，提高性能，减少对资源的浪费**；另外还需要注意的是，useCallback应该和React.memo配套使用，缺了一个都可能导致性能不升反而下降。