Javascript 反应功能或对象

我想知道预定义一些JSX并在不同组件中多次使用它是否合适

const saveButton = 
  <div class="u-mth u-textRight">
    <Button variant="flatBlue">Save</Button>
  </div>;

const test = <div>{saveButton}</div>;

const saveButton=
拯救
;
const test={saveButton}；

与正常功能组件相比，是否有任何缺点

export const SaveButton = () => (
  <div class="u-mth u-textRight">
    <Button variant="flatBlue">Save</Button>
  </div>
);

const test = <div> <SaveButton /> </div>

export const SaveButton=（）=>(
拯救
);
常数测试=

那么这一款如何，而不是功能性的react道具：

const saveButton = (text: string) => (
  <div class="u-mth u-textRight">
    <Button variant="flatBlue">{text}</Button>
  </div>
);

const test = <div> {saveButton(text)} </div>;

const saveButton=（文本：字符串）=>(
{text}
);
const test={saveButton（text）}；

React组件（代码段2）将显示为React devtools中的

…

，而其他选项不会显示

React组件（代码片段2）通常是这样做的。如果组件需要公开动态行为，则应将参数作为道具传递：

const SaveButton = ({ text }) => (
  <div class="u-mth u-textRight">
    <Button variant="flatBlue">{text}</Button>
  </div>
);

const SaveButton=（{text}）=>(
{text}
);

及

助手函数（代码片段3）是通过直接调用React组件来提高其性能的方法。除非另有证明，否则可将其视为初步优化

---

只要元素层次结构不公开动态行为，在正常情况下，将React元素定义为变量（代码片段1）就没有缺点。如果将来可能需要动态行为（自定义或本地化文本），则需要重构。

第一个只是jsx，它不是一个组件

第二个是无状态组件，这也很好，但您没有使用任何道具

第三个也是一个功能，而不是一个组件，因为您没有使用道具。我会按照@estus在回答中的建议做

但也请看这篇文章，它说你们的方法实际上更快

它只是声明变量。没有别的了。在本例中，使用ES6和JSX

这和1是一样的。就像功能一样。此函数返回在1下声明的内容。使用ES6。没有缺点

与2相同。使用arguments对象，实际使用ES6和类型脚本将参数传递给函数

功能保存按钮（道具）{
返回
{props.text}
;
}
常量元素=；
ReactDOM.render(
元素，
document.getElementById（'root'））
);

---

这是使用道具和纯功能的方式

多次使用第一个应该很好。第二个是函数。

<SaveButton text={text} />