高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux、Relay等)中都有高阶组件的身影。由于遵循了装饰者模式的设计思想,因此不会入侵传递进来的原组件,而是对其进行抽象、包装和拓展,改变原组件的行为(图9形象的表达出了高阶组件的作用)。这样不仅增强了组件的复用性和灵活性,还保持了组件的易用性。灵活使用高阶组件,可大大提高代码质量。
由于React推崇组件模式,因此会要求HTML、CSS和JavaScript混合在一起,虽然这与过去的关注点分离正好相反,但是更有利于组件之间的隔离。React已将HTML用JSX封装,而对CSS只进行了较弱的封装,仅仅给出了基本的样式设置。不过,好在第三方库提供了CSS in JS的解决方案,让开发者能更高效的书写组件的样式,促进CSS工程化的发展。