• React之受控组件和非受控组件以及高阶组件


    一、受控组件

    受控组件,简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据

    举个简单的例子:

    1. class TestComponent extends React.Component {
    2. constructor (props) {
    3. super(props);
    4. this.state = { username: 'lindaidai' };
    5. }
    6. render () {
    7. return "username" value={this.state.username} />
    8. }
    9. }

    这时候当我们在输入框输入内容的时候,会发现输入的内容并无法显示出来,也就是input标签是一个可读的状态

    这是因为valuethis.state.username所控制住。当用户输入新的内容时,this.state.username并不会自动更新,这样的话input内的内容也就不会变了

    如果想要解除被控制,可以为input标签设置onChange事件,输入的时候触发事件函数,在函数内部实现state的更新,从而导致input框的内容页发现改变

    因此,受控组件我们一般需要初始状态和一个状态更新事件函数

    二、非受控组件

    非受控组件,简单来讲,就是不受我们控制的组件

    一般情况是在初始化的时候接受外部数据,然后自己在内部存储其自身状态

    当需要时,可以使用ref 查询 DOM并查找其当前值,如下:

    1. import React, { Component } from 'react';
    2. export class UnControll extends Component {
    3. constructor (props) {
    4. super(props);
    5. this.inputRef = React.createRef();
    6. }
    7. handleSubmit = (e) => {
    8. console.log('我们可以获得input内的值为', this.inputRef.current.value);
    9. e.preventDefault();
    10. }
    11. render () {
    12. return (
    13. <form onSubmit={e => this.handleSubmit(e)}>
    14. <input defaultValue="lindaidai" ref={this.inputRef} />
    15. <input type="submit" value="提交" />
    16. </form>
    17. )
    18. }
    19. }

    三、高阶组件

    1、是什么

    高阶函数(Higher-order function),至少满足下列一个条件的函数

    • 接受一个或多个函数作为输入
    • 输出一个函数

    React中,高阶组件即接受一个或多个组件作为参数并且返回一个组件,本质也就是一个函数,并不是一个组件

    const EnhancedComponent = highOrderComponent(WrappedComponent);
    

    上述代码中,该函数接受一个组件WrappedComponent作为参数,返回加工过的新组件EnhancedComponent

    高阶组件的这种实现方式,本质上是一个装饰者设计模式

    2、如何编写

    最基本的高阶组件的编写模板如下:

    1. import React, { Component } from 'react';
    2. export default (WrappedComponent) => {
    3. return class EnhancedComponent extends Component {
    4. // do something
    5. render() {
    6. return <WrappedComponent />;
    7. }
    8. }
    9. }

    通过对传入的原始组件 WrappedComponent 做一些你想要的操作(比如操作 props,提取 state,给原始组件包裹其他元素等),从而加工出想要的组件 EnhancedComponent

    把通用的逻辑放在高阶组件中,对组件实现一致的处理,从而实现代码的复用

    所以,高阶组件的主要功能是封装并分离组件的通用逻辑,让通用逻辑在组件间更好地被复用

    但在使用高阶组件的同时,一般遵循一些约定,如下:

    • props 保持一致
    • 你不能在函数式(无状态)组件上使用 ref 属性,因为它没有实例
    • 不要以任何方式改变原始组件 WrappedComponent
    • 透传不相关 props 属性给被包裹的组件 WrappedComponent
    • 不要再 render() 方法中使用高阶组件
    • 使用 compose 组合高阶组件
    • 包装显示名字以便于调试

    这里需要注意的是,高阶组件可以传递所有的props,但是不能传递ref

    如果向一个高阶组件添加refe引用,那么ref 指向的是最外层容器组件实例的,而不是被包裹的组件,如果需要传递refs的话,则使用React.forwardRef,如下:

    1. function withLogging(WrappedComponent) {
    2. class Enhance extends WrappedComponent {
    3. componentWillReceiveProps() {
    4. console.log('Current props', this.props);
    5. console.log('Next props', nextProps);
    6. }
    7. render() {
    8. const {forwardedRef, ...rest} = this.props;
    9. // 把 forwardedRef 赋值给 ref
    10. return <WrappedComponent {...rest} ref={forwardedRef} />;
    11. }
    12. };
    13. // React.forwardRef 方法会传入 props 和 ref 两个参数给其回调函数
    14. // 所以这边的 ref 是由 React.forwardRef 提供的
    15. function forwardRef(props, ref) {
    16. return <Enhance {...props} forwardRef={ref} />
    17. }
    18. return React.forwardRef(forwardRef);
    19. }
    20. const EnhancedComponent = withLogging(SomeComponent);

    四、应用场景 

    1、受控组件与非受控组件

    大部分时候推荐使用受控组件来实现表单,因为在受控组件中,表单数据由React组件负责处理

    如果选择非受控组件的话,控制能力较弱,表单数据就由DOM本身处理,但更加方便快捷,代码量少

    针对两者的区别,其应用场景如下图所示:

    2、高阶组件 

    通过上面的了解,高阶组件能够提高代码的复用性和灵活性,在实际应用中,常常用于与核心业务无关但又在多个模块使用的功能,如权限控制、日志记录、数据校验、异常处理、统计上报等

    举个例子,存在一个组件,需要从缓存中获取数据,然后渲染。一般情况,我们会如下编写:

    1. import React, { Component } from 'react'
    2. class MyComponent extends Component {
    3. componentWillMount() {
    4. let data = localStorage.getItem('data');
    5. this.setState({data});
    6. }
    7. render() {
    8. return
      {this.state.data}
    9. }
    10. }

    上述代码当然可以实现该功能,但是如果还有其他组件也有类似功能的时候,每个组件都需要重复写componentWillMount中的代码,这明显是冗杂的

    下面就可以通过高价组件来进行改写,如下:

    1. import React, { Component } from 'react'
    2. function withPersistentData(WrappedComponent) {
    3. return class extends Component {
    4. componentWillMount() {
    5. let data = localStorage.getItem('data');
    6. this.setState({data});
    7. }
    8. render() {
    9. // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
    10. return <WrappedComponent data={this.state.data} {...this.props} />
    11. }
    12. }
    13. }
    14. class MyComponent2 extends Component {
    15. render() {
    16. return
      {this.props.data}
    17. }
    18. }
    19. const MyComponentWithPersistentData = withPersistentData(MyComponent2)

    再比如组件渲染性能监控,如下:

    1. class Home extends React.Component {
    2. render() {
    3. return (

      Hello World.

      );
    4. }
    5. }
    6. function withTiming(WrappedComponent) {
    7. return class extends WrappedComponent {
    8. constructor(props) {
    9. super(props);
    10. this.start = 0;
    11. this.end = 0;
    12. }
    13. componentWillMount() {
    14. super.componentWillMount && super.componentWillMount();
    15. this.start = Date.now();
    16. }
    17. componentDidMount() {
    18. super.componentDidMount && super.componentDidMount();
    19. this.end = Date.now();
    20. console.log(`${WrappedComponent.name} 组件渲染时间为 ${this.end - this.start} ms`);
    21. }
    22. render() {
    23. return super.render();
    24. }
    25. };
    26. }
    27. export default withTiming(Home);
  • 相关阅读:
    论文解读(GIN)《How Powerful are Graph Neural Networks》
    Day774.能向 Redis 学到什么 -Redis 核心技术与实战
    【Java】java | jvm | 分析cpu占用过高 | 分析jvm堆栈信息
    服务访问质量(QoS)——QoS技术概述与配置
    FANUC机器人电气控制柜内部硬件电路和模块详细介绍
    linux-ubuntu20.04配置syslog-server
    java计算机毕业设计考试编排管理系统MyBatis+系统+LW文档+源码+调试部署
    Python爬虫技术系列-03/4flask结合requests测试静态页面和动态页面抓取
    spark 读操作
    什么影响香港服务器的速度原因
  • 原文地址:https://blog.csdn.net/Ming_xm/article/details/133909117