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是靈活的，可以在各種項(xiàng)目中使用。您可以使用它創(chuàng)建新的應(yīng)用程序，當(dāng)然您也可以在不重寫的情況下逐步將其引入到現(xiàn)有的代碼庫中。
總的來說：
- React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫。
- React主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。
- React 起源于 Facebook 的內(nèi)部項(xiàng)目，用來架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開源。
- React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它。
react的特點(diǎn)
1.聲明式設(shè)計(jì) ?React采用聲明范式，可以輕松描述應(yīng)用。
2.高效?React通過對(duì)DOM的模擬，最大限度地減少與DOM的交互。
-
虛擬DOM(virtual dom)：我們知道js執(zhí)行很快，耗費(fèi)性能的部分是操作dom， react引入virtual dom的概念，當(dāng)數(shù)據(jù)變化時(shí)，采用優(yōu)化diff算法，對(duì)比virtual dom差異，精準(zhǔn)更新dom。
這樣做，不但解決了頻繁操作dom的性能問題，還解放了開發(fā)人員。開發(fā)者不需要關(guān)注某個(gè)數(shù)據(jù)的變化如何更新到一個(gè)或多個(gè)具體的DOM元素，而只需要關(guān)心在任意一個(gè)數(shù)據(jù)狀態(tài)下，整個(gè)界面是如何render的，至于如何進(jìn)行局部更新來保證性能，則是React要完成的事情。
除了性能的考慮，React引入虛擬DOM更重要的意義是提供了一種一致的開發(fā)方 式來開發(fā)服務(wù)端應(yīng)用、Web應(yīng)用和手機(jī)端應(yīng)用：image因?yàn)橛辛颂摂MDOM這一層，所以通過配備不同的渲染器，就可以將虛擬DOM的內(nèi)容 渲染到不同的平臺(tái)。而應(yīng)用開發(fā)者，使用JavaScript就可以通吃各個(gè)平臺(tái)了。相當(dāng)棒的思路！
3.靈活??React可以與已知的庫或框架很好地配合。
4.JSX?JSX 是 JavaScript 語法的擴(kuò)展。React 開發(fā)不一定使用 JSX ，但我們建議使用它。
5.組件?通過 React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中。
1.虛擬DOM(virtual-dom)不僅帶來了簡單的UI開發(fā)邏輯，同時(shí)也帶來了組件化開發(fā)的思想，所謂組件，即封裝起來的具有獨(dú)立功能的UI部件。React推薦以組件的方式去重新思考UI構(gòu)成，將UI上每一個(gè)功能相對(duì)獨(dú)立的模塊定義成組件，然后將小的組件通過組合或者嵌套的方式構(gòu)成大的組件，最終完成整體UI的構(gòu)建。例如，F(xiàn)acebook的instagram.com整站都采用了React來開發(fā)，整個(gè)頁面就是一個(gè)大的組件，其中包含了嵌套的大量其它組件，大家有興趣可以看下它背后的代碼。
2.如果說MVC的思想讓你做到視圖-數(shù)據(jù)-控制器的分離，那么組件化的思考方式則是帶來了UI功能模塊之間的分離。我們通過一個(gè)典型的Blog評(píng)論界面來看MVC和組件化開發(fā)思路的區(qū)別
3.對(duì)于MVC開發(fā)模式來說，開發(fā)者將三者定義成不同的類，實(shí)現(xiàn)了表現(xiàn)，數(shù)據(jù)，控制的分離。開發(fā)者更多的是從技術(shù)的角度來對(duì)UI進(jìn)行拆分，實(shí)現(xiàn)松耦合。
- 組件化開發(fā)特性:React認(rèn)為一個(gè)組件應(yīng)該具有如下特征：
- 可組合（Composeable）：一個(gè)組件易于和其它組件一起使用，或者嵌套在另一個(gè)組件內(nèi)部。如果一個(gè)組件內(nèi)部創(chuàng)建了另一個(gè)組件，那么說父組件擁有（own）它創(chuàng)建的子組件，通過這個(gè)特性，一個(gè)復(fù)雜的UI可以拆分成多個(gè)簡單的UI組件；
- 可重用（Reusable）：每個(gè)組件都是具有獨(dú)立功能的，它可以被使用在多個(gè)UI場景；
- 可維護(hù)（Maintainable）：每個(gè)小的組件僅僅包含自身的邏輯，更容易被理解和維護(hù)；
- 可測試（Testable）：因?yàn)槊總€(gè)組件都是獨(dú)立的，那么對(duì)于各個(gè)組件分別測試顯然要比對(duì)于整個(gè)UI進(jìn)行測試容易的多。
6.單向響應(yīng)的數(shù)據(jù)流?React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單
react怎么用？
- 首先需要引入三個(gè)最基本的js庫：
react.js -React的核心庫
react－dom.js -提供雨dom相關(guān)的功能
browser.js -作用是將 JSX 語法轉(zhuǎn)為 JavaScript語法，這一步很消耗時(shí)間，實(shí)際上線的時(shí)候，應(yīng)該將它放到服務(wù)器完成。
- 提供接口的dom節(jié)點(diǎn)
- 倆個(gè)重要的倆個(gè)對(duì)象ReactDOM.render()，React.createClass()
接下來先看一個(gè)最基本的案例：
- 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入門實(shí)例教程
