React进阶篇——十三、高阶组件注意事项

十三、注意事项

• 为了在开发和调试阶段更好的区别包装了不同组件的高阶组件，需要对高阶组件的显示名称做自定义处理。常用的处理方法是，把被包装组件的显示名称也包到高阶组件的显示名称中。

 

• 不要在组件的render方法中使用高阶组件，尽量也不要在组件的其他生命周期方法中使用高阶组件。因为调用高阶组件，每次都会返回一个新组件，于是每次render，前一次高阶组件创建的组件都会被卸载，然后又重新挂载本次创建的新组件，既影响效率，又丢失组件及其子组件的状态。所以，高阶组件最适合使用的地方是在组件定义的外部，这样就不会受到组件生命周期的影响。

 

• 如果需要使用被包装组件的静态方法，那么必须手动复制这些静态方法。因为高阶组件返回的新组件不包含被包装组件的静态方法。

 

• refs不会被传递给被包装组件。尽管在定义高阶组件时，我们会把所有的属性都传递给被包装组件，但是ref并不会传递给被包装组件。如果在高阶组件的返回组件中定义了ref，那么它指向的是这个返回的新组件，而不是内部被包装的组件。如果希望获取被包装组件的引用，那么可以自定义一个属性，属性的值是一个函数，传递给被包装组件的ref。

 

• 与父组件的区别。高阶组件是一个函数，关注的是逻辑，父组件是一个组件，关注的是UI/DOM。如果逻辑是与DOM直接相关的，那么这部分逻辑适合放到父组件中；如果不直接相关，那么这部分逻辑适合使用高阶组件抽象，如数据请求。请求发送等。