Question

<div>
  <SomeComponentWithProps propA={'some prop'} propB={'some other prop'} >
  <SomeComponentWithProps propA={'some prop'} propB={'some other prop'} >
</div>

将上述代码重构为以下代码是否有性能优势：

const someComponent = <SomeComponentWithProps propA={'some prop'} propB={'some other prop'} >
<div>
   {someComponent}
   {someComponent}
</div>

是否会渲染和缓存指定的组件？

Answer 1

将上述代码重构为以下代码是否有性能优势：

理论上是的，因为你只打了一次React.createElement。但是，它是否会在您的应用程序中产生显着差异是另一个问题。很可能不是。

是否会渲染和缓存指定的组件？

tl; dr：否。

React.createElement基本上返回一个组件＆＃34;描述符＆＃34;。该组件未在该点实例化或呈现。我们可以轻松地测试它（注意构造函数没有控制台输出）：

＆＃13;

class Foo extends React.Component {
  constructor() {
    super();
    console.log('inside constructor');
  }
 
  render() {
    return 'Foo';
  }
}

const component = <Foo />;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

让我们看一下组件描述符：

＆＃13;

function Foo({bar}) {
  return <span>{bar}</span>;
}

console.log(<Foo bar={42} />);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

你可以看到，所有React.createElement返回都是一个对象，它包含要调用的函数，要传递的道具和一些元数据信息的信息。

实际渲染会在稍后进行。

多次使用相同的React组件时，将其分配给变量是否更高效？

1 个答案: