React

为什么在React中事件函数需要用bind绑定

在类中定义的函数，局部自动化开启了严格模式
例如： onClick的回调，不是通过实例调用的，类中的方法默认开启了局部严格模式， 使用的时候直接从堆中拿出来的，所以this是undefined, 所以需要通过bind绑定

getDerivedStateFromProps和getSnapshotBeforeUpdate

• 在componentWillMount 中写一些异步代码和初始化操作，会造成组件数据或真实DOM渲染上的一系列问题， 并且这个钩子如果使用服务端渲染的话，会在服务端和客户端都渲染一次，导致请求两次
• 在Fiber之后， 由于任务可中断，willMount可能会被执行多次，（filber算法是异步渲染，异步的渲染，很可能因为高优先级任务的出现而打断现有任务，导致componentWillMount就可能执行多次，除此之外，如果我们在willMount中订阅事件，但在服务端并不会执行willUnMount事件，会导致服务端内存泄漏。
• componentWillReceiveProps会在父组件每次render的时候导致子组件re-render的时候执行，就算此时props没有发生改变也会导致该方法执行，例子，此时父组件state改变导致子组件重新渲染，尽管此时传递给EmailInput组件的props没有变化，但是EmailInput组件在componentWillReceiveProps中无条件执行从props更新到state导致程序出现BUG、
• getDerivedStateFromProps有且仅有一个用途： 使用props来派生/更新state, 非实例调用的，里面获取不到this, React团队对于开发者的约束
• getSnapshotBeforeUpdate在render函数执行之后，componentDidUpdate之前执行，其返回的值可作为componentDidUpdate第三个参数，例如官网记录滚动条位置案例

append和appendChild的区别

.append 接受Node对象和DOMString，而 .appendChild 只接受Node对象。
.append 没有返回值，而 .appendChild 返回附加的Node对象
.append 允许您添加多个项目，而 .appendChild 仅允许单个项目。

webpackV5 中generator踩坑

# 使用下面这种语法的时候
    generator: {
          filename: "images/[hash][ext]",
    },
 type只能写为
 type: "asset"
 写为："asset/resource" 会报错

style-loader和css-loader

• style-loader 将<style>标签插入到DOM中
• css-loader 解析通过 @import . url(). import/require()这些方式引入的样式文件

webpacl 5.20.0+版本中

• 内置了清除输出目录内容的功能，只需要再output中配置一个参数即可

module.exports = { 
    //... output: { 
                clean: true, // Clean the output directory before emit. 
                }, 
};

Tree Shaking 只支持 ESM 的引入方式，不支持 Common JS 的引入方式。

手动进行 code spliting

• 修改webpack entry 入口的配置

const path = require('path'); 
module.exports = { 
    mode: 'development', 
    entry: { 
            lodash: './src/lodash.js', // 注意顺序，lodash 写在前面 
            index: './src/index.js' // 这样 index.js 的代码才能用到 lodash 
           }, 
    output: { filename: '[name].js', path: path.resolve(__dirname, 'dist'), } }

这种手动分离的方式比较麻烦 使用code spliting 的方式 将公共模块和 node_modules里面的依赖分开打包

webpack hash

webpack中有三种hash

1. 项目级别： filename: '[name]-[hash].bundle.js'----- 项目中任何改动都会修改hash
2. Chunk级别： filaname: '[name]-[chunkhash].bundle.js' ----- 同一路chunk改动会修改hash
3. 内容级别： filename: '[name]-[contenthash].bundle.js' ----- 文件发生变化时才会修改hash 最佳方案: 使用 contenthash:8

webpack 优化

• optimization.minimize 是webpack默认的js压缩工具
• optimization.minimizar 自定义的js压缩工具，覆盖默认的压缩工具

css-minimizer-webpack-plugin webpack css压缩工具
webpackV5 开箱既有最新版本的 terserWebpackPlugin

webpack React有状态刷新配置

1. 安装 react-refreshr
2. 安装 @pmmmwh/react-refresh-webpack-plugin 插件