如今 React 被广泛应用在各类应用上,直观的编程方式,易学易用的工具链,丰富的生态等等优点被大家所钟爱.

 

相信你已经熟悉 React 的用法和相关的开发工具,本文就不赘述 React 用法、特性等,换种思路,分享一下几个月前开发的组件 autoresponsive-react 过程中的几点心得体会.想熟悉 React 用法推荐看阮一峰老师写的 React 入门实例教程.

 

确定要解决的问题

 

组件开发首要清晰的是,我们要解决什么问题?

 

我们一直在尝试解决 Web 布局问题.自动化布局 一定程度上可以降低开发成本.首先我们要做到自然和直观的使用体验,同时减少布局上的约束条件.除此之外,用户对于布局的元素还可能会有条件排序,图文混排,自然流,动画等很多自定义需求.欣喜的是,React 去DOM化 的开发思路很适合完成这样的事,而且使用组件时直接嵌套一个标签即可.

 

...

 

render() {

 

  return (

 

    <AutoResponsive>

 

        <Something />

 

    </AutoResponsive>

 

  );

 

}

 

...

 

示例一目了然

 

给使用者一目了然的示例,便于用户加深印象,最好有互动示例

 

使用者或其他开发者对组件的第一印象就是我们提供的示例,我们提供最基本的排序和布局范例,如下图(点击查看动图):

 

如果有需要,可以提供更加形象和例子(动图):

 

也可访问相关链接:

 

home live demo

 

responsive example

 

提供简明的文档

 

文档个人认为内容不要太多,基本的 API 和生命周期描述就够了,尽量减少初始化配置相关的描述,避免使用者压力太大

 

推荐提供一份英文文档很有必要,国外的 React 开发者相对要多,如果只有中文文档,国外用户会很麻烦.

 

提取核心算法,实现多端支持

 

于开发者来说,多端支持的理想方式是 “write once, run anywhere.”,然RN发布的理念却是 “learn once, write anywhere.”,理念差距蛮大.”write once” 当然也能够在工程上加以实现,这要依据工程化的必要性、使用场景和投入产出等多方面促成原因.

 

要实现多端支持,首先要对核心算法进行提取,我们将其提取为 autoresponsive-common.这样做利于工程无关的多向扩展,也利于后面对算法进行定制从而进一步开放.

 

这样之后,autoresponsive-react-native 就成为了 autoresponsive-react 的一致性实现.

 

从代码结构上看,初始化和渲染部分几近相同.