React是Facebook推出的面向視圖層開發的一個框架，用于解決大型應用，包括如何很好地管理DOM結構，是構建大型，快速Web app的首選方式。

React使用JavaScript來構建用戶界面，因此可以說是一個用來構建用戶界面的JavaScript庫。

1、為什么使用?React？

React 是為了解決一個問題：構建隨著時間數據不斷變化的大規模應用程序。

1）簡單：僅僅只要表達出應用程序在任一個時間點應該呈現的樣子，當底層的數據變了，React會自動處理所有用戶界面的更新。

2）聲明式：數據變化后，與點擊“刷新”按鈕類似，但僅會更新變化的部分。

3）構建可組合的組件：React構建可復用的組件，事實上通過React唯一要做的事情就是構建組件，這得益于其良好的封裝性，組件使代碼復用、測試和關注分離更加簡單。

?

2、對React認識的誤區

1)?React不是一個完整的MVC框架，最多是MVC中的V（View），甚至并不非常認可MVC開發模式；

2)?React和Web Component不能相提并論，兩者并不是完全的競爭關系，完全可以用React去開發一個真正的Web Component；

3)?React不是一個新的模板語言，沒有JSX的React也能工作。

?

3、React的原理

在Web開發中，總需要將變化的數據實時反應到用戶界面上，這就需要對DOM進行操作。而復雜或頻繁的DOM操作通常是性能瓶頸產生的原因。

React為此引入了虛擬DOM的機制：在瀏覽器端用JavaScript實現一套DOM API。基于React，所有的DOM操作都通過虛擬DOM進行，每當數據變化時，React都會重新構建整個DOM樹，然后將目前的整個DOM樹和上次的DOM樹進行對比，得到DOM樹的區別，僅僅將變化的部分進行瀏覽器DOM更新。盡管每一次都要重新完整的虛擬DOM樹，但因為虛擬DOM是內存數據，性能極高，而對實際DOM操作的僅僅是Diff部分，因此能達到提高性能的目的。此外，React能批處理虛擬DOM的刷新，在一個事件循環內的兩次數據變化會被合并，如連續的先將節點內容從x變成y，然后又從y變成x，React會認為UI不發生任何變化。總之，在保證性能的同時，開發者將不再需要關注數據的變化如何更新到實際的DOM元素，而只需要關心在任意一個數據狀態下，整個界面是如何render的，每做一點界面的更新，都可以認為刷新了整個頁面，至于如何進行局部更新以保證性能，則是React框架要完成的事情。

以視頻聊天應用為例：當收到一條新消息時，傳統的開發過程需要知道是哪條數據，如何將新的DOM結點添加到當前DOM樹上；而基于React，永遠只需要關心數據整體，兩次數據之間的UI如何變化，然后可以完全交給React框架去做，這大大降低了邏輯復雜性和開發難度，產生Bug的概率也更小。

有關虛擬DOM的詳細介紹請見：http://blog.csdn.net/zhouziyu2011/article/details/71171567

?

4、組件化

React以組件的方式去重新思考用戶界面的構成，將用戶界面上每一個功能相對獨立的模塊定義成組件，然后將小組件通過組合或嵌套的方式構成大組件，最終完成整體UI的構建。

MVC開發模式的思想：將模型—視圖—控制器定義成不同的類，實現表現，數據，控制的分離。

組件化開發模式的思想：用戶界面功能模塊間的分離，完全是一個新思路，從功能的角度出發，將用戶界面分成不同的組件，每個組件都獨立封裝。

1)?組件的特征：

①　可組合：一個組件可以包含其它組件，也可以嵌套在另一個組件內部。也就是說，一個復雜的UI可以拆分成多個簡單的UI組件；

②　可重用：每個組件都是具有獨立功能的，可用于多個場景；

③　可維護：每個小組件僅包含自身的邏輯，更容易被維護。

2)?組件的屬性：

①　組件名稱首字母必須大寫；

②　變量名用{}包裹，不能加雙引號；

③　獲取屬性的值：this.props.屬性名；

④　為元素添加css的class：className；

⑤　設置組件的style屬性：style={{width: this.state.witdh}}。

3)?組件的狀態

React的一大創新，是將組件看成一個狀態機。

①　設置一個初始狀態：getInitialState()，注意：getInitialState()函數必須有返回值，可以是NULL或一個對象；

②　訪問狀態屬性的值：this.state.屬性名；

③　更新狀態，觸發重新渲染用戶界面：this.setState()。

4)?組件的生命周期

組件的生命周期分成三個狀態：

①　Mounting：已插入真實DOM

②　Updating：正在被重新渲染

③　Unmounting：已移除真實DOM

React 為每個狀態都提供了兩種處理函數，will函數在進入狀態之前調用，did函數在進入狀態之后調用，共計五種處理函數：

①　componentWillMount()

②　componentDidMount()

③　componentWillUpdate(object nextProps, object nextState)

④　componentDidUpdate(object prevProps, object prevState)

⑤　componentWillUnmount()

此外，React 還提供兩種特殊狀態的處理函數：

①　componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用

②　shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時調用

有關組件的生命周期的詳細介紹請見：http://blog.csdn.net/zhouziyu2011/article/details/71172783

5)?組件的嵌套

React是基于組件化的開發，組件化開發最大的優點是復用。實現復用的方式之一便是組件嵌套。

var MyBox = React.createClass({
render: function() {
return (
<div>
用戶名：<Input type="text"></Input><br/>
密碼：<Input type="password"></Input>
</div>
);
}
});
var Input = React.createClass({
render: function() {
return (
<input type={this.props.type} />
);
}
});
ReactDOM.render(
<MyBox />,
document.getElementById('content')
);
?

5、JSX語法

HTML直接寫在JavaScript中，不加任何引號，就是JSX的語法，允許HTML與JavaScript的混寫。

JSX允許直接在模板插 JavaScript變量。如果該變量是一個數組（直接的JavaScript數組或通過map()、filter()等返回的數組），則會展開數組的所有元素。

1)?直接的JavaScript數組：

var arr = [
<p key="1">Alice</p>,
<p key="2">Bruce</p>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('content')
);
2)?通過map()返回的數組：

var arr = ['Alice','Bruce'];
ReactDOM.render(
<div>
{
arr.map(function(item, index) {
return <p key={index}>{item}</p>
})
}
</div>,
document.getElementById('content')
);
?

6、顯示數據

React讓顯示數據變得簡單，當數據變化時，用戶界面會自動同步更新。可以認為React組件就是簡單的函數，接受?props?和?state作為參數，然后渲染出HTML。

var HelloWorld = React.createClass({
render: function() {
return (
<div>
<input type="text" placeholder="Please enter your name!" />
{this.props.date.toString()}
</div>
);
}
});
setInterval(function() {
ReactDOM.render(
<HelloWorld date={new Date()} />,
document.getElementById('timeBox')
);
}, 1000);
React在用戶界面中只改變了時間，任何在輸入框輸入的內容一直保留，React已經完成這個功能，不需要額外寫任何代碼。

限制：React組件只能渲染單個根節點，若想返回多個節點，它們必須被包含在同一個節點里。

注意：React中可以使用jQuery，但render()方法的第二個參數必須使用JavaScript原生的getElementById()方法，不能使用jQuery來獲取DOM節點。

轉載于:https://www.cnblogs.com/YbchengXumin/p/10984846.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的【转载】浅谈React编程思想的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。