由另一個 function 組件渲染一個 JSX 部件 - reactJS

Question

我有一個像這樣的 function 組件

function myMainComponent() {

const MyUIA() {
 //some calulations about attrs
 return (<div><ComponentA {...attrs}></div>)
}

const MyUIB() {
 //some calulations about attrs
 return (<div><ComponentA {...attrs}></div>)
}

// Way A
/*
return (
<div>
  <MyUIA/>
  <MyUIB/>
</div>);
*/

// Way B
return (
<div>
  {MyUIA()}
  {MyUIB()}
</div>);


}

WayA 和 WayB 渲染的結果是一樣的，但是第一種情況有閃爍

1. 那么為什么 WayB 的性能更好而沒有閃爍呢？
2. 渲染同一 function 組件中存在的部分渲染的最佳方法是什么？
3. WayA 和 WayB 是否有特定的名稱，例如“通過調用本機方法渲染”和“通過調用 JSX 方法渲染”？

Answer 1

因為我們知道我們在 react 中編寫的每個代碼都會首先轉換為 JSX，然后才會被渲染，所以如果我們看到原生方法的 JSX 元素被創建了兩次，而 JSX 的元素只創建了一次。 所以這是可以看到閃爍的情況。 我希望它有所幫助。

function myMainComponent() { 
    const MyUIA = () => {
       return /*#__PURE__*/React.createElement("div", null,/*#__PURE__*/React.createElement(ComponentA, null)); };

     const MyUIB = () => {
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ComponentA, null));}; 
      
      // Way A
       return /*#__PURE__*/React.createElement("div", null, 
              /*#__PURE__*/React.createElement(MyUIA, null), 
              /*#__PURE__*/React.createElement(MyUIB, null)); 
      
      // Way B
      return /*#__PURE__*/React.createElement("div", null, MyUIA(), MyUIB());
}

Answer 2

這可能與您的問題無關，但它是所有反應用戶的一般提示，反應組件最多只能有 1 個返回語句