React-0 | 初尝

jQuery or React?

jQuery 是对原生 JavaScript 封装使其更加易用,崇尚的是 htmlcssjs 独立的思想,而 React 主导的是将实现某一个功能的 htmlcssjs 绑定在一块,作为一个组件(component)来使用。个人认为,两者各有所长,专注点也不同。jQuery 应该更加适合工具库和逻辑业务的开发,即不涉及 view 层的开发,;而 React 更加适合页面业务的开发,可以将多个常用的功能模块设计为组件进行复用。

JSX

既然说 React 是将 htmlcssjs 作为一个组件,那么这三者如何整合在一块?为此,Facebook 引入了 JSX 语法来实现。在 JSX 文件中,一般会出现 htmljs 代码,而 css 代码一般通过外部引入的方式来加入到其中,如下所示:

import React from 'react';
import 'text-view.css';

export default class TextView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: props.content
        }
    }

    render() {
        return (
            <div>{this.state.content}</div>
        );
    }
}

生命周期

React 的组件均有生命周期,componentWillMountcomponentDidMountrender 等,即在组件不同的加载阶段会有不同的回调方法,开发者可以在这些方法中更好地对组件进行控制,比如在组件销毁时对资源进行释放等操作。

原理和效率

相比于 jQuery 直接操作 DOMReact 采用一种 Virtual DOM 的技术来间接操作 DOM。所谓的 Virtual DOM 技术,指的是开发者去改变 “DOM” 时并不会直接影响到真实的 DOM,最终的 DOM 是通过虚拟的 DOM 结构加上特定的算法得出来的。

React 对于事件机制做了优化,采用了事件委托,即 React 会对同一种事件进行汇总,然后计算出是哪个元素触发了该事件,再把事件分配到该元素上。比如 onClick,虽然在代码中可能有多个 DOM 绑定,但是最终其实只是绑定在同一个 onClick 上,React 会通过 Virtual DOM 计算出到底是哪个元素触发了这个事件。

最重要的是,React 对于 DOM 的更新有一个比较突出的优点:只改变需要改变的。即会通过算法计算出哪个结构是确实需要更新的而哪个不需要,之后才去作必要的 DOM 结构更新。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,492评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,048评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,927评论 0 358
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,293评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,309评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,024评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,638评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,546评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,073评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,188评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,321评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,998评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,678评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,186评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,303评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,663评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,330评论 2 358

推荐阅读更多精彩内容

  • 参考文章:深度剖析:如何实现一个Virtual DOM 算法 作者:戴嘉华React中一个没人能解释清楚的问题——...
    waka阅读 5,965评论 0 21
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,842评论 1 18
  • It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,275评论 0 2
  • 一、why React? React是Facebook开发的一款JS库。React一般被用来作为MVC中的V层,它...
    amm0117阅读 11,112评论 0 1
  • React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript M...
    程序员点点阅读 533评论 0 3