##React无限好,只是我矫情 前置知识点:
本文带有强烈的个人观点,虽然我真的很喜欢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(模块化开发,压缩等各种处理)
ES6这里我就不多说了,学习的话,深入浅出ES6和MDN文档这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;@H_403_49@
接下来看看我的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;@H_403_49@
调用方面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!');@H_403_49@
从上面的代码来看,代码风格其实相差不大.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从一开始的确带给了我们很不一样的思想,与解决方案.
###写在最后: React真的好用,你们不用数,整篇文章我用了5次"React真的好用",表达我真心看好他.但如果你已经会用React写项目了,不妨也安静仔细的思考下React带给我们什么,并不是什么都适合派React上阵,毕竟使用它也是需要成本的.
相关思想的文章:
原文链接：https://www.f2er.com/react/305937.html