起伏羊
起伏羊

【 React】React 组件化开发

React

React 组件化开发

什么是组件化开发？

  • 组件化开发是一种分而治之的思想：
    • 口 如果我们将 一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂 ，而且不利于后续的管理以及扩展。
    • 口 但如果，我们将 一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。
  • 我们需要通过组件化的思想来思考整个应用程序：
    • 口 我们将一个完整的页面分成很多个组件；
    • 口 每个组件都用于实现页面的一个功能块；
      口 而每一个组件又可以进行细分；
      口 而组件本身又可以在多个地方进行复用；

React的组件化

  • 组件化是React的核心思想，也是我们后续课程的重点，前面我们封装的App本身就是一个组件：
    • 口 组件化提供了一种抽象，让我们可以开发出一个个独立可复的小组件来构造我们的应用。
    • 口 任何的应用都会被抽象成一颗组件树。
  • 组件化思想的应用：
    • 口 有了组件化的思想，我们在之后的开发中就要充分的利用它。
    • 口 尽可能的将页面拆分成一个个小的、可复用的组件。
    • 口这样让我们的代码更加方便组织和管理，并且扩展性也更强。
  • React的组件相对于Vue更加的灵活和多样，按照不同的方式可以分成很多类组件：
    • 口 根据组件的定义方式，可以分为：函数组件(Functional Component) 和 类组件(Class Component)；
    • 口 根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component) 和 有状态组件(Stateful Component)；
    • 口 根据组件的不同职责，可以分成：展示型组件(Presentational Component) 和 容器型组件(Container Component)；
  • 这些概念有很多重委，但是他们最主要是关注数据逻辑和UI展示的分离：
    • 口 函数组件、无状态组件、展示型组件 主要关注UI的展示；
    • 口 类組件、有状态组件、容器型组件 主要关注数据逻辑；
  • 当然还有很多组件的其他概念：比如异步组件、高阶组件等，我们后续再学习。

类组件

  • 类组件的定义有如下要求：
    • 口 组件的名称是大写字符开头（无论类组件还是函数组件）
    • 口 类组件需要继承自 React.Component
    • 类组件必须实现render函数
  • 在ES6之前，可以通过create-react-class 模块来定义类组件，但是目前官网建议我们使用ES6的class类定义。
  • 使用class定义一个组件：
    • 口 constructor是可选的，我们通常在constructor中初始化一些数据;
    • 口 this.state中维护的就是我们组件内部的数据；
    • 口 render() 方法是 class 组件中唯一必须实现的方法；

render()函数的返回值
当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：
React 元素：

  • 口 通常通过JSX 创建。
  • 口 例如，
    会被 React 渲染为 DOM 节点， 会被 React 渲染为自定义组件；
  • 口 无论是
    还是 均为 React 元素。
    数组或 fragments：使得 render 方法可以返回多个元素。
    Portals： 可以渲染子节点到不同的 DOM 子树中。
    -字符串或数值类型：它们在 DOM 中会被渲染为文本节点
    布尔类型或 null：什么都不渲染。

函数组件

  • 函数组件是 使用function来进行定义的函数，只是 这个函数会返回和类组件中render函数返回一样的内容。
  • 函数组件有自己的特点（当然，后面我们会讲hooks，就不一样了）：
    • 口 没有生命周期，也会被更新并挂载，但是没有生命周期函数；
    • 口 this关键字不能指向组件实例（因为没有组件实例）；
    • 口 没有内部状态 (state）
  • 我们来定义一个函数组件：
 export default function App(){
    return 
HelLo World

 }
  • 在前面的学习中，我们主要讲解类组件，后面学习Hooks时，会针对函数式组件进行更多的学习。

React 组件生命周期

认识生命周期

  • 很多的事物都有从创建到销毁的整个过程，这个过程称之为是生命周期：

  • React组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能：

  • 生命周期和生命周期函数的关系：

  • 生命周期 是一个 抽象的概念，在生命周期的整个过程，分成了很多个阶段；

    • 比如装载阶段（Mount)，组件第一次在DOM树中被渲染的过程；
    • 比如更新过程(Update)，组件状态发生变化，重新更新涫染的过程；
    • 比如卸载过程(Unmount)，组件从DOM树中被移除的过程；

  • React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数：

    • 口 比如实现componentDidMount函数：組件己经挂载到DOM上时，就会回调;
    • 口 比如实现componentDidUpdate函数：组件已经发生了更新时，就会回调;
    • 口 比如实现componentwilUnmount函数：组件即将被移除时，就会回调;
    • 口 我们可以在这些回调函数中编写自己的逻辑代码，来完成自己的需求功能；

  • 我们谈到React生命周期时，主要谈的是类的生命周期，因为函数式组件没有生命周期。（后面可以通过hooks模拟生命周期的回调）

生命周期解析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qu6AHfUh-1687143660083)(file:///Volumes/web/0%E9%9D%A2%E8%AF%952023/%E9%A1%B9%E7%9B%AE%E6%88%AA%E5%9B%BE/%E6%88%AA%E5%B1%8F2023-06-15%2012.00.28.png)]

生命周期函数

Constructor

  • 如果不初始化 state或不进行方法绑定，则不需要为React组件实现构造函数。
  • constructor中通常只做两件事；
    • 通过给this.state赋值对象来初始化内部的state；
    • 为事件绑定实例 this；

componentDidMount

  • componentDidMount()会在组件挂载后(插入DOM树中)立即调用；
  • componentDidMount()中通常进行哪些操作呢？
    • 依赖于DOM的操作可以在这里进行；
    • 在此处发送网络请求就是最好的地方；（官方建议）
    • 可以在此处添加一些订阅（会在componentWillUnmount取消订阅）；

componentDidUpdate

  • componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法。
    -口 当组件更新后，可以在此处对 DOM 进行操作；
    -口 如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；
    （例如，当 props 未发生变化时，则不会执行网 络请求）。

componentWillUnmount

  • componentwilUnmount()会在组件卸载及销段之前直接调用。
    • 口在此方法中执行必要的清理操作；
    • 口例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等

不常用的生命周期函数

  • 除了上面介绍的生命周期西数之外，还有一些不常用 的生命周期函数：
    • getDerivedStateFromProps: state 的值在任何时候都依赖于props时使用；该方法返回一个对象来更新state;
    • getSnapshotBeforeUpdate：在React更新DOM之前回调的一个函数，可以获取DOM更新前的一些信息（比如说滚动位買） - - shouldComponentUpdate：该生命周期函数很常用，但是我们等待讲性能优化时再来详细讲解；

组件开发嵌套关系

认识组件的嵌套

  • 组组件之间存在嵌套关系：
    • 口 在之前的案例中，我们只是创建了一个组件App；
    • 口 如果我们一个应用程序将所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护；
    • 口 所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件；
    • 口 再将这些组件组合嵌套在一起，最终形成我们的应用程序;

React 组件间通信

认识组件间的通信

  • 在开发过程中，我们经常会遇到需要组件之间相互通信：
    • 比如：App可能使用了多个Header,每个地方的Header展示的内容不同，那么我们就需要使用者传递给Header一些数据，让其进行展示；
    • 又比如：我们在Main中一次性请求了Banner数据和ProductList数据，那么就需要传递给他们来进行展示；
    • 也可能是子组件中发生了事件，需要由父组件来完成某些操作，那就需要子组件向父组件传递事件；
  • 总之，在一个React项目中，组件之间的通信是非常重要的环节；

父组件传递子组件 - 类组件和函数组件

  • 父组件在展示子组件，可能会传递一些数据给子组件：
    • 父组件通过 属性=值 的形式来传递给子组件数据；
    • 子组件通过 props 参数获取父组件传递过来的数据；

参数propTypes

  • 对于传递给子组件的数据，有时候我们可能希望进行验证，特别是对于大型项目来说：

    • 当然，如果你项目中默认继承了Flow或者TypeScript，那么直接就可以进行类型验证；
    • 但是，即使我们没有使用Flow或者TypeScript，也可以通过 prop-types 库来进行参数验证;
    • 从 React v15.5 开始，React.PropTypes 已移入另一个包中：prop-types 库

  • 更多的验证方式，可以参考官网：https//zh-hans.reactis.org/docs/typeche,king-with-proptypes.htm

    • 口 比如验证数组，并且数组中包含哪些元素；
    • 口 比如验证对象，并且对象中包含哪些key以及value是什么类型；
    • 口 比如某个原生是必须的，使用 requiredFunc: Prop Types.func.isRequired

  • 如果没有传递，我们希望有默认值

    • 使用defaultProps就可以了
ChildCpn.propTypes = {
  name:PropTypes.string,
  age:PropTypes.number,
  height:PropTypes.number
}

子组件传递父组件

  • 某些情况，我们也需要子组件向父组件传递消息：

    • 口 在vue中是通过自定义事件来完成的；
    • 口 在React中同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可。

  • 我们这里来完成一个案例：

    • 口 将计数器案例进行拆解；
    • 口 将按钮封装到子组件中：CounterButton;
    • 口 CounterButton发生点击事件，将内容传递到父组件中，修改counter的值
// 父组件
import React, { Component } from 'react';
import CounterButton from './CounterButton';
import SubCounter from './SubCounter';

class App extends Component {
  constructor() {
    super();
    this.state = {
      counter: 0,
    };
  }
  counterClick(count) {
    this.setState({
      counter: this.state.counter + count,
    });
  }
  render() {
    const { counter } = this.state;
    return (
      

        
05_组件通信-子传父

        
当前计数：{counter}

         this.counterClick(count)}>
         this.counterClick(count)}>
      

    );
  }
}

export default App;

// 子组件
import React, { Component } from 'react';

class CounterButton extends Component {
  addCount(count) {
    this.props.addClick(count);
  }
  render() {
    return (
      

        
        
        
      

    );
  }
}

export default CounterButton;

// 子组件
import React, { Component } from 'react';

class SubCounter extends Component {
  subCount(count) {
    this.props.subClick(count);
  }
  render() {
    return (
      

        
        
        
      

    );
  }
}

export default SubCounter;

组件通信案例

  • tab切换

React 组件插槽用法

React中的插槽(slot)

  • 在开发中，我们抽取了一个组件，但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素。

  • 我们应该让使用者可以决定某一块区域到底存放什么内容。

  • 这种需求在Vue当中有一个固定的做法是通过slot来完成的，React呢？

  • React对于这种需要插槽的情况非常灵活，有两种方案可以实现：

    • 口 组件的 children 子元素；
    • 口 props属性 传递React元素；

children实现插槽

  • 每个组件都可以获取到 props.children：它包含组件的开始标签和结束标签之间的内容。

  • 只传入一个元素时，children就是当前元素

  • 传入多个元素时，children为数组

class App extends Component {
  render() {
    return (
      

        
07_组件的插槽

        
          
          
标题

          
        
      

    );
  }
}

class index extends Component {
  render() {
    const { children } = this.props;
    return (
      

        
{children[0]}

        
{children[1]}

        
{children[2]}

      

    );
  }
}

props实现插槽

  • 通过children实现的方案虽然可行，但是有一个弊端：
    • 通过索引值获取传入的元素很容易出错，不能精准的获取传入的原生；
  • 另外一个种方案就是使用 props 实现：
    • 口 通过具体的属性名，可以让我们在传入和获取时更加的精准
返回2}
  centerSlot={
标题2
}
  rightSlot={}
>

class index extends Component {
  render() {
    const { leftSlot, centerSlot, rightSlot } = this.props;
    return (
      

        
{leftSlot}

        
{centerSlot}

        
{rightSlot}

      

    );
  }
}

作用域插槽

React 非父子通信

Context应用场景

  • 非父子组件数据的共享：

  • 口 在开发中，比较常见的数据传递方式是通过props属性自上而下（由父到子）进行传递。

  • 口 但是对于有一些场景： 比如一些数据需要在多个组件中进行共享（地区偏好、UI主题、用户登录状态、用户信息等）。

  • 口 如果我们在顶层的App中定义这些信息，之后一层层传递下去，那么对于一些中间层不需要数据的组件来说，是一种冗余的操作。

  • 我们实现一个一层层传递的案例：

    • 口 我这边顺便补充一个小的知识点：Spread Attributes

  • 但是，如果层级更多的话，一层层传递是非常麻烦，并且代码是非常冗余的：

    • 口 React提供了一个APl：Contex[https://zh-hans.react.dev/reference/react/useContext];
    • 口 Context 提供了一种 在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递props;
    • 口 Context 设计目的是为了 共享那些对于一个组件树而言是“全局〞的数据，例如：当前认证的用户、主题或首选语言

Context相关API

  • React.createContext

    • 创建一个需要共享的Context对象；
    • 如果一个组件订阅了Context，那么从这个组件会从离自身最近的那个匹配的Provider中读取到当前的context的值；
    • defaultValue是组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值；
    const myContext = React.createContext(defaultValue)

  • Context.Provider

    • 口 每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化：
    • 口 Provider 接收一个 value 属性，传递给消费组件；
    • 一个 Provider 可以和多个消费组件有对应关系；
    • 口 多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据；
    • 口 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染；

  • Class.contextType

    • 口 挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象：
    • 口 这能让你使用 this.context 来消费最近 Context 上的那个值；
    • 口 你可以在任何生命周期中访问到它，包括 render 函数中；
myClass.contextType = myContext;

  • Context.Consumer

    • 口 这里，React 组件也可以订阅到 context 变更。
    • 口 这能让你在函数式组件中完成订阅 context.
    • 口 这里需要函数作为子元素(function as child) 这种做法；
    • 口 这个函数接收当前的 context 值，返回一个 React 节点；

  • 什么时候使用Context.Consumer呢？

    • 口 1.当使用value的组件是一个函数式组件时；
    • 口 2.当组件中需要使用多个Context时；

React 非父子通信 - 事件总线event-bus

npm install hy-event-bus

setState使用详解

为什么使用setState

  • 开发中我们井不能直接通过修改state的值来让界面发生更新：

    • 口 因为我们修改 state 之后，希望 React根据最新的State来渲染组件，但是这种方式的修改React并不知道数据发生变变
    • 口 React井没有实现类似于Vue 中的Object.defineProperty 或者Vue3中的Proxy的的方式来监听数据的交化;
    • 口 我们必须通过 setState 来告知React数据已经发生了交化;

  • ？疑惑：在组件中井没有实现setState的方法，为什么可以调用呢？

    • 口 原因很简单，setState方法是从Component中继承过来的，
  Component.prototype.setState = function (partialState, callback) {
  if (
    typeof partialState !== 'object' &&
    typeof partialState !== 'function' &&
    partialState != null
  ) {
    throw new Error(
      'setState(...): takes an object of state variables to update or a ' +
        'function which returns an object of state variables.',
    );
  }
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

setState的三种用法

    1. setState更多用法
      1. 基本使用
        Object.assign(state,setState) 属性名相同的值会覆盖掉
      changeText() {
  this.setState({
    msg: 'new world!!!',
  });
}

    • 2.setState可以传入一个回调函数

      • 好处： 1. 可以在回调函数中 编写新的 state的逻辑
      • 好处： 2. 当前的回调函数会将之前的state和props传递进来
        this.setState((state, props) => {
    // 1. 编写一些对新的state处理逻辑
    // 2. 可以获取之前的 state和props值
    console.log(state);
    return {
      msg: 'setState传入一个回调函数',
    };
});
      1. setState 在React的事件处理中是一个异步调用
      • 如果希望在数据更新之后（数据合并），获取到对应的结果执行一些逻辑代码，
      • 那么可以在setState中传入第二个参数： callback
      this.setState({ msg: 'new world!!!' }, () => {
  console.log('++++++++', this.state.msg);
});
console.log('---------', this.state.msg);

setState 异步更新

  • setState的更新是异步的？

    • 最终打印结果是hello world；
    • 可见setState是异步的操作，我们并不能在执行完setState之后立马拿到最新的state的结果。
    changeText() {
  this.setState({ msg: 'new world!!!' }, () => {
      console.log('++++++++', this.state.msg); //new world!!!
    });
  console.log('---------', this.state.msg); // hello world
}

  • 为什么 setState 设计成为异步呢？

    • setState 设计为异步，可以 显著的提升性能
      • 如果每次调用 setState 都进行一次更新，那么意味着 render 函数会被频繁调用，界面重新渲染，这样效率很低
      • 最好的办法应该是: 获取到多个更新，之后进行批量更新；
    • 如果同步更新了state，但还是没有执行render函数，那么state和props不能保持更新
      • state和props不能保持一致性，会在开发中产生很多问题

  • 如何获取异步更新的结果？

  • 方式一： setState 的回调

    • setState接收两个参数： 第二个参数是第一个参数的回调函数，这个回调函数会在更新后执行；
    • setState(partialState,callback)

  • 方式二：在生命周期函数

    componentDidUpdate(prevProps, provState, snapshot) {
  console.log(this.state.msg);
}

React 组件化开发 二

React性能优化SCU

React更新机制

  • React渲染流程
    JSX -> 虚拟DOM -> 真实DOM
  • React的更新流程

    • React在props或state发送改变时，会调用React的render方法，会创建一颗不同的树。

    • React如果要基于这两颗不同的树之间的差别来判断如何有效的更新UI

      • 如果一颗树参考另外一颗树进行完全比较更新，那么即使时最先进的算法，该算法的复杂度为O(n^2)，其中n是树中元素的数量；
      • https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf;
      • 如果在 React 中使用了该算法，那么展示 1000 个元素所需要执行的计算将在十亿的量级范围；
      • 这个开销太过昂贵，React 的更新性能就会变得非常低效；

    • 于是，React 对这个算法进行了优化，将其优化成了O(n)，

    • 如何优化？

      • 同层节点之间相互比较，不会垮节点比较；
      • 不同类型的节点，产生不同的树结构；
      • 开发中，可以通过key来指定哪些节点在不同的渲染下保持稳定；

keys的优化

  • 遍历列表时，总会有提示一个警告，让我们加入一个key属性：
  • 方式一：在最后位置插入数据
    • 这种情况，有无key意义不大
  • 方式二：在前面插入数据
    • 这种做法，在没有key的情况下，所有的li都需要进行修改；
  • 当子元素（这里是li）拥有key时，React使用key来匹配原有树上的子元素以及最新树上的子元素：
    • 在下面这种场景下，key为111和222的元素仅仅进行位移，不需要进行任何的修改；
    • 将key为333的元素插入到最前面的位置即可；
  • key的注意事项：
    • key应该是唯一的；
    • key不要使用随机数（随机数在下一次render时，会重新生成一个数字）
    • 使用index作为key，对性能是没有优化的；

render函数被调用

  • 我们之前的一个嵌套案例

    • 在App中，我们增加了一个计数器的代码；
    • 当单击+1时，会重新调用App的render函数；
    • 而当App的render函数被调用时，所有的子组件的render函数都会被重新调用；

  • 在开发中，我们只要修改了App中的数据，所有组件都需要重新rednder，进行diff算法，性能必然很低：

    • 事实上，很多组件没有必要重新render
    • 他们调用render应该有一个前提，就是依赖的数据（state、props）发生改变时，再调用自己的render方法；

  • 如何来控制render方法是否被调用呢？

    • 通过 shouldComponentUpdate 方法即可；

shouldComponentUpdate

  • React 给我们提供了一个生命周期方法 shouldComponentUpdate (很多时候，我们简称为SCU)，这个方法接受参数，并且需要有返回值：
  • 该方法有两个参数：
    • 参数一： nextProps修改之后，最新的props属性
    • 参数二：nextState 修改之后，最新的state属性
  • 该方法返回值是一个boolean类型：
    • 返回值为true，那么就需要调用render方法；
    • 返回值为false，那么就不需要调用render方法；
    • 默认返回的是true，也就是只要state发送改变，就会调用render方法；

PureComponent

  • 如果所有的类，我们都需要手动来实现 shouldComponentUpdate，那么会给开发增加很多的工作量。
    • shouldComponentUpdate中的各种判断目的是：
    • props或者state中的数据是否发生了变化，来决定 shouldComponentUpdate 返回值 是 true或false；
  • 将class继承自 PureComponent

shallowEqual方法

  • shallowEqual浅层比较
  if (ctor.prototype && ctor.prototype.isPureReactComponent) {
    return (
      !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
    );
  }

高阶组件 memo

  • 类组件可以使用 PureComponent，那么函数式组件呢？
    • 事实上，函数式组件，在props没有改变时，也不希望重新渲染DOM树结构
const Profile = memo(function (props) {
  console.log('profile render');
  return (
    

      
Profile:{props.msg}

    

  );
});
export default Profile;

不可变数据的力量

获取DOM方式refs

如何使用Ref

  • 在React开发中，通常情况下不需要、也不建议直接操作原生DOM，但是某些特殊的情况，确实需要获取到DOM进行某些操作：

    • 管理焦点，文本选择或媒体播放 ；
    • 触发强制动画 ；
    • 集成第三方DOM库；
    • 可以通过refs获取DOM

  • ref的类型

    • ref 的值根据节点的类型而有所不同：
      • 口 当ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref接收底层 DOM 元素作为其 current 属性；
      • 口 当ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性；
      • 口 你不能在函数组件上使用 ref 属性，因为他们没有实例；
    • 函数式组件是没有实例的，所以无法通过ref获取他们的实例：
      • 口 但是某些时候，我们可能想要获取函数式组件中的某个DOM元素；
      • 口这个时候我们可以通过 React.forwardRef，后面我们也会学习 hooks 中如何使用ref；

  • React中，获取DOM

      1. 在React元素上绑定一个ref字符串
      1. 提前创建好 ref 对象，createRef(),将创建出来的对象绑定到元素上
      1. 传入一个回调函数，在对应的元素被渲染之后，回调函数被执行，并且将元素传入
  export class App extends PureComponent {
    constructor() {
      super();
      this.state = {};
      this.titleRef = createRef();
      this.titleEl = null;
    }
    getNativeDom() {
      //   1. 在React元素上绑定一个ref字符串
      // console.log(this.refs.why);
      //   2. 提前创建好 ref 对象，createRef(),将创建出来的对象绑定到元素上
      // console.log(this.titleRef.current);
      //   3.传入一个回调函数，在对应的元素被渲染之后，回调函数被执行，并且将元素传入
      console.log(this.titleEl);
    }
    render() {
      return (
        

          
14_ref获取DOM

          
hello world

          
titleRef

          
 (this.titleEl = el)}>传入一个回调函数

          
        

      );
    }
  }
  • React中，获取组件

    • 类组件

      • 提前创建好 ref 对象，createRef(),将创建出来的对象绑定到元素上
      this.hwRef = createRef();
  ......
getComponennt() {
  console.log(this.hwRef.current);
  this.hwRef.current.test();
}

    • 函数式组件

      • ref转发

      • ref不能应用于函数式组件

      • 在开发中，想要获取函数式组件中某个元素的DOM

        • 方式一：直接传入ref属性（❌）
        • 方式二：通过 forwardRef 高阶函数
        const HelloWorldFunc = forwardRef(function (props, ref) {
  return (
    
        
      
        HelloWorldFunc
        
      
        hhh
        
    
        
  );

});

受控和非受控组件

认识受控组件

  • 在React中，HTML表单的处理方式和普通的DOM元素不太一样：
    • 表单元素通常会保存在一些内部的state。
  • 比如：下面的html表单元素
    • 这个处理方是DOM默认处理html表单的行为，在 用户点击提交时提交到某个服务器 中，并且 刷新页面 ；
    • 在 React 中， 并没有禁止这个行为，它依然有效的；
    • 但是，通常情况下会使用JS函数来方便的处理表单提交，同时 还可以访问用户填写的表单数据；
    • 实现这种效果的标准方式是 使用“受控组件”；

受控组件基本演练

  • 在HTML中，表单元素(如：、