这类事情有什么缺点吗：
render() {
return (
<div className={"the-page"}>
<div className="left-col">
{this.renderLeftColumnBoringStuff()}
</div>
<div className="main-panel">
<ExitingPanel stuff={this.state.stuff_that_changes}/>
</div>
</div> )};
renderLeftBoringStuff = () => (
<div className="left-column">
button className="btn s primary" onClick={this.setExploreMode}>
{_("Explore")}
</button>
(etc ... more of these)
</div>
);
其动机是页面的结构在这种布局中是清晰的，无聊的东西不需要功能组件，它没有道具，不需要重新渲染——它只是按钮和静态布局，可以单独描述。
我在做这件事，我在问自己"你为什么不把它变成一个纯粹的组件？"我在回答"因为即使这样，重构一些无聊的定义性东西似乎也很沉重"。
问题是，无聊的东西引用了当前组件上的函数，这些函数是在按下其中的按钮时调用的，所以将这些函数传递到子组件中是很容易的。
从下面的评论中，我认为这个问题也可以这样看待：
内联、函数中的因子外因子或组件中的因子内因子外因子有什么不同？我想我理解，如果涉及道具和状态，那么一个单独的组件可以独立渲染，这可能是一件好事。这给我留下了一个问题："如果没有呢？">
(这个问题是关于在形成对此的意见时，而不是在自己寻找意见时，是否存在我可能不理解的技术缺点。)
除了测试、类的大小和性能上的一些差异之外，没有什么实际的区别。如果提取到方法中的部分体积庞大，则类的大小不会减小，并且很难读取和维护。在分离中测试一个零件可能是值得的。性能差异不大(组件提供的抽象层有一些开销)，但除非另有证明，否则通常可以忽略；当一个零件被提取为功能组件时，也可以出于优化目的直接调用它。
另一个考虑因素是，随着React钩子的引入，功能组件正在成为普遍的选择。为了统一性，将一个巨大的类重构为函数组件将导致一个可能更难维护的巨大函数。
组件更适合单独的单元测试，尤其是使用Enzymeshallow渲染器。如果一个零件应该被重用，那么将其提取到一个组件中是一个很好的做法，无论其大小和复杂性如何。
在这个例子中，renderLeftBoringStuff是一个小而简单的视图，它不会从单独测试中受益。另一方面，由于它的大小，它并没有从render中提取出来。
根据经验，如果一个零件足够大和复杂，因此它当然值得提取到一个方法中，那么它可能会从成为一个组件中受益更多。