谈谈React
|
##React无限好,只是我矫情 前置知识点:
其实,我也中了React的毒.什么项目一到我手上,我就想着用React来写.React的思想和项目的结构,可以说我是一见钟情.组件化,数据单流与唯一都让我爱不释手.有一段时间,我都接受不了不用React的项目. 但是今天,我就是来到当搅屎棍的,待会将用ES6来代替React.在此之前,想想操作DOM的模式已经存活了很久,可以说非常的成熟,各种资源也非常的多,要说他的缺点,我认为以下是最主要的点:
考虑到这些点,我觉得React的优势在某些情况下,并没有想象中的大,比如说展示性的页面,后台等.本身DOM操作就并不频繁,且不追求性能,那么React的VD(Virtual-DOM)就变得杀鸡用牛刀,甚至可以说是代码冗余 ##未来的世界,React可能已经逝去,但ES6肯定还在 就如标题所表达的,原生JavaScript是不会被淘汰的,学ES6肯定不亏,这也是为什么我想用ES6来治好我的React病的原因.接下来,我们就进入主题,来假装我们在用React开发.他有个名字叫Feact(Fake React) 因为ES6兼容性还不是很好,所以我们需要一系列工具来辅助我们开发,以下就是我们的开发栈.
##世界那么大,我不想只写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的真身:
说到底,Feact只是套上了ES6模块发开发思想的原生代码,他只是起到了组织代码的功能,也因为是原生的缘故,配合传统的第三方库类非常的方便. ##最后吐槽下React,再回去继续写React
###写在最后: React真的好用,你们不用数,整篇文章我用了5次"React真的好用",表达我真心看好他.但如果你已经会用React写项目了,不妨也安静仔细的思考下React带给我们什么,并不是什么都适合派React上阵,毕竟使用它也是需要成本的. 相关思想的文章:
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |