受控组件和非受控组件

refs

• 1.字符串形式

• 2.回调形式

• 3.createRef API

• ref作用在类组件上时，可以调用类组件的方法。

• 不能在函数式组件上使用ref属性，因为他没有实例。若我们要获取函数式组件的某个DOM元素可以通过React.forwardRef,下面会提。

受控组件(React的state成为唯一的数据源，且能控制表单输入的操作)

• React推荐大多数情况下使用受控组件。

非受控组件(表单数据交给DOM处理 使用ref获取表单的数据 就是上面refs提到的情况了)

高阶函数&柯里化函数

高阶组件(HOC)

参数为组件,返回值为新组件的函数

常见使用手法一：增强Props

常见使用手法二：渲染判断鉴权/请求前的loding....

优点与缺点

• 可以针对某些代码进行更优雅的处理。

• HOC需要在元组件上进行包裹或者嵌套，使用大量的HOC会产生较多嵌套让调试变得困难。

• HOC可以劫持props,操作不当时可能造成冲突数据覆盖等不一致性。

• Hooks的出现是开创性的,它解决了很多React之前存在的问题,如this指向问题和HOC嵌套复杂度问题等。

forwardRef高阶组件

传送门Portal

portal一个典型的用法是当子组件需要“打破”父组件容器，显示在父组件之外。比如 dialogs，hovercards，tooltips 组件。

上面的代码结果就是Dialog弹窗显示在当前组件中。

对于弹窗来说应该渲染到屏幕的重甲你位置,放在最外层body,如antd 的Modal

Portals 提供了一种超级棒的方法，可以将 react 子节点的 DOM 结构，渲染到 react 父节点之外的 DOM 中。

ReactDOM.createPortal(child, container)

• 第一个参数 child 是任何可以被渲染的 ReactChild，比如 element, string 或者 fragment.

• 第二个参数 container 是 一个 DOM 元素。

可以看到弹窗组件已抽离到Body下

加工下

Fragment & 空标签

• 可以看到div层级太多，但又不能把div去掉，可使用Fragment代替

• App.js使用空标签也可达到效果

• 两者区别在于Fragment在遍历使用时可以写key,而空标签啥也写不了。

StrictMode

一个用来突出显示程序中潜在问题的严格模式

仅在开发环境下运行,不会影响生产

检测什么?

• 1.识别不安全的生命周期

• 2.关于使用过时字符串 ref API 的警告

• 3.关于使用废弃的 findDOMNode 方法的警告

• 4.检查意外的副作用，在严格模式下，组件会被调用两次，故意进行的操作，检查逻辑代码调用多次是否产生副作用。在生产环境下是不会调用两次的。

• 5.检测过时的 context API

React中Css推荐写法

普通的CSS(命名规范 不会有太大问题)

• 普通的css就是通常编写到一个单独的文件，然后引入使用。

• 缺点：最大问题就是局部样式控制问题，尽管可以使用命名规范控制单独组件样式的命名，但也有概率存在样式层叠的问题。

css modules(推荐使用)

• css modules并不是React特有的解决方案,而是所有使用了类似webpack配置的环境下都可以使用。
• React 脚手架已经内置了css modules的配置，将.css/.less/.scss文件名修改为.module.css/ .module.less/ .module.scss,然后直接引用使用即可。

• 确实解决了局部作用域的问题

• 缺点： 1.引用类名不能使用连接符如(.list-item)需要写成(.listItem)

2.所有className都必须使用(style.className)的形式编写

3.不方便动态修改某些样式值，依然需要使用内联样式的方式。(配合使用classnames三方库干活不累)

CSS in JS(中立 但很多人用)

• 它是指一种模式，CSS有JS生成而不是在外部文件中定义。并不是React的一部分，由第三方库提供。

• React思想中人为逻辑与UI是无法分离的，所以有了JSX语法，样式属于UI的一部分，CSS IN JS的模式将样式也写到JS中后React被人称为All in JS。

• 此开发方式收到很多不同的声音，但很多优秀的CSS-in-JS的库非常强大，方便，很受欢迎。

• 比较流行的CSS-in-JS库：styled-components emotion

• npm i styled-components -S

• vscode 安装插件-vscode-styled-components(高亮及智能提示)

• 先提一提模板字符串的另类操作(styled-components利用这个标签模板字符串为前提正则解析拆解)

• 基本使用一

• 基本使用二

• props穿透

• attrs的使用

• 传入state作为props属性

• 继承

• 主题

classnames(一个好用的三方库)

react-transition-group(过渡动画库)

npm i react-transition-group -S

主要包含四个组件

• Transition(使用不多 与平台无关)

• CSSTransition(通常使用)

1.执行过程中有三个状态： appear enter exit

2.需要定义状态对应的样式

第一类：开始状态对应的类是:-appear -enter -exit

第二类：执行动画对应的类是:-appear-active -enter-active -exit-active

第三类：执行结束对应的类是:-appear-done -enter-done -exit-done

• SwitchTransition(两个组件显示和隐藏切换时 使用该组件)

1. in-out:表示新组件先进入，旧组件再移除。
2. out-in:表示旧组件先移除，新组件再进入。

• TransitionGroup(多个动画组件包裹 一般用于列表元素的动画)