React是Facebook推出的面向視圖層開發(fā)的一個(gè)框架，用于解決大型應(yīng)用，包括如何很好地管理DOM結(jié)構(gòu)，是構(gòu)建大型，快速Web app的首選方式。

React使用JavaScript來構(gòu)建用戶界面，因此可以說是一個(gè)用來構(gòu)建用戶界面的JavaScript庫。

1、為什么使用?React？

React 是為了解決一個(gè)問題：構(gòu)建隨著時(shí)間數(shù)據(jù)不斷變化的大規(guī)模應(yīng)用程序。

1）簡(jiǎn)單：僅僅只要表達(dá)出應(yīng)用程序在任一個(gè)時(shí)間點(diǎn)應(yīng)該呈現(xiàn)的樣子，當(dāng)?shù)讓拥臄?shù)據(jù)變了，React會(huì)自動(dòng)處理所有用戶界面的更新。

2）聲明式：數(shù)據(jù)變化后，與點(diǎn)擊“刷新”按鈕類似，但僅會(huì)更新變化的部分。

3）構(gòu)建可組合的組件：React構(gòu)建可復(fù)用的組件，事實(shí)上通過React唯一要做的事情就是構(gòu)建組件，這得益于其良好的封裝性，組件使代碼復(fù)用、測(cè)試和關(guān)注分離更加簡(jiǎn)單。

?

2、對(duì)React認(rèn)識(shí)的誤區(qū)

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

2)?React和Web Component不能相提并論，兩者并不是完全的競(jìng)爭(zhēng)關(guān)系，完全可以用React去開發(fā)一個(gè)真正的Web Component；

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

?

3、React的原理

在Web開發(fā)中，總需要將變化的數(shù)據(jù)實(shí)時(shí)反應(yīng)到用戶界面上，這就需要對(duì)DOM進(jìn)行操作。而復(fù)雜或頻繁的DOM操作通常是性能瓶頸產(chǎn)生的原因。

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

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

有關(guān)虛擬DOM的詳細(xì)介紹請(qǐng)見：http://blog.csdn.net/zhouziyu2011/article/details/71171567

?

4、組件化

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

MVC開發(fā)模式的思想：將模型—視圖—控制器定義成不同的類，實(shí)現(xiàn)表現(xiàn)，數(shù)據(jù)，控制的分離。

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

1)?組件的特征：

①　可組合：一個(gè)組件可以包含其它組件，也可以嵌套在另一個(gè)組件內(nèi)部。也就是說，一個(gè)復(fù)雜的UI可以拆分成多個(gè)簡(jiǎn)單的UI組件；

②　可重用：每個(gè)組件都是具有獨(dú)立功能的，可用于多個(gè)場(chǎng)景；

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

2)?組件的屬性：

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

②　變量名用{}包裹，不能加雙引號(hào)；

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

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

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

3)?組件的狀態(tài)

React的一大創(chuàng)新，是將組件看成一個(gè)狀態(tài)機(jī)。

①　設(shè)置一個(gè)初始狀態(tài)：getInitialState()，注意：getInitialState()函數(shù)必須有返回值，可以是NULL或一個(gè)對(duì)象；

②　訪問狀態(tài)屬性的值：this.state.屬性名；

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

4)?組件的生命周期

組件的生命周期分成三個(gè)狀態(tài)：

①　Mounting：已插入真實(shí)DOM

②　Updating：正在被重新渲染

③　Unmounting：已移除真實(shí)DOM

React 為每個(gè)狀態(tài)都提供了兩種處理函數(shù)，will函數(shù)在進(jìn)入狀態(tài)之前調(diào)用，did函數(shù)在進(jìn)入狀態(tài)之后調(diào)用，共計(jì)五種處理函數(shù)：

①　componentWillMount()

②　componentDidMount()

③　componentWillUpdate(object nextProps, object nextState)

④　componentDidUpdate(object prevProps, object prevState)

⑤　componentWillUnmount()

此外，React 還提供兩種特殊狀態(tài)的處理函數(shù)：

①　componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時(shí)調(diào)用

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

有關(guān)組件的生命周期的詳細(xì)介紹請(qǐng)見：http://blog.csdn.net/zhouziyu2011/article/details/71172783

5)?組件的嵌套

React是基于組件化的開發(fā)，組件化開發(fā)最大的優(yōu)點(diǎn)是復(fù)用。實(shí)現(xiàn)復(fù)用的方式之一便是組件嵌套。

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中，不加任何引號(hào)，就是JSX的語法，允許HTML與JavaScript的混寫。

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

1)?直接的JavaScript數(shù)組：

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

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

6、顯示數(shù)據(jù)

React讓顯示數(shù)據(jù)變得簡(jiǎn)單，當(dāng)數(shù)據(jù)變化時(shí)，用戶界面會(huì)自動(dòng)同步更新。可以認(rèn)為React組件就是簡(jiǎn)單的函數(shù)，接受?props?和?state作為參數(shù)，然后渲染出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在用戶界面中只改變了時(shí)間，任何在輸入框輸入的內(nèi)容一直保留，React已經(jīng)完成這個(gè)功能，不需要額外寫任何代碼。

限制：React組件只能渲染單個(gè)根節(jié)點(diǎn)，若想返回多個(gè)節(jié)點(diǎn)，它們必須被包含在同一個(gè)節(jié)點(diǎn)里。

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

轉(zhuǎn)載于:https://www.cnblogs.com/YbchengXumin/p/10984846.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。