[React组件封装][基础]对于React组件封装的注意点

公众号：程序员波波

接触React也有一段时间了，从刚开始jquery式地去使用React，到慢慢走上正轨，还是经过了不少学习的。

从开发过程中，遇到的组件大概有两类：UI类、工具类。

UI类顾名思义就是能看得到的UI，这些组件一般就是按照需要渲染成相应的样子。

工具类是一类虽然看上去好像什么东西都不渲染，但是却需要写在render中作为组件加载才能使用。（无法通过传统对象或者类方法之类实现）

作为一个组件，一般来说就是纯粹的、受控的、数据驱动的、函数式的。什么数据渲染成什么样子，什么输入一定输出什么结果。所以一般能通过props完成的动作，不需要自己维护state，也不要给外部留接口来使用。（一些工具类组件除外）

所以可能有以下注意点：

1、受控组件。尽量使用props定义组件的状态，通过onChange方法通知外部需要更新props。这样的话props是什么样子，组件一定渲染成什么样子，一些数据也好备份，一些现场也好重现。

2、减少渲染次数。一般来说内部的函数、代码计算，只要不是写得很烂，性能都不是瓶颈，渲染才是很消耗性能的。所以需要尽可能减少渲染次数。一般可以通过使用PureComponent或者自己在shouldComponentUpdate中控制组件的渲染。但是这就会遇到props怎么改变的问题。JS中除了基本数据类型，对象和数组类似于C++中指针一样，改变内存中的内容并不会导致当前变量值的变化，也就是说如果a=b={x: 1}，修改a.x并不会导致a和b不等，a和b都指向同一个对象。所以如果需要改变props，那么至少需要浅拷贝一层，我一般使用ES6中的...，比如a={...b}，然后a.x=y，这样进行修改。当然，更为高级的方式是使用Immutable这种数据结构。

3、样式独立性。在开发过程中，我遇到了好多种样式问题，比如：全局css导致样式冲突；一些组件中css选择器定义的样式优先级高，导致无法通过普通方式覆盖；一些组件需要引入css才能正常使用，使用时经常会忘记引入，但是有前置页面引入，所以有些时候能正常显示，难以发现问题。所以组件在开发的时候尽可能能保持独立，优先考虑一些CSS模块化方案（webpack进行css模块化或者JSS等），自身的样式尽量写在组件内部，不另写css或者外置样式（全局主题除外，当然全局主题也要保证不影响其他第三方组件），修改组件的样式通过props传入（className、style或者各种参数）。