react组件的概念(高阶组件,受控组件,非受控组件)
高阶组件: 高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是React API的一部分,它是一种基于React的组合特性而形成的设计模式。
一、属性代理
1. 属性代理是最常见的实现方式,它本质上是使用组合的方式,通过将组件包装在容器组件中实现功能。
2. 属性代理方式实现的高阶组件和原组件的生命周期关系完全是React父子组件的生命周期关系,所以该方式实现的高阶组件会影响原组件某些生命周期等方法。
操作props抽象state获取refs引用获取原组件的static方法通过props实现条件渲染
二、反向继承
反向继承指的是使用一个函数接受一个组件作为参数传入,并返回一个继承了该传入组件的类组件,且在返回组件的render()方法中返回super.render() 方法,最简单的实现如下:
受控组件
1. 受控组件通过props获取其当前值,并通过回调函数(比如onChange)通知变化
2. 表单状态发生变化时,都会通知React,将状态交给React进行处理,比如可以使用useState存储
3. 受控组件中,组件渲染出的状态与它的value或checked属性相对应
4. 受控组件会更新state的流程非受控组件,非受控组件将数据存储在DOM中,而不是组件内,这比较类似于传统的HTML表单元素。
5. 非受控组件的值不受组件自身的state和props控制
6. 非受控组件使用ref从DOM中获取元素数据