前端小魔女

V1

2022/07/19阅读:24主题:蔷薇紫

React 元素 VS 组件

并不是所有的问题都会有正确而完美的答案,对于那些没有明确答案的问题不必穷究到底,我们需要寻找的,是在当下条件允许的情况下,一个能够解决问题的足够好的答案。
但求够好,不求最好

大家好,我是柒八九

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

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

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

话不多说,开干。


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

假设存在如下的代码:

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

React-Componment就是一个组件的声明

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

函数组件的情况下,它被声明为一个JavaScript函数,返回ReactJSX。更复杂的JSXHTMLJavaScript混合体,但这里我们处理的是一个简单的例子,它只返回一个带有内部内容的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()方法,该方法返回以下对象。

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

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

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

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

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

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

console.log(App());

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

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

如前所述,ReactcreateElement()方法是内部调用的。因此,我们可以用它来替代返回的JSXReactcreateElement方法需要一个typepropschildren作为参数。

  • 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,并通过ReactcreateElement()方法转化为React元素

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

  );
};

console.log(App());

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

在内部,所有的JSXReactcreateElement()方法转换

所以,我们在使用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属性变成了一个函数,其中包含了所有函数组件的实现细节(例如,childrenhooks)。

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

console.log(<App className="greet" />);
 {
   $$typeofSymbol(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-ElementReact-Component之间的关系。

React-Component是一个组件的一次性声明,但它可以作为JSX中的React-Element使用一次或多次。
也就是说 React-ComponentReact-Element1对多的关系

在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>);

后记

分享是一种态度

参考资料:

全文完,既然看到这里了,如果觉得不错,随手点个赞和“在看”吧。

分类:

前端

标签:

React.js

作者介绍

前端小魔女
V1