React-0|初食

jQuery or React？

jQuery原生JavaScriptパッケージをより使いやすくし、尊ぶのはhtmlcssとjs独立した思想、Reactある機能を実現するhtmlcssとjsを一枚に縛り、一つのコンポーネントとして使用している.個人的には、両者にはそれぞれ長所があり、集中点も異なると思います.jQueryツールライブラリや論理業務の開発にもっと適しているはず、すなわちview層の開発には関与していない.Reactページビジネスの開発に適しており、複数の一般的な機能モジュールをコンポーネントとして多重化できるように設計されている.

JSX

React・html・、cssとjsを1つのコンポーネントとしている以上、この3つをどのように統合するか.そのため、FacebookにはJSX文法が導入されている.JSXファイルには、通常、htmlおよびjsコードが表示されますが、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 (
            
{this.state.content}
        );
    }
}

ライフサイクル

Reactのコンポーネントにはライフサイクルがあり、componentWillMount、componentDidMount、renderなど、コンポーネントの異なるロード段階で異なるコールバック方法があり、開発者はこれらの方法の中でコンポーネントをよりよく制御することができ、例えば、コンポーネントの破棄時にソースを解放するなどの操作を行うことができる.

原理と効率

jQuery直接操作DOMに比べ、ReactVirtual DOM一種DOMの技術で間接操作Virtual DOM.“DOM”技術とは、開発者が変更することDOM実際には影響しないDOM、最終的にはDOM仮想的React構造に特定のアルゴリズムを加えたものである.Reactイベントメカニズムを最適化し、イベント依頼を採用したonClick同じイベントをまとめ、どの要素がそのイベントをトリガーしたのかを算出し、その要素にイベントを割り当てる.例えばonClickコードには複数のDOMバインドがあるかもしれませんが、最終的には同じReactにバインドされているだけで、Virtual DOMどの要素がこのイベントをトリガーしたのかを計算します.
最も重要なのは、ReactDOMの更新には、変更するだけで変更する必要があるという優れた利点があります.すなわち,どの構造が確実に更新される必要があるのか,どの構造が不要なのかをアルゴリズムで計算し,その後必要とするDOM構造更新を行う.