React ref与受控组件

Ref

• 类组件可以通过ref直接获取到实例，这里推荐使用useRef方法
• 函数式组件因为没有实例无法获取到组件实例，但是可以通过forwardRef获取到组件内部某个标签，可以称之为Ref的转发，具体用法见下图

受控与非受控组件

什么是受控组件

• 在HTML 中，表单元素（如<input>、＜textarea＞ 和<select>）之类的表单元素通常自己维护 state，并根据用户输入进行重新更新
• 而在 React 中，可变状态(mutable state）通常保存在组件的 state 属性中，井且只能通过使用setState()来更新
  • 我们将两者结合起来，使React的state成为“唯一数据源”
  • 渲染表单的 React 组件还控制着用户输入过程中表单发生的操作
  • 被 React 以这种方式控制取值的表单输入元素就叫做 “受控组件〞
• 由于在表单元素上设置了 value 属性,因此显示的值将始终为 this.state.value，这使得 React 的state 成为唯一数据源
• 由于 onChange 在每次按键时都会执行井更新 React 的 state，因此显示的值将随着用户输入而更新

什么是非受控组件

• 一个受控组件中，表单数据是由 React 组件来管理的
• 另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理，然后我们使用ref来获取input元素

高阶组件

• 高阶组件的英文是 Higher-Order Components， 简称为 HOC
• 官方的定义：高阶组件是参数为组件，返回值为新组件的函数

Portals

某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中（默认都是挂载到id为roo的DOM元素上的）

Portal 提供了一种将子节点渲染到存在子父组件以外的 DOM 节点的优秀的方案

用法为 ReactDOM.createPortal(child,container)

• 第一个参数（child)是任何可渲染的React 子元素，例如一个元素，宇符串或 fragment
• 第二个参数 (container）是一个DOM 元素

StrictMode

Strictmode 是一个用来突出显示应用程序中潜在问题的工具

• 与Fragment 一样，StrictMode 不会渲染任何可见的UI
• 它为其后代元素触发额外的检查和警告
• 严格模式检查仅在开发模式下运行，它们不会影啊生产构建

但是检测，到底检测什么呢？

1. 识别不安全的生命周期
2. 使用过时的ref API
3. 检查意外的副作用
   1. 这个组件的constructor会被调用两次
   2. 这是严格模式下故意进行的操作，让你来查看在这里写的一些逻辑代码被调用多次时，是否会产生一些副作用
   3. 在生产环境中，是不会被调用两次的
4. 使用废弃的findDoMNode方法
   1. 在之前的React APl中，可以通过findDOMNode来获取DOM，不过已经不推荐使用了
5. 检测过时的context Apl
   1. 早期的Context是通过static属性声明Context对象属性，通过getChildContext返回Context对象等方式来使用Context的，目前这种方式已经不推荐使用