问题：React 在同级条件语句中引入相同组件会直接复用组件，不会更新组件的不同配置项
例如如下用法：
尽管在上述的用法中两个配置了不同的属性，但是当我切换这个media的值时，并没有更新的StaticRender组件，导致我页面初始化的配置和我切换media的配置是一样的
原因
react在比较两个新旧Vdom树时，会进行同级比较（满足），绑定的key值进行比较，发现未绑定，然后比较新旧的类型，发现是一样的，并且子级也一样（满足），即会复用。
解决
解决方法时给两个组件绑定不同的key，在diff时发现key不一样，会直接删除重建
问题：在jsx/tsx中没有显示引入react报错
类似上述的描述。
原因
在react 老版本中 因为 jsx 在被 babel 编译后，写的 jsx 会变成 React.createElement 形式，所以需要引入 React，防止找不到 React 引起报错
现状
React 17 后会加入react/jsx-runtime对 jsx、tsx进行 转换
解决办法
1、.eslintrc.js的extends中添加如下配置
extends: [
......
'plugin:react/jsx-runtime',
],
2、在tsconfig.json的compilerOptions中配置
"compilerOptions":{
.....
"jsx": "react-jsx",
}
注意 typescript 版本至少为 4.1 版 react 和 react-dom 至少版本 17 tsconfig.json 必须有一个 jsx 编译器选项 react-jsx 或 react-jsxdev
问题：CSSmargin击穿问题（子元素margin-top会影响父元素）
一、问题描述
最终效果：会发现在元素上面会有20px的空白，然而我们并没有对父元素设置margin，可见是子元素的 margin-top：20px 影响到了父元素。
二、原因：MDN的文档：如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。
三、简单的解决方案：
1、父元素加border。emmm，这样会多加border的宽度。
2、父元素overflow：auto。（比较喜欢这种。）
3、设置父元素的display为flex或inline-block。
4、使用绝对定位。
5、愿意的话可以在父元素子元素之间再加一个div咯。
问题：在进行npm包开发，在实际项目中引入时，发现对于类似于函数库可以Tree Shaking，而组件库却无法Tree Shaking，组件库中没有引入的组件代码同样被打包进了源码里，这显然是无法接受的。
##Tree Shaking原理 对 import 的代码进行静态分析，如果发现某个模块没有被任何地方使用，就会将该模块标记为 unused harmony exports，并且在生成产物时不再 export 该模块。最后，再将生成产物交给 uglify 或 terser 这样的压缩工具进行处理，此时未被 export 的代码就会被当成死代码删除。 需要注意的是，tree shaking 并不会直接删除代码，只是分析模块依赖关系并去掉未引用代码的 export，真正进行死代码消除的是 uglify 或 terser 这样的压缩工具。tree shaking只支持静态引入的方式，ES Module的形式；而不支持CommonJS的动态引入方式。因为动态引入的话，tree shaking不能确定在引入之前是需要或者不需要。并且如果某个模块有「副作用」，或者 teser 无法判断它是否有「副作用」，那么就不会删除这个模块。
##sideEffects sideEffects的作用是指定文件是否有副作用 在package.json中sideEffects默认值是false，表示该包中的所有代码都没有副作用，即不会修改全局状态或依赖其它代码，可以安全地进行 tree-shaking。如果设置为true或具体的副作用列表，则表明该包中的代码具有副作用，不可进行 tree-shaking。
于是尝试在组件库中添加如下代码，即表明less、css中是具有副作用
"sideEffects": [
"**.less",
"**.css"
],
再在项目中使用组件库进行打包，发现Tree Shaking可以正常生效了
##思考 对于函数库来说，每个函数都是确定的输入输出，都是纯粹，可以很好的分析出是否具有副作用。而在组件库包含了less、css等，还有react的高阶函数，对于Tree Shaking来说，可能造成无法确定副作用的问题，从而使的Tree Shaking失效。因此我们在package中的sideEffects中明确的配置指定文件是具有副作用，辅助Tree Shaking来进行静态分析。
问题：Mixed Content: The page was loaded over HTTPS，blocked the content must be served over HTTPS
原因 主要是在https的网站域名，请求或加载了http的接口或资源，浏览器出于安全，限制了请求
解决 需要修改成https的请求，如果是第三方的http请求，可用服务端做转发解决
