新的一年快開始了,學點新東西吧,從React開始(一)

時間 2019-11-06

標籤新的一年 1年開始東西 react 欄目 React 简体版

原文原文鏈接

ReactJS是Facebook出的前端View框架,好東西啊.
看看它的說明:html

僅僅是UI
許多人使用React做爲MVC架構的V層。儘管React並無假設過你的其他技術棧，但它仍能夠做爲一個小特徵輕易地在已有項目中使用前端

虛擬DOM
React爲了更高超的性能而使用虛擬DOM做爲其不一樣的實現。它同時也能夠由服務端Node.js渲染－而不須要太重的瀏覽器DOM支持react

數據流
React實現了單向響應的數據流，從而減小了重複代碼，這也是它爲何比傳統數據綁定更簡單。瀏覽器

咱們和其它框架對比下:
Jquery:架構

Jquery組件化的方式就是寫插件,直接Dom操做.沒有雙向綁定.框架

Angular:
雙向綁定的典型案例,組件化的方式是經過指令.組件化

VUE:
很小巧的一個框架,幾十K,省流量.性能

React:
單向數據流, JSX式語法.
先不說這個單向數據流,咱們來看下JSX語法:學習

var HelloMessage = React.createClass({
render: function() {
return this

Hello {this.props.name}

;
}
});

React.render( , mountNode);

恩,分析下代碼:
它聲明一個組件,就是定義一個類,而後在Render裏寫JSX語法,React會自動把它編譯成組件的JS,最後經過React.Render來渲染到一個標籤上,看上去很簡單.

JSX語法很是相似Dom,其實就是Dom擴展了下.能夠支持自定義的屬性.自定義的屬性,被解釋成props,在組件內部使用.

固然了,要讓這個組件能在頁面運行,咱們須要引入browser.js和react.js

一個完整的例子:
<!DOCTYPE html>

恩,另外本人建了個學習React的小羣,裏面也收集了不少資料, 有興趣一塊兒學習的朋友能夠加羣:435748765

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。