谈谈React

原创
2016/09/14 17:33
阅读数 254

##React无限好,只是我矫情 前置知识点:

  1. ES6的class
  2. ES6的模板字符串
  3. ES6的模块Modules

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

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

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

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

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

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

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

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

ES6这里我就不多说了,学习的话,深入浅出ES6MDN文档这2个足已,webpack+babel网上资料也是一大把,要不然可以参考下这个最小化React构建项目

##世界那么大,我不想只写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的真身:

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

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

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

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

###写在最后: React真的好用,你们不用数,整篇文章我用了5次"React真的好用",表达我真心看好他.但如果你已经会用React写项目了,不妨也安静仔细的思考下React带给我们什么,并不是什么都适合派React上阵,毕竟使用它也是需要成本的.

相关思想的文章:

展开阅读全文
打赏
0
1 收藏
分享
加载中
React 的成本太高了, 向你推荐我写的 Real-DOM 模板引擎 https://github.com/powjs/powjs .
工作在真实的 DOM Tree, (NodeJS 下可以使用 jsdom 模拟 DOM 环境)
生成的是真实的 DOM Node, 而不是字符串.
最特有的是:

PowJS 编译后得到的是 JavaScript , 渲染工作在 real 环境下的, 写 PowJS 模板就是写 JS
2017/10/19 12:15
回复
举报
更多评论
打赏
1 评论
1 收藏
0
分享
返回顶部
顶部