react进阶-Toy模板网

这篇具有很好参考价值的文章主要介绍了react进阶。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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. 解决方案：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。
1. 使用方式：创建一个名为 xxx.module.css 的样式文件。如 import styles from "./index.module.css"；
2. <div style={styles.text}></div
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}显示视图。