React组件具有很强的灵活性和功能性。 在JS.COACH上有很多组件库可供使用，但随着时间的增长组件会变得非常臃肿。
与任何其他类型的编程一样，遵守单一原则不仅使您的组件更易于维护，而且还可以实现更多的复用。 但是，确定如何分离大型React组件的职责并不是很容易的。 这里有三种技巧让你从简单到复杂的方式学会拆分组件。
拆分render()
这是使用最多的，也是最简单的方式：当组件呈现太多元素时，将这些元素拆分为逻辑子组件。
拆分render() 是一个常见且快速的方式，是在同一个class中创建其他“子组件”方式：
class Test extends React.Component {
renderItem() {
// ...
}
renderHeader() {
// ...
}
render() {
return (
<View>
{this.renderItem()}
{this.renderHeader()}
</View>
);
}
}
虽然上面的方法也可以，但它不是真正的分解组件。页面中的state, props, 和类方法仍然是共享的，因为还是很难确定哪个“子组件”使用哪些方法。
无状态组件
要真正降低复杂度，应该创建全新的组件。对于更简单的子组件，功能组件可以使用以下的方式创建，也就是无状态组件，用来保证低耦合：
const TestItem = (props) => (
// ...
);
const TestHeader = (props) => (
// ...
);
class Test extends React.Component {
render() {
return (
<View>
// Nice and explicit about which props are used
<TestItem title={this.props.title}/>
<TestHeader title={this.props.title}/>
</View>
);
}
}
通过这种方式拆分，有一个重要的差异。使用无状态组件替代直接的函数调用，可以为React生成较小的单元。通过使用浅渲染来轻松隔离这些单元进行独立测试。
而对于性能来说，这样做会更好，因为较小的单元将更有效的执行渲染。
创建独立的React组件
如果组件由于多种属性或者变化而变得复杂，可以考虑将组件拆分成具有一个多个公开属性的模板组件。这样可以让父组件更专注于数据传递，将逻辑层放在子组件中。单独的组件维护各自的生命周期。
例如：在开发过程中，某些子组件可能会有不同的操作或者加载不同的数据，利用React中的props来传递参数，通过参数来控制子组件的样式。
class TestItem extends React.Component {
static propTypes = {
title: PropTypes.string,
press: PropTypes.func,
};
render() {
return (
<View>
<Text>{this.props.title}</Text>
<Button onPress={this.props.press} title='点击我' />
</View>
);
}
}
主组件可以独立负责数据传递或者action操作。
class Test extends React.Component {
render() {
return <TestItem title={'我是标题'}
press={()=>{alert('我是点击事件')} />;
}
}
在JSX中，组件的开始和结束标签之间的任何东西都可以作为特殊的子组件传递。当正确使用时，都可以表现出来。
高阶组件
高阶组件展示了React的强大的组合性质。通常用于React库，例如react-redux，styled-components和react-intl。 毕这些库都是解决任何React应用程序的通用方面。
结语
React的设计模式是高度可组合组件化。 通过分解和组合它们，可以解决很多问题。不要为了麻烦去讨厌创建子组件，起初可能会感觉很麻烦，但最终会发现程序的性能和组件的可复用性都会有很大的提高。
网友评论