React之内置的高阶组件
React内置了一些高阶组件,以便对一些组件做特殊处理,从而提高代码性能。例如
React.memo
、React.forwardRef
注意:高阶组件不是Reacts视图组件
- 什么是高阶组件
高阶组件本质是高阶函数。高阶组件接收一个组件作为参数,并返回处理后的组件
1、React.memo
作用: 在函数组件中,父组件状态更新,默认会更新子组件。为了避免父组件引起的子组件的更新,使用
memo
包裹子组件导出
import { memo } from 'react'export default memo(子组件)
memo:不会影响子组件自身的更新,只会优化父组件更新带来的副作用
注意: 类组件中使用的是 React.PureComponent
import { PureComponent } from 'react'class 子组件 extends PureComponent {render() {return (<div>测试</div>)}
}
2、React.forwardRef
React18, 函数组件没有组件实例,本身是无法使用ref获取子组件实例的,需要使用高阶组件
forwardRef
,包裹导出的子组件。从而在父组件调用子函数组件的时候可以使用ref
具体使用可见:
React.forwardRef的具体使用