代码之家 › 专栏 › 技术社区 › davidatthepark

多次使用同一个React组件时,将其分配给变量是否更有效?

jsx reactjs javascript

davidatthepark · 技术社区 · 6 年前

<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>

是否会呈现和缓存指定的组件?

1 回复 | 直到 6 年前

Felix Kling 6 年前

将上述代码重构为:

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

是否会呈现和缓存指定的组件?

tl;dr(灾难恢复): 不

反应createElement创建元素 基本上返回一个组件“描述符”。此时不会实例化或呈现组件。我们可以很容易地对此进行测试(请注意,构造函数没有控制台输出):

class Foo extends React.Component {
  constructor() {
    super();
    console.log('inside constructor');
  }
 
  render() {
    return 'Foo';
  }
}

const component = <Foo />;

<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>

让我们看看组件描述符:

function Foo({bar}) {
  return <span>{bar}</span>;
}

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

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

你可以看到,所有的 反应createElement创建元素 returns是一个对象,它保存有关要调用哪个函数、要传递的道具和一些元数据信息的信息。

实际渲染稍后进行。

推荐文章