使用react-sketchapp可以将react元素渲染到Sketch,从而将设计文档代码化;使用react-native-web可以将react-native的应用web化,实现跨端。网上已经有比较清楚的介绍文档,所以就不再重复了下面就是它们的官方文档和原理介绍的文档,首先阅读它们,有一个大致的了解后可以审阅一下我的心得,欢迎指教。

  1. react-sketchapp
  2. react-native-web
  3. React - SketchApp 新手上路
  4. 使用react-native-web将你的react-native应用H5化

进行实际开发后我认为这两个库适合用来开发跨端的基础组件。第一,react-sketchapp的确是一种创新的思路,基础组件一般比较通用和规范化,设计文档代码化后的确方便管理和迭代;第二,基础组件通用和规范化的特点也适合做成跨端组件,react-native-web目前只是把大部分组件web化,仍未全部覆盖所以不能满足业务组件丰富多变的要求。如果项目没有跨端要求,仍推荐使用react-sketchapp, 然后将react-native标准的元素组件替换成web的就可以了。

使用react开发主要就是组件的开发。刚开始时把所有元素都放在一个组件里,每个页面就是一个组件;然后发现有多个页面有类似的部分,这些部分可以单独抽取成为一个组件供多个页面共享;再然后发现有些组件和具体的业务无关,可以再抽取出来供多个项目引入。我把这三种组件分别叫做页面组件、业务组件、基础组件,它们的拆分是自然而然的,站在页面、功能、项目等角度时就能意识到拆分的必要性。

还有一种更小粒度的拆分——展示组件和容器组件。简单来说展示组件负责展示页面元素(一般可以认为是无状态组件),容器组件负责跟踪状态。容器组件必须包含有展示组件,通过props通信;展示组件单独使用时只能显示静态页面。

这种拆分方式适合用于redux管理状态时,由于状态被redux统一管理了,所以react开发就分成了展示组件开发、action、reducer、store,容器组件使用了connect()高阶组件。如果不使用redux,这种拆分又显得没有必要,有时候太细的拆分反而拖慢了效率。

基础组件是最通用的组件,可以被多个项目引入,所封装的功能基本和具体业务没有关联,个别有关联的也是已经形成标准的规范化的业务需求。

react-sketchapp用于将代码转化成Sketch 文件,可以说融合了界面设计和前端开发。对react组件来说,丰富多变的页面组件和业务组件显然不适合用react-sketchapp来生成设计,但对通用的基础组件来说,react-sketchapp的优点就能充分发挥出来了。几个项目迭代之后,对我们开发人员而言,留下的最珍贵的就是基础组件,过去我们只能使用文件管理,而使用react-sketchapp将基础组件代码化管理可以规范基础组件设计的迭代过程。

基础组件不能使用redux来管理状态,但仍可以把基础组件拆分为容器组件和展示组件两部分。使用react-sketchapp开发基础组件,生成基础组件的sketch设计稿,所写的代码基本可以认为是展示组件,我们对应再写容器组件包裹它们就行了。

由于react-sketchapp使用的是react native的元素组件,因此react native 项目可以直接引入基于react-sketchapp开发的基础组件,根据react native的特点,意味着一套基础组件可以跨android 和 ios 两端。

这还不够,如果我们还想让这套基础组件使用于 web 端,可以结合 react-native-web , 这个库将react-native的大部分组件用web重构,从而使代码能在web端运行。当然引入这个库的代价是打包后的体积变大了,我们可以结合webpack的分片打包,将react-native-web单独打包提取出来放到cdn上,这样可以减少一些加载时间。