React 元素 VS 组件

分类：React作者：前端柒八九

大家好，我是「柒八九」。

在前面的「前端框架」中，我们从Fiber的实现机制描绘了React在页面渲染和数据处理方面做了的努力。其中有很多源码级别的概念。例如，React-Element/React-Fiber/Current Tree 和 workInProgress Tree等。

我们其实在React_Fiber机制已经讲过React-Element和React-Fiber之间的关系。但是，都是一带而过。

今天，我们来谈谈React-Element/React-Componment/React-Instance之间的区别和联系。

话不多说，开干。

React元素、组件和实例是React中的不同术语，它们密切相关。

假设存在如下的代码：

const App = () => {
  return <p>Hello 789</p>;
};

❝React-Componment就是一个「组件的声明」 ❞

在上面例子中，它是一个函数组件，但它也可以是任何其他类型的React组件（例如React类组件）

在函数组件的情况下，它被声明为一个「JavaScript函数」，返回React的JSX。更复杂的JSX是HTML和JavaScript的「混合体」，但这里我们处理的是一个简单的例子，它只返回一个带有内部内容的HTML元素。

(props) => JSX

我们可以进行组件的嵌套处理。只要我们在另一个组件中把目标组件作为「带角括号的React元素」（例如：<Greeting />）即可。

const Greeting = ({ text }) => {
  return <p>{text}</p>;
};

const App = () => {
  return <Greeting text="Hello 789" />;
};

❝也「可以将一个组件作为「React元素」多次渲染」。 「每当一个组件被渲染成元素时，就会创建一个该组件的实例」。 ❞

const Greeting = ({ text }) => {
  return <p>{text}</p>;
};

const App = () => {
  return (
    <>
+      <Greeting text="Greeting-元素1" />
+      <Greeting text="Greeting-元素2" />
+      <Greeting text="Greeting-元素3" />
    </>
  );
};

❝

  1. React组件被「声明一次」
  2. 但组件可以作为JSX中的React元素被「多次使用」
  3. 当元素被使用时，它就成为该组件的「一个实例」，挂载在React的组件树中

❞

React-Element

继续从一个简单的例子入手:

const App = () => {
  return <p>Hello 789</p>;
};

每当React组件被「调用（渲染）时」，React 在「内部调用」其React.createElement()方法，该方法返回以下对象。

{
   $$typeof: Symbol(react.element)
   "type": "p",
   "key": null,
   "ref": null,
   "props": {
     "children": "Hello 789"
   },
   "_owner": null,
   "_store": {}
}

挑几个重点的属性来解释下：

  • type:代表「实际的HTML元素」
  • props:传递给这个HTML元素的「所有」HTML属性（加上文本内容{Hello 789}，读作：children）

针对上面的<p>元素，没有属性被赋值。然而，React 将 children 视为「伪HTML属性」，而children代表在「HTML标签之间呈现的一切」。

当向<p>HTML元素添加属性时，props中的就会包含对应的信息。

const App = () => {
  return <p className="greet">Hello 789</p>;
};

console.log(App());

{
   $$typeof: Symbol(react.element)
   "type": "p",
   "key": null,
   "ref": null,
   "props": {
     "children": "Hello 789",
     "className": "greet"
   },
   "_owner": null,
   "_store": {}
}

❝本质上，React 除了将所有HTML属性转换成React-props外，还将「内部内容」添加为children属性。 ❞

如前所述，React 的createElement()方法是内部调用的。因此，我们可以用它来替代返回的JSX。React的createElement方法需要一个type、props和children作为参数。

  • HTML标签p作为「第一个参数」
  • 「第二个参数」--props 用一个带有className的对象填充
  • children作为「第三个参数」 
const App = () => {
  // return <p className="greet">Hello 789</p>;
  return React.createElement(
    'p',
    { className: 'greet' },
    'Hello 789'
  );
};

该方法的调用并没有1:1地反映出返回的对象，其中「children 元素是props对象的一部分」。我们可以直接将children作为第二个参数props中的属性。

const App = () => {
  // return <p className="greet">Hello 789</p>;
  return React.createElement(
    'p',
    {
      className: 'greet',
      children: 'Hello 789'
    }
  );
};

「默认情况下，children是作为第三个参数使用的」。

下面的例子显示了一个React组件，它将HTML树渲染成JSX，并通过React的createElement()方法转化为React元素。

const App = () => {
  return (
    <div className="container">
      <p className="greet">Hello 789</p>
      <p className="info">你好!</p>
    </div>
  );
};

console.log(App());

{
   $$typeof: Symbol(react.element)
   "type": "div",
   "key": null,
   "ref": null,
   "props": {
     "className": "container",
     "children": [
       {
         $$typeof: Symbol(react.element)
         "type": "p",
         "key": null,
         "ref": null,
         "props": {
           "className": "greet",
           "children": "Hello 789"
         },
         "_owner": null,
         "_store": {}
       },
       {
         $$typeof: Symbol(react.element)
         "type": "p",
         "key": null,
         "ref": null,
         "props": {
           className: "info",
           children: "你好!"
         },
         "_owner": null,
         "_store": {}
       }
     ]
   },
   "_owner": null,
   "_store": {}
}

❝「在内部，所有的JSX被React的createElement()方法转换」。 ❞

所以，我们在使用JSX的地方，都可以用createElement()进行同等效果替换。

const App = () => {
  // return (
  //   <div className="container">
  //     <p className="greet">Hello 789</p>
  //     <p className="info">你好!</p>
  //   </div>
  // );

  return React.createElement(
    'div',
    {
      className: 'container',
    },
    [
      React.createElement(
        'p',
        { className: 'greet' },
        'Hello 789'
      ),
      React.createElement(
        'p',
        { className: 'info' },
        '你好!'
      ),
    ]
  );
};

同时，我们还可以对上述的代码进行组件的封装和抽离。将用于显示的信息，封装成Text组件。并且，在同样的位置，进行组件调用。

const Text = ({ className, children }) => {
  return <p className={className}>{children}</p>;
};

const App = () => {
  return (
    <div className="container">
      <Text className="greet">Hello 789</Text>
      <Text className="info">你好!</Text>
    </div>
  );
};

然后，将用JSX的实现准换为用createElement实现，代码如下：

const Text = ({ className, children }) => {
  return <p className={className}>{children}</p>;
};

const App = () => {
  // return (
  //   <div className="container">
  //     <Text className="greet">Hello 789</Text>
  //     <Text className="info">你好!</Text>
  //   </div>
  // );

  return React.createElement(
    'div',
    {
      className: 'container',
    },
    [
      React.createElement(
        Text,
        { className: 'greet' },
        'Hello 789'
      ),
      React.createElement(
        Text,
        { className: 'info' },
        '你好!'
      ),
    ]
  );
};

虽然，使用createElement()能达到与JSX同等的效果，但是在一般情况下，我们不推荐。

但是，但是，但是，在有些场景下，利用createElement(),可以达到很好的效果。

在前面的文章中，我们介绍了关键渲染路径,其中针对React的项目中，我们可以使用React.lazy()在「页面加载阶段」，对代码进行分割处理。而在「页面运行阶段」，可以使用import()来做按需处理。

而在工程化之webpack打包过程中我们介绍到，「一个动态导入（即import()函数）会产生一个新的子ChunkGroup」，从而能够对业务逻辑进行分割处理。

这里我们举一个比较简单的例子。在React的项目开发中，我们进行弹窗的处理。

比较常规的处理方式

import React,{ FC, useState } from 'react';
import TestModal from './TestModal';
type TTest = React.PropsWithChildren<{ 
  
}>
const Test:FC<TTest> = ({}) => {
    const [visible,setVisible] = useState(false);
    return (
        <div >
            <button onClick={() => setVisible(true)}></button>
            {visible 
            && <TestModal handleCancelCB={() => setVisible(false) }/>}
        </div>
    )
}

export default Test;

有关键的几步

  1. 页面同步引入资源(import)
  2. 在调用处，需要一个变量(visible)来控制TestModal显隐
  3. 将() => setVisible(false)传入到TestModal中，用于控制一堆操作后，将弹窗进行隐藏处理

利用import()处理

import React,{ FC, ReactNode, useState } from 'react';
type TTest = React.PropsWithChildren<{ 
  
}>
const Test:FC<TTest> = ({}) => {
    const [TestModal,setTestModal] = useState<ReactNode|null>(null);
    const triggerModalShow = async () => {
        const module = await import(/* webpackChunkName: "TestModal" */ './QRCodeModal')
        const TestModal = module.default;
        const instance = React.createElement(TestModal,{
            handleCancelCB:()=>setTestModal(null),
         })
         
         setTestModal(instance);
    }
    return (
        <div >
            <button onClick={() => triggerModalShow()}></button>
            {TestModal}
        </div>
    )
}

export default Test;

这种处理方式，虽然看起来，代码量增多了，但是有几个好处

  1. 利用import()实现了按需加载，在代码运行阶段，减少了非关键的资源的加载
  2. 逻辑相对集中，相当于针对Modal的所有处理，都被限制在triggerModalShow中了
  3. 页面结构相对简介，在return不需要if/else或者三元进行代码逻辑的处理

由于例子比较简介，import()的代码看起来比常规方式多，但是，一个真正的逻辑复杂的弹窗需要更多的参数，到时候就会看到使用import()的好处了。---自我感觉，这种处理方式，还是值得一试。

调用函数组件会发生啥？

调用React函数组件与将其作为React元素的实际区别是什么？在前面的介绍中，我们「调用」函数组件，在React内部 调用createElement()方法返回函数组件。当把它作为React元素使用时，其输出有什么不同。

const App = () => {
  return <p>Hello 789</p>;
};

+ console.log(App());
 {
   $$typeof: Symbol(react.element),
+  "type": "p",
   "key": null,
   "ref": null,
   "props": {
     "children": "Hello 789"
   },
   "_owner": null,
   "_store": {}
}

+ console.log(<App />);
 {
   $$typeof: Symbol(react.element),
+  "type": () => {…},
   "key": null,
   "ref": null,
   "props": {},
   "_owner": null,
   "_store": {}
}

App()/<App />输出略有不同。

❝当使用React组件作为元素，type属性变成了一个「函数」，其中包含了所有函数组件的实现细节（例如，children、hooks）。 ❞

props 是被传递给组件的所有属性。代码如下：

console.log(<App className="greet" />);
 {
   $$typeof: Symbol(react.element),
   "key": null,
   "ref": null,
   "props": {
       "className": "greet"
   },
   "type": () => {…},
   "_owner": null,
   "_store": {}
 }

对于一个真正的React应用来说，type变成了一个函数，而不再是一个字符串，这意味着什么？让我们通过一个例子来看看这个问题，它展示了为什么「我们不应该调用React函数组件」。

首先，我们通过使用<>，按原意使用组件。

const Counter = ({ initialCount }) => {
  const [count, setCount] = React.useState(initialCount);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>

      <div>{count}</div>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Counter initialCount={42} />
    </div>
  );
};

此时，针对Counter，使用函数调用(Counter())和将其作为元素(<Counter />)效果是一样的。

const App = () => {
  return (
    <div>
      {Counter({ initialCount: 42 })}
    </div>
  );
};

让我们再看一个例子，就会发现，不应该调用React函数组件用于渲染页面内容。我们将对渲染的子组件使用「条件渲染」，可以通过点击按钮来切换。

const App = () => {
  const [isVisible, setVisible] = React.useState(true);

  return (
    <div>
      <button 
        onClick={() => setVisible(!isVisible)}
      >
        切换
      </button>

      {isVisible 
        ? Counter({ initialCount: 42 }) 
        : null
      }
    </div>
  );
};

当我们将子组件切换为不可见时，我们得到一个「错误提示」：Uncaught Error: Rendered fewer hooks than expected。这个错误，在使用hook的时候，一不小心就会出现。原因是，组件中的hook数量和上一次不一致了。

出错原因我们知道了，但是我们按照我们代码的意愿来分析。首先hook被分配在子组件中（Counter），这意味着如果子组件被卸载，hook应该被移除而不会有任何错误。只有当一个被挂载的组件改变了它的 hook 的数量（App），它才会崩溃。

但确实它崩溃了，因为一个被挂载的组件（App）改变了它的hook数量。因为我们是「以函数的形式调用子组件（Counter），React并没有把它当作React组件的一个实例」。相反，它只是将子组件的所有实现细节（如hook）直接放在其父组件中。

在App中触发了条件渲染，部分代码变的不可见了。但是，在这部分代码中，存在hook的使用。进而触发了hook的减少。最终结果就是React应用由于hook减少而挂掉了。

将上面调用组件的方式用另外一种代码来实现。它们是等价的。

const App = () => {
  const [isVisible, setVisible] = React.useState(true);

  return (
    <div>
      <button 
        onClick={() => setVisible(!isVisible)}
      >
        切换
      </button>

      {isVisible
        ? (() => {
            const [count, setCount] = React.useState(42);

            return (
              <div>
                <button onClick={() => setCount(count + 1)}>
                  +
                </button>
                <button onClick={() => setCount(count - 1)}>
                  -
                </button>

                <div>{count}</div>
              </div>
            );
          })()
        : null
      }
    </div>
  );
};

❝这违反了hook的规则，Hook必须在组件的「顶层」作用域调用 ❞

我们可以通过告诉React这个React组件来解决这个错误，作为回报，React会被当作一个实际的组件实例。然后它就可以在这个组件的实例中分配实现细节了。当有条件的渲染开始时，该组件就会取消挂载，并随之取消其实现细节（如钩子）。

为了解决上面的问题，我们就需要换一种处理方式，用函数组件(Counter)的「实例」替换函数调用。我们上面讲过，经过JSX处理后组件，会生成对应组件的实例。

const App = () => {
  const [isVisible, setVisible] = React.useState(true);

  return (
    <div>
      <button onClick={() => setVisible(!isVisible)}>
        切换
      </button>

      {isVisible 
+        ? <Counter initialCount={42} /> 
        : null
      }
    </div>
  );
};

❝每个组件实例都会将组件内部实现封存起来，而不会泄漏给其他组件。 ❞

因此在利用组件来处理各种封装和业务逻辑时，「使用React元素而不是在JSX中调用一个函数组件」。

React-Element VS React-Component

让我们总结一下React-Element和React-Component之间的关系。

❝React-Component是一个组件的「一次性声明」，但它可以作为JSX中的React-Element使用一次或多次。 也就是说 React-Component 和 React-Element 是「1对多」的关系 ❞

在JSX中，它可以使用<>，然而，在React底层实现中，React调用createElement方法，为每个HTML元素创建React-Element。

const Text = ({ children }) => {
  console.log('Text作为实例被调用');

  return <p>{children}</p>;
};

console.log('此时Text为组件',Text );

const App = () => {
  console.log('App作为实例被调用');

  const paragraphOne = <p>Hello 789!</p>;
  const paragraphTwo = <Text>React</Text>;

  console.log('此时是React-Element:', paragraphOne);
  console.log('此时是React-Element:', paragraphTwo);

  return (
    <div>
      <p>Hello React</p>
      {paragraphOne}
      {paragraphTwo}
    </div>
  );
};

console.log('此时是React-Component', App);
console.log('此时是React-Element', <App />);
console.log('此时是React-Element', <p>too</p>);

后记

「分享是一种态度」。

参考资料：

原文地址：https://cloud.tencent.com/developer/article/2081821

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

HTML

相关推荐

react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如果组件之中有复用的代码，需要重新创建一个父类，父类中存储公共代码，返回子类，同时把公用属性...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 re...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层，一个是调...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使用，可能是不了解。我公司的项目就没有使用，但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接触 react 就一直使用 mobx 库，上手简单不复杂。
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。但是对于大量的列表渲染，特别像有实时数据...
react 学习(六) 函数组件实例及类组件生命周期
本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们...
mini react-window(二) 实现可知变化高度虚拟列表
上一小节我们了解了固定高度的滚动列表实现，因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到，这种场景也适合我们常见的大部分场景，例如...
react 学习(五) 完善 setState 及实现 ref
上一小节我们处理了 setState 的批量更新机制，但是我们有两个遗漏点，一个是源码中的 setState 可以传入函数，同时 setState 可以传入第二...
react 学习13实现 PureComponent
我们知道 react 进行页面渲染或者刷新的时候，会从根节点到子节点全部执行一遍，即使子组件中没有状态的改变，也会执行。这就造成了性能不必要的浪费。之前我们了解...
react学习(十) React 中的 context
在平时工作中的某些场景下，你可能想在整个组件树中传递数据，但却不想手动地通过 props 属性在每一层传递属性，contextAPI 应用而生。
react 学习(一) 实现简版虚拟 dom 和挂载
楼主最近入职新单位了，恰好新单位使用的技术栈是 react，因为之前一直进行的是 vue2/vue3 和小程序开发，对于这些技术栈实现机制也有一些了解，最少面试...
react 学习(三) 组件更新
我们上一节了了解了函数式组件和类组件的处理方式，本质就是处理基于 babel 处理后的 type 类型，最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
react学习(八) diff 算法实现
前面几节我们学习了解了 react 的渲染机制和生命周期，本节我们正式进入基本面试必考的核心地带 -- diff 算法，了解如何优化和复用 dom 操作的，还有...
react学习(九) React 新的生命周期
我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安...
react 学习14实现 React.memo
上一小节我们学习了 react 中类组件的优化方式，对于 hooks 为主流的函数式编程，react 也提供了优化方式 memo 方法，本小节我们来了解下它的用...
细聊Concent & Recoil , 探索react数据流的新开发模式
开源不易，感谢你的支持，❤ star me if you like concent ^_^
使用hel-micro制作远程antd、tdesign-react
hel-micro，模块联邦sdk化，免构建、热更新、工具链无关的微模块方案 ，欢迎关注与了解
setup vs 5 react hooks,助你避开"沟"中陷阱
本文主题围绕concent的setup和react的五把钩子来展开，既然提到了setup就离不开composition api这个关键词，准确的说setup是由...
setState 同步 与异步
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot