React 的优势与不足

优势

virtual dom虚拟DOM概念

react引入了虚拟DOM的概念,他并不直接对浏览器的DOM进行操作,这样做的优势在于减少了对于DOM的操作,提高了浏览器的渲染性能。

对于小型项目而言,表面上看不出react虚拟DOM的优势,但是对于复杂的大型项目优势就很明显。由此便出现了数据驱动UI。

数据驱动UI的模式

对于习惯了经典的操作浏览器DOM的前端人员来说,数据驱动UI可能是难以理解的,对于习惯了React编程的人员来说,渲染不同的UI界面只需要考虑给React传入不同的数据,这相对于最直接操作DOM来说可能是间接的,但是对于虚拟DOM来说,这个是非常必要的,但是事实上并不是所有的DOM操作都可以用虚拟DOM来解决,因此直接操作DOM是必不可少的。

数据驱动与DOM操作并存的模式

React在提出虚拟DOM后,针对操作数据无法解决的问题,依然支持直接的操作DOM,这对于React的使用者而言,如何减少直接操作DOM,是一个需要考虑的问题。

对于React而言,不同的数据是渲染不同UI的基础。

自上而下的单向数据流

React采用的是单项数据流模式,这样做的好处是所有的变化都是可预估、可控制的。不同于双向绑定的数据模式那样,变化一旦复杂起来,大家互相触发变化,到最后一个地方变了,你根本猜不出来她还会导致其他什么地方跟着一起变。因此,这种数据模式的优势显而易见。

但是,针对不同的、非祖先与后代关系的组件来说,可能有时候某些数据需要互通,React针对这种情况,提供了可跨组件传输数据的模式。

跨组件的数据传输模式 createContext

对于需要数据互通的各个组件,React提供了相应的API,将需要互通的数据包裹其中,在其他的组件进行导入、应用,便能实现不同组件的数据互通。