基于React开发范式的思考:写在Lesx发布之际

前端之家收集整理的这篇文章主要介绍了基于React开发范式的思考:写在Lesx发布之际前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

例子:lesx-example
webpack loader: lesx-loader

一些背景

现在前端框架已经呈现出React、Angular、Vue三足鼎立的局势,对于三者的对比以及技术选型的思考与争论也被讨论了非常多,比如知乎上的这个问题:react.js,angular.js,vue.js学习哪个好?,对于这个问题我们不再做过多赘述。但不管怎么样,现在github上star数最多、npm上安装量最大的还是React,阿里巴巴很多团队的技术栈也是基于React的。此篇文章也是基于React的开发范式来进行讨论的。

JSX的模板范式没有选择HTML模板,而是完全基于JS的,同时提供了一种JSX的语法糖,方便用户的开发。这样做是有几种考虑的,首先React是跨平台跨终端的,不仅可以在Web browser中运行,还可以基于RN在移动端APP、服务端基于SSR来运行,基于虚拟DOM的实现让他可以轻松地做到以上几点,另外,完全基于JS的开发可以不用掌握类似Vue/angular的指令式的语法,而是更多的偏向于使用纯js的语法开发范式,一次学习终身受益,而不用每次在开发的过程中还要去查看API文档。

但是,React的这种开发模式也带来了一个额外的问题,就是jQuery时代尊崇的UI与逻辑分离的最佳实践在JSX时代又有了极大的后退。于是我们一直在思考,能不能有一种模式,既能享受像Vue那样UI、展示(样式)与逻辑分离,方便维护与可扩展,又能享受React JSX的语法带来的便利呢?

Lesx的诞生

基于上面的思考,于是有了Lesx这个构建式的框架

构建式的框架并不是我们的首创,但是这个概念不知道是不是我们第一次正式提出来。业界已经有的AOT(Ahead Of Time)、非侵入式的框架比较知名的是svelte,他的开发范式跟Lesx比较相似,但是他并不是基于React或者哪个框架的,而是自己研发了一套底层组件机制,对于模板代码的解析也是基于自己实现的一套AST解析实现,语法类似于Handlebars。基于React的开发范式跟Lesx比较相似的还是react-templates,他称自己是:Lightweight templates for React。他只是把React Class的render部分抽了出来,DSL会被编译成React.createElement,然后生成一个函数作为React Class的render方法。同时,react-templates里还增添了很多类似vue的指令的功能,比如:rt-ifrt-repeat等,这样的框架的问题就是问题解决的并不是很彻底,抽出render部分的同时,我们还是需要对React创建部分需要大量的代码书写;同时,对于JSX语法扩展指令的模式增添了开发者的学习成本,后面开发中也需要不断地去查看文档如何使用这些指令,这是我们极不推崇的。

在这样的背景下,我花了两天时间,早起晚睡、憋屎憋尿的完成了基于React做到UI、展示(样式)与逻辑分离的构建式开发框架:Lesx的初版。

基于Lesx的开发模式

Lesx作为webpack的loader存在,使用类似Vue的单文件的开发范式,方便开发者的代码组织与开发:

index.lesx:

<style>
    a {
        color: red;
    }
</style>

<template>
    <div>
        <a onClick={this.func}>点我</a>

        {console.log(this.props)}

        <If condition={ this.props.valid }>
            <div>{this.state.name}</div>
        </If>

        <Button type="primary" onClick={() => {
            alert('I am an antd button!');
            $setState({
                name: 'new name'
            });
        }}>antd button</Button>

        <My />
    </div>
</template>

<script>
    module.exports = {
        props: {
            valid: true
        },state: {
            name: 'xiangzhong.wxz'
        },func({
            setState,}) {
            alert('I am a function!');

            setState({
                name: 'new name'
            });
        }
    };
</script>

很明显的,他有几个特点:

UI、样式与逻辑分离

lesx文件有style/template/script三个标签,内部分别存放他们对应的内容代码

style部分我们默认使用跟css完全兼容同时有更多便利性语法的Sass语言,后面马上也会支持Less语法。

tenplate部分则完全是React的jsx语法,同时由以下几个扩展:

  • 我们基于babel插件jsx-control-statements提供了便利性的控制流标签,比如:IfFor等等,语法非常简单,一次学习终生高效!当然,有的同学可能会不认可这种标签扩展控制流的模式,此时你也可以继续使用你熟悉的三元运算符、数组map等方式来实现逻辑与展示控制,但是我们相信,标签控制符是更清晰、更容易维护的开发模式;
  • 你可以在DSL里面使用一些辅助性全局变量

    • $setState: this.setState的简便写法,通过改变state值来触发UI渲染;
    • $getRef: React通过组件ref属性获取组件的简便写法;
    • $getProps: 获取React属性的简便性方法,相当于:this.xxx;

后面我们还会做一些其他的更高级的便利性扩展,比如:接入axios的异步操作,React的forceUpdate便利性机制等等。

script部分是用于书写前端逻辑处理的地方,你可以使用ES6的语法,做各种的数据处理,只需要最后把一个对象交给module.exports变量即可,这个对象可以包含如下内容

  • state: React Component的state初始值,可以是对象也可以是函数
  • props: React props初始值,可以是对象也可以是函数
  • React组件的生命周期钩子函数: 比如:componentDidMount等,会被自动挂在到最终生成的React Component Class里面去;
  • 其他任意的属性方法: 均会被挂在到React Component实例(this)上去,而且,对于方法部分会被自动绑定到this作用域(this.xxx.bind(this)) 。

对于异步处理部分,默认可以直接调用this.axios.xxx方法来实现,并支持ES7:async/await语法:

module.exports = {
    async getData(reqArg = {}) {
        const res = await this.axios.post('url/post',reqArg);

        return res;
    }
};

同时,支持异步请求库可配置,可以在loader的配置里配置自己的异步请求库,此时会替换掉默认的axios。但这一块功能暂时还没有加入,承诺在接下来的一周之内会加上去。目前可以通过组件props传递的方式来使用异步,比如:

import App from './index.lesx';
import axios from 'axios';


console.log('App:',App);

render(<App
    axios={axios}
    components={{
        My,}}
/>,document.querySelector('#root'));

然后在lesx文件的script里面就可以这样用:

module.exports = {
    props: {
        valid: true
    },state: {
        id: 1001,},async getData(reqArg = {}) {
        const res = await this.props.axios.post('url/post',reqArg);

        return res;
    },clickHandler({
        setState,}) {
        const {
            id,} = this.state;

        const userData = this.getData({
            id,});

        setState({
            name: userData.name,});
    }
};

开发的极大便利:

UI库是我们在开发中重度依赖的部分,特别是对于像React这种完全组件化的开发框架来说,有个好用的UI框架简直是如虎添翼,会让我们的开发效率得到极大地提升!所以,我们的开发框架默认集成了国内最优秀的React UI库:antd,当然了,你也可以通过loader的配置来更改UI库,比如可以使用material-ui等。

在配置了UI库之后,无需做任何工作就可以直接在template标签里面使用该UI库的任意组件了,比如使用Button组件:

<script>
    <Button type="primary" onClick={() => {
        alert('I am an antd button!');
        $setState({
            name: 'new name'
        });
    }}>antd button</Button>
</script>

Lesx不仅会自动帮你打包你使用到的组件,同时,还会自动帮你把组件的样式引入;另外,基于babel的插件babel-plugin-import,我们做到了按需打包,只会把你用到的组件给打包进来,保证打包后的文件的最小体积。

开发者不需要书写React的组件生成代码

因为我们把React Component生成的过程全部放在了AOT里实现,所以开发者无需写React组件生成、UI库组件引入的操作,其实,开发者甚至不需要知道React的存在,也甚至更不需要学习React,唯一需要做的就是在渲染js文件中做一些组件引入以及渲染执行的操作,但是就这一块的成本其实是极低的。

目前前端的资源是极度缺乏的,整个互联网都缺前端,所以,我们在考虑如何释放前端人力这个方案的时候,我们是否可以考虑如何降低前端的上手成本,让后端同学可以上手前端开发,做到网后端开发赋能呢?其实Lesx的开发范式一开始就是为这个方向考虑的,在满足降低前端开发成本、降低前端开发复杂度、提高代码可维护性的同时,也可以很方便的提供给后端,让后端同学可以轻松上手前端开发,从而达到合作共赢的状态。对于前端人手紧缺的公司可以考虑这个方案的落地,也许会起到意想不到的效果

同时,为了可扩展性,我们做了一些额外的处理。除了可以给Lesx DSL转成的Component传递属性然后可以在Lesx文件使用之外,当我们确实需要第三方或者自己之前基于React原生模式开发的组件需要拿过来直接使用的时候,我们提供了components属性,将任意的第三方组件放在conponents属性对象中,既可以直接在DSL中使用,如下:

import React,{ Component } from 'react';
import { render } from 'react-dom';
import My from './My';
import App from './index.lesx';


console.log('App:',App);

render(<App
    components={{
        My,document.querySelector('#root'));

在上面我们引入了自己开发的My组件,并放在了Lesx DSL转成的App组件的components属性里,于是可以在lesx文件中像下面这样使用:

<style>
    { /** style代码 */ }
</style>

<template>
    <div>
        <a onClick={this.func}>点我</a>
        <My />
    </div>
</template>

<script>
    { /** 逻辑代码 */ }
</script>

其实,基于这种开发范式针对不同的场景可以有不同的代码组织模式。如果你的界面不是很复杂,或者是比较典型的中后台应用场景(增删改查这种),你可以完全基于一个.lesx文件开发完你所有的页面逻辑,更多的则是依赖于第三方的UI库来为你的开发提供便利,说白了就是更多的依赖于组件搭积木式的开发范式,这个时候template就是开发的重点所在,而scriptstyle只是起到了添砖加瓦的便利性的开发,这个时候Lesx的职责就是页面级别代码组织方式;如果是比较复杂的应用,比如SPA应用,这时我们可以基于Lesx来开发自己的一个个的React组件,然后加入vanexdva等数据流管理框架来方便对大量数据的操作,最后通过react-router等router组件进行统一组织,然后进行渲染。这个时候Lesx的职责就不一样了,变成了组件级别代码组织。

怎么样,有没有那么一点点的打动你的心呢?^_^ 如果有的话,不妨去体验下Lesx,相信会带给你不一样的开发体验。

例子:lesx-example
webpack loader: lesx-loader

原文链接:https://www.f2er.com/react/302927.html

猜你在找的React相关文章