React之内置的高阶组件

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的具体使用