谈谈React

查看原文

其他

谈谈React

原创 2016-09-23 李波前端圈

React无限好,只是我矫情

前置知识点：

：http://www.infoq.com/cn/articles/es6-in-depth-classes
：http://www.infoq.com/cn/articles/es6-in-depth-template-string
：http://www.infoq.com/cn/articles/es6-in-depth-modules

本文带有强烈的个人观点,虽然我真的很喜欢React,React真的好用! 但是喜欢不等于无脑,学习其中的精髓才是重点。

其实,我也中了React的毒。什么项目一到我手上，我就想着用React来写.React的思想和项目的结构,可以说我是一见钟情.组件化,数据单流与唯一都让我爱不释手。有一段时间,我都接受不了不用React的项目。

但是今天,我就是来到当搅屎棍的,待会将用ES6来代替React。在此之前,想想操作DOM的模式已经存活了很久,可以说非常的成熟，各种资源也非常的多,要说他的缺点，我认为以下是最主要的点:

DOM操作的龟速。
直接操作DOM虽然简单暴力，但在一定程度上会导致操作的冲突,好比某个DOM在几处不同的地方在不同的时间被修改,出现问题的话就难以判断是哪个操作何时导致的(也就是维护性差),也很难保存统一DOM的状态,导致数据不一致等问题。

考虑到这些点,我觉得React的优势在某些情况下,并没有想象中的大,比如说展示性的页面,后台等.本身DOM操作就并不频繁,且不追求性能,那么React的VD(Virtual-DOM)就变得杀鸡用牛刀,甚至可以说是代码冗余。

未来的世界,React可能已经逝去,但ES6肯定还在

就如标题所表达的,原生JavaScript是不会被淘汰的,学ES6肯定不亏,这也是为什么我想用ES6来治好我的React病的原因.接下来,我们就进入主题,来假装我们在用React开发.他有个名字叫Feact(Fake React)

因为ES6兼容性还不是很好,所以我们需要一系列工具来辅助我们开发,以下就是我们的开发栈.

ES6(本体)
jquery(为了让代码看起来简洁点,姑且跟他玩玩)
Babel(编译ES6)
webpack(模块化开发,压缩等各种处理)

世界那么大,我不想只写React

先看下我的React组件代码：

import React, {Component} from 'react';
import './css/css.less';
//组件的独有样式
class Feact extends Component {
     constructor(props) {
     //构造初始化组件
        super(props);
        this.state = {                         
            _dom: props.dom,
            _txt: 'So Nice!'
        }
     }
     change(txt) {
     //自定义事件(函数)
        this.setState({
            _txt: txt 
        })
     }
    click() {} 
    //定于点击事件
    render() {
    //渲染模板
        const {_txt} = state;
        return (
          <div className='acv' onClick={this.click}>
                {_txt}
          </div>
        );
    }
}
export default Feact;

接下来看看我的feact组件代码：

import './css/css.less';
//组件的独有样式

class Feact {
    constructor(props) {
    //初始化构建
        this.state = {
        //保存必要的数据
            _dom: props.dom
        }
        this.render(props.html);
        //开始渲染html
        $(props.dom).on('click', () => {});
        //事件绑定
    }
    change(txt) {
    //组件的自定义事件(函数)
        $('.acv').html(txt);
    }
    render(html) {
        const {_dom} = this.state,
            _html = ``;
        _html = `
        //ES6的字符串模板
            <div class='acv' >
            //这里如果是循环列表的话也可
                So Nice!
                //用ejs等模板来渲染,反正大同小异
            </div>
        `;
        $(_dom).html(_html);
    }
}
export default Feact;

调用方面React与Feact的对比：

import Feact from 'feact';
  //React-----------------------
  someplace(){
    this.ref.feact.change('Very Cool!');
  }
  //or--------------------------
  render (
    return <Feact ref='feact' dom='.class' />
  )

  //Feact-----------------------
  const feact = new Feact({
    dom: '.class'
  });

  feact.change('Very Cool!');

从上面的代码来看,代码风格其实相差不大.Feact用ES6的class和字符串模板加上webpack和babel,形成了一个模块化组件化开发的模式,除了说上面的Feact代码是用很low的DOM操作之外,其他的基本上没啥问题.

Feact也很符合传统只搭配jq来做项目,只是尽量的把js代码组件化,包括:组件数据集中,组件渲染集中,组件独立开发(没有依赖)等.你看,其实Feact已经挺好用了.而且上手并不难.

Feact的真面貌

心声:React真的好用!其实Feact只做了最基础的一些东西,就是代码的组织化,模块化.然而React却不止这些,让我们来看看Feact的真身:

React的渲染是自动的,你只要改变了他的state,他就重新渲染.然而Feact需要你自己手动调用this.render,但其实这种情况也不算很多,直接操作DOM用html()来修改DOM的情形下,就基本不需要调用this.render了.
React有不算健全的jsx当模板,搭配起来用一句话来概括:Not best but good enough,然后Feact当然也需要一款模板引擎,比如ejs,其实单纯用模板字符串的话也不是不可以,但是如果你可以接受活生生套一层for来生成列表的话,我也无话可说.要不然,你还是得乖乖的用第三方模板引擎.
Feact其实可以加上观察者模式,用来实现个双向绑定,这样可以解放对DOM的操作,重点是HTML本来就是在组件内渲染的,所以在组件内绑定数据也可以做到统一管理.但是这无疑加大了学习难度.
Feact做的事情其实只有一件:把代码模块化规范化.

说到底,Feact只是套上了ES6模块发开发思想的原生代码,他只是起到了组织代码的功能,也因为是原生的缘故,配合传统的第三方库类非常的方便.

最后吐槽下React,再回去继续写React

上手React并不难,但是学懂可就因人而异.一段中庸的js代码和一段糟糕的React代码,我还是会毫不犹豫的选择前者,毕竟维护与日后的更新,并不一定是同个人.糟糕的React代码,也会让人窒息.
简单的层级用React真的好用,因为你压根就不会碰到在各个组件里依赖各种值,然后在父组件里传来传去的现象.当层级多了之后,真的是很需要很好的组件结构,要不然真心和回调地狱是同个等级的恶心.因为React提倡的就是单向数据流,只往子组件传(当然,用回调和ref等方法,也不是不可以实现逆传,只是这真的对不起React的设计思想),然后你就会觉得父亲组件越来越臃肿.之后惊讶的发现,到最后大部分组件都是最外层模块是数据的获取与处理,然后模块里有一个或者多个只用来渲染的子组件,这也就是传说中的高阶组件形成的一种最初始模式.
React有一个特别流弊的技能,就是每当setState之后,他都会自己重新渲染组件,React真的好用,这很React! 炒鸡方便,获取到数据,就set进去,然后React就自动渲染了.但如果你的数据是在最外层的组件里set的,React不管3721都帮你把里面的所有东西都重新渲染了.解决重新渲染的关键字:Immutable,shouldComponentUpdate,但是这就像是用setTimeout(300)来解决异步导致的先后问题一样,有效,可是丑陋.自动却不人性化的渲染,有时候的确不太称心,即使React帮我们做了很多优化.特别是在鼠标移进移出的时候,碰巧他渲染了组件,你也就只能在鼠标事件里做一件伟大的事:setTimeout.
Redux,好吧,React的亲兄弟.Redux提供的一种解决方案其实是挺完美的,但是当和React结合起来之后,你就会遇到第三点的问题,丑而且麻烦!!!吐槽Redux的话,其实之前也有写过一遍文章,这里我就不过多讨论了,但总的来说,除了高阶组件,他们2兄弟的确是现在最好的解决方案,只是我期望能有更好的出现.
说React不好,我也写了这么多字了,但他的好处可以写一个系列文章,我很期待React ver.200的样子,因为React从一开始的确带给了我们很不一样的思想,与解决方案.