文档章节

谈谈React

L3ve
 L3ve
发布于 2016/09/14 17:33
字数 2285
阅读 176
收藏 1

##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上阵,毕竟使用它也是需要成本的.

相关思想的文章:

© 著作权归作者所有

L3ve
粉丝 10
博文 28
码字总数 14006
作品 0
浦东
程序员
私信 提问
加载中

评论(1)

喻恒春
喻恒春
React 的成本太高了, 向你推荐我写的 Real-DOM 模板引擎 https://github.com/powjs/powjs .
工作在真实的 DOM Tree, (NodeJS 下可以使用 jsdom 模拟 DOM 环境)
生成的是真实的 DOM Node, 而不是字符串.
最特有的是:

PowJS 编译后得到的是 JavaScript , 渲染工作在 real 环境下的, 写 PowJS 模板就是写 JS
中国首届React开发者大会

中国首届React开发者大会于2018年08月18日在广州举办。由w3ctech、前端圈主办。本次大会我们将邀请行业内知名讲师,与大家共聚广州,畅聊React。 已确认的演讲主题: 演讲者:Vladimir Grin...

裕波
2018/07/13
51
0
中国首届React开发者大会

中国首届React开发者大会于2018年08月18日在广州举办。由w3ctech、前端圈主办。本次大会我们将邀请行业内知名讲师,与大家共聚广州,畅聊React。 已确认的演讲主题: 演讲者:Vladimir Grin...

裕波
2018/07/13
360
0
谈谈新的 React 新的生命周期钩子

在 React 16.3 中,Facebook 的工程师们给 React 带来一系列的新的特性,如 suspense 和 time slicing 等,这些都为 React 接下来即将到来的异步渲染机制做准备,有兴趣的可以看 Sophie Alp...

六面体混凝土移动师
2018/08/15
0
0
谈谈React事件机制和未来(react-events)

当我们在组件上设置事件处理器时,React并不会在该DOM元素上直接绑定事件处理器. React内部自定义了一套事件系统,在这个系统上统一进行事件订阅和分发. 具体来讲,React利用事件委托机制在D...

_sx_
08/03
0
0
转【唐巧】的谈谈 React Native

前言 几天前,Facebook 在 React.js Conf 2015 大会上推出了 React Native(视频链接)。我发了一条微博(地址),结果引来了 100 多次转发。为什么 React Native 会引来如此多的关注呢?我在...

山哥
2015/02/02
371
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.2K
14
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部