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