美文网首页
React-0 | 初尝

React-0 | 初尝

作者: Mindjet | 来源:发表于2017-09-01 08:43 被阅读9次

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 结构更新。

相关文章

  • React-0 | 初尝

    jQuery or React? jQuery 是对原生 JavaScript 封装使其更加易用,崇尚的是 htm...

  • 初尝

    高枕虽不虞,惊起皆空虚; 耳添丝竹乐,确乱三千丝。

  • 初尝

    继上次中午和二哥聊了很久之后,心里一直想的就是『不忘初心』,便重新尝试找回留学时的冲劲,更多的去接受新的东西。成也...

  • 初尝

    社会真的有那么残酷吗? 谈恋爱就是看脸和身材,前几天学姐说:“又有谁看你的舞姿不过就是看脸和身材”学姐很漂亮,说得...

  • 初尝

    每每看到别人记录的点点滴滴都有动笔写下自己的生活的念头,本身自己就是一个爱忘记生活过往的人,一年前的事情被家人朋友...

  • 毕业这年

    初尝爱情,初尝不易,初感兼迎

  • 初尝摄影

  • 初尝生活

    来学校已经三天了,除了今天上午开了一次班会再无其他任何活动!虽说刚来,对一切都很新奇,但九月的天气除了早晚仍然很热...

  • 初尝催眠

    焦点长期班第二期陈曼丽 持续分享第88天 20180724 周二 晴 上周,提前约了苹暇姐做了一次基础催眠,...

  • 初尝禁果

    J来自四川,W来自深圳。他们都是才毕业的年轻人,怀着满腔热血准备在深圳闯出一片天地。命运的安排,让他们到了同一家...

网友评论

      本文标题:React-0 | 初尝

      本文链接:https://www.haomeiwen.com/subject/jgdhjxtx.html