react进阶

1. react-virtualized的高阶组件，Autosize可以使屏幕适配。使用render-props模式来获取到AutoSizer组件暴露的width和height属性。
2. JSON.parse(JSON.stringify())不适用于有undefined的数据。
   深拷贝的使用，不能使用在有undefined的数据中。有直接过滤undefinded的数据。
3. deepcopy （递归深复制）性能不好，占用内存。
4. immutable的拷贝：从子组件获取到地址信息，如果有新值，新值指向新值，其他继续引用旧函数。最好配合immutable的方法。
5. mobx的使用：使用observable来订阅信息，使用autorun来消费信息。autorun会自动去绑定里面相关的值，相关值改变时才进行改变。绑定值可以使用observable.get和observable.map绑定。装饰器浏览器要识别要使用@babel/plugin-proposal-decorators，配置.babelrc添加装饰器的语法。再安装 npm i customize-cra react-app-rewired。
6. styled-components：在js中使用css。cosnt StyledFooter = styled.footer`background: yellow`，使用标签函数。原理是用这个去包装你的组件，形成高阶函数，且默认加上了一些样式。
7. yield和* 什么时候可以用到，在redux-sage或者dva中会使用
8. redux-saga: redux的中间件，可执行副作用的异步操作数据的方法。
9. formik 表单验证，react的高阶函数
10. 兄弟组件通信，将共享状态提升至最近的公父组件中，由公共父组件管理这个状态，状态提升。
11. 样式覆盖：在配置路由时，CityList和Map组件都被导入到项目中，那么组件的样式也就被导入到项目中。如果组件之间样式名称相同，那么一个组件中的样式就会在另一个组件中生效，从而造成组件之间样式相互覆盖的问题。
    1. 解决方案：1、类名不同。2、scss的嵌套。3、css in js。
12. css in js：指在javascript编写css的统称，用来解决css样式的冲突，覆盖等问题。常见有：css modules、styled-components等。
13. css modules：实现方式，使用了webpack的css-loader插件；命名采用：BEM（block块，element元素、modifier三部分组成）命名规范，比如：.list_item_active。
    1. 使用方式：创建一个名为 xxx.module.css 的样式文件。如 import styles from "./index.module.css"；
    2. <div style={styles.text}></div
14. umijs，Dva：
    1. 重定向组件

       import {} from "umi";
       <Redirect to="/film" />

    2. 嵌套路由：
       在pages中新建文件夹film，该文件夹下还有一个_layout.tsx，默认是访问这个。如果同级目录中有Comingsoon.tsx，在路径输入后会返回到新加的文件。
       如果要使用父路由调用子路由，就使用props.children的方法。function Film(props){<div>{props.children}</div> }
       如果需要读取路由信息，使用const location = useLocation();中
       可以新建一个layouts来存放根组件目录。级别比较高，需要使用{props.children}显示视图。

• GraphQL的使用：进行处理数据，规定后端一些字段。
• umi下的dvajs：原生dvajs，要手动注册redux的同步和异步。
  1. umi就不用手动注册。
  2. 全局安装npm install dva-cli -g