react是什么?
react官網(wǎng)上說
React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.
react是靈活的贸呢，可以在各種項目中使用。您可以使用它創(chuàng)建新的應(yīng)用程序，當然您也可以在不重寫的情況下逐步將其引入到現(xiàn)有的代碼庫中。
總的來說：
- React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫租冠。
- React主要用于構(gòu)建UI掸犬，很多人認為 React 是 MVC 中的 V（視圖）。
- React 起源于 Facebook 的內(nèi)部項目甜害，用來架設(shè) Instagram 的網(wǎng)站咱枉，并于 2013 年 5 月開源卑硫。
- React 擁有較高的性能徒恋，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它拔恰。
react的特點
1.聲明式設(shè)計 ?React采用聲明范式因谎，可以輕松描述應(yīng)用基括。
2.高效?React通過對DOM的模擬颜懊，最大限度地減少與DOM的交互。
-
虛擬DOM(virtual dom)：我們知道js執(zhí)行很快风皿，耗費性能的部分是操作dom河爹， react引入virtual dom的概念，當數(shù)據(jù)變化時桐款，采用優(yōu)化diff算法咸这，對比virtual dom差異，精準更新dom魔眨。
這樣做媳维，不但解決了頻繁操作dom的性能問題，還解放了開發(fā)人員遏暴。開發(fā)者不需要關(guān)注某個數(shù)據(jù)的變化如何更新到一個或多個具體的DOM元素侄刽，而只需要關(guān)心在任意一個數(shù)據(jù)狀態(tài)下，整個界面是如何render的朋凉，至于如何進行局部更新來保證性能州丹，則是React要完成的事情。
除了性能的考慮杂彭，React引入虛擬DOM更重要的意義是提供了一種一致的開發(fā)方 式來開發(fā)服務(wù)端應(yīng)用墓毒、Web應(yīng)用和手機端應(yīng)用：image因為有了虛擬DOM這一層佩谣，所以通過配備不同的渲染器礼旅，就可以將虛擬DOM的內(nèi)容 渲染到不同的平臺。而應(yīng)用開發(fā)者尘颓，使用JavaScript就可以通吃各個平臺了团秽。相當棒的思路主胧！
3.靈活??React可以與已知的庫或框架很好地配合。
4.JSX?JSX 是 JavaScript 語法的擴展徙垫。React 開發(fā)不一定使用 JSX 讥裤，但我們建議使用它。
5.組件?通過 React 構(gòu)建組件姻报，使得代碼更加容易得到復(fù)用己英，能夠很好的應(yīng)用在大項目的開發(fā)中。
1.虛擬DOM(virtual-dom)不僅帶來了簡單的UI開發(fā)邏輯吴旋，同時也帶來了組件化開發(fā)的思想损肛，所謂組件厢破，即封裝起來的具有獨立功能的UI部件。React推薦以組件的方式去重新思考UI構(gòu)成治拿，將UI上每一個功能相對獨立的模塊定義成組件摩泪，然后將小的組件通過組合或者嵌套的方式構(gòu)成大的組件，最終完成整體UI的構(gòu)建劫谅。例如见坑，F(xiàn)acebook的instagram.com整站都采用了React來開發(fā)，整個頁面就是一個大的組件捏检，其中包含了嵌套的大量其它組件荞驴，大家有興趣可以看下它背后的代碼。
2.如果說MVC的思想讓你做到視圖-數(shù)據(jù)-控制器的分離贯城，那么組件化的思考方式則是帶來了UI功能模塊之間的分離熊楼。我們通過一個典型的Blog評論界面來看MVC和組件化開發(fā)思路的區(qū)別
3.對于MVC開發(fā)模式來說，開發(fā)者將三者定義成不同的類能犯，實現(xiàn)了表現(xiàn)鲫骗，數(shù)據(jù)，控制的分離踩晶。開發(fā)者更多的是從技術(shù)的角度來對UI進行拆分执泰，實現(xiàn)松耦合。
- 組件化開發(fā)特性:React認為一個組件應(yīng)該具有如下特征：
- 可組合（Composeable）：一個組件易于和其它組件一起使用合瓢，或者嵌套在另一個組件內(nèi)部坦胶。如果一個組件內(nèi)部創(chuàng)建了另一個組件，那么說父組件擁有（own）它創(chuàng)建的子組件晴楔，通過這個特性顿苇，一個復(fù)雜的UI可以拆分成多個簡單的UI組件；
- 可重用（Reusable）：每個組件都是具有獨立功能的税弃，它可以被使用在多個UI場景纪岁；
- 可維護（Maintainable）：每個小的組件僅僅包含自身的邏輯，更容易被理解和維護则果；
- 可測試（Testable）：因為每個組件都是獨立的幔翰，那么對于各個組件分別測試顯然要比對于整個UI進行測試容易的多。
6.單向響應(yīng)的數(shù)據(jù)流?React 實現(xiàn)了單向響應(yīng)的數(shù)據(jù)流西壮，從而減少了重復(fù)代碼遗增，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單
react怎么用？
- 首先需要引入三個最基本的js庫：
react.js -React的核心庫
react－dom.js -提供雨dom相關(guān)的功能
browser.js -作用是將 JSX 語法轉(zhuǎn)為 JavaScript語法款青，這一步很消耗時間做修，實際上線的時候，應(yīng)該將它放到服務(wù)器完成。
- 提供接口的dom節(jié)點
- 倆個重要的倆個對象ReactDOM.render()饰及，React.createClass()
接下來先看一個最基本的案例：
- es5書寫形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('example')
)
</script>
</body>
</html>
- es6書寫形式：
import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>Hello world</div>
)
}
}
render(<App />, document.getElementById('app'));
參考文章可以見阮一峰老師的React入門實例教程
