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

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

jsx reactjs javascript

davidatthepark · 技术社区 · 8 年前

<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 回复 | 直到 8 年前

Felix Kling 8 年前

将上述代码重构为:

理论上是的,因为你在打电话 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是一个对象,它保存有关要调用哪个函数、要传递的道具和一些元数据信息的信息。

实际渲染稍后进行。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前