React簡(jiǎn)單介紹
React 背景知識(shí)
React 是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫(kù)，主要用于構(gòu)建 UI，而不是一個(gè) MVC 框架，但可以使用 React 作為 MVC 架構(gòu)的 View 層輕易的在已有項(xiàng)目中使用，它是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫(kù)，起源于 Facebook 的內(nèi)部項(xiàng)目，用來(lái)架設(shè) Instagram 的網(wǎng)站，于 2013 年 5 月開源。React 擁有較高的性能，代碼邏輯非常簡(jiǎn)單，越來(lái)越多的人已開始關(guān)注和使用它。
以前沒(méi)有 ajax 技術(shù)的時(shí)候，web 頁(yè)面從服務(wù)端整體渲染出 html 輸出到瀏覽器端進(jìn)行渲染，同樣的，用戶的一個(gè)改變頁(yè)面的操作也會(huì)刷新整個(gè)頁(yè)面來(lái)完成。直到有了 ajax 出現(xiàn)，實(shí)現(xiàn)頁(yè)面局部刷新，帶來(lái)的高效和分離讓 web 開發(fā)者們驚嘆不已。但隨之而來(lái)的問(wèn)題是，復(fù)雜的用戶交互及展現(xiàn)需要通過(guò)大量的 DOM 操作來(lái)完成，這讓頁(yè)面的性能以及開發(fā)的效率又出現(xiàn)了新的瓶頸。
時(shí)至今日，談到前端性能優(yōu)化，減少 DOM 元素、減少 reflow 和 repaint、編碼過(guò)程中盡量減少 DOM 的查詢等手段是大家耳熟能詳?shù)摹６?yè)面任何UI的變化都是通過(guò)整體刷新來(lái)完成的。幸運(yùn)的是，React 通過(guò)自己實(shí)現(xiàn)的 DOM Diff 算法，計(jì)算出虛擬頁(yè)面當(dāng)前版本和新版本之間的差異，最小化重繪，避免不必要的 DOM 操作，解決了這兩個(gè)公認(rèn)的前端性能瓶頸，實(shí)現(xiàn)高效 DOM 渲染。
我們知道，頻繁的操作 DOM 所帶來(lái)的性能消耗是很大的，而 React 之所以快，是因?yàn)樗恢苯硬僮?DOM，而是引進(jìn)虛擬 DOM 的實(shí)現(xiàn)來(lái)解決這個(gè)問(wèn)題
對(duì)于頁(yè)面的更新，React 通過(guò)自己實(shí)現(xiàn)的 DOM Diff 算法來(lái)進(jìn)行差異對(duì)比、差異更新，反映到頁(yè)面上就是只重繪了更新的部分，從而提高渲染效率。
備注：以下性能闡述參考自尤雨溪。
對(duì)于 React 的性能方面，想啰嗦幾句：
1. React 從來(lái)沒(méi)有說(shuō)過(guò) “React 比原生操作 DOM 快”。React 的基本思維模式是每次有變動(dòng)就整個(gè)重新渲染整個(gè)應(yīng)用。如果沒(méi)有 Virtual DOM，簡(jiǎn)單來(lái)講就是直接重置 innerHTML。
2. 在比較性能的時(shí)候，要分清楚初始渲染、小量數(shù)據(jù)更新、大量數(shù)據(jù)更新這些不同的場(chǎng)合。
3. 不要天真地以為 Virtual DOM 就是快，diff 不是免費(fèi)的，Virtual DOM 真正的價(jià)值從來(lái)都不是性能，而是它
1) 為函數(shù)式的 UI 編程方式打開了大門；
2) 可以渲染到 DOM 以外的其他場(chǎng)景，如 backend、native。
組件化
在業(yè)務(wù)開發(fā)中，遇到公共的模板部分，我們不得不將模板和規(guī)定的數(shù)據(jù)格式耦合在一起來(lái)實(shí)現(xiàn)組件。而在 React 中，我們可以使用 JSX 語(yǔ)法來(lái)封裝組件，將組件的結(jié)構(gòu)、數(shù)據(jù)邏輯甚至樣式都聚合在一起，更加簡(jiǎn)單、明了、直觀的定義組件。
有了組件化的實(shí)現(xiàn)，我們可以很直觀的將一個(gè)復(fù)雜的頁(yè)面分割成若干個(gè)獨(dú)立組件，再將這些獨(dú)立組件組合完成一個(gè)復(fù)雜的頁(yè)面。這樣既減少了邏輯復(fù)雜度，又實(shí)現(xiàn)了代碼的重用。
React 基礎(chǔ)
模板
<!DOCTYPE html>
<html>
<head>
<script src=“js/react.js”></script>
<script src=“js/react-dom.js”></script>
<script src=“js/browser.min.js”></script>
</head>
<body>
<div id=“example”></div>
<script type=“text/babel”>
/*
* ReactDOM.render 是 React 的最基本方法，用于將模板轉(zhuǎn)為 HTML 語(yǔ)言，
* 并插入指定的 DOM 節(jié)點(diǎn)。
*
*/
ReactDOM.render(
<h1>Hello, 博看文思!</h1>,
document.getElementById(‘example')
);
</script>
</body>
</html>
JSX
上一節(jié)的代碼， HTML 語(yǔ)言直接寫在 JavaScript 語(yǔ)言之中，不加任何引號(hào)，這就是 JSX 的語(yǔ)法，它允許 HTML 與 JavaScript 的混寫
JSX的好處：
1.使用JSX語(yǔ)法來(lái)封裝組件有什么好處：
1）熟悉的代碼
2）更加語(yǔ)義化
3）更加抽象且直觀
2.幾個(gè)注意點(diǎn)：
1）render的方法中return的頂級(jí)元素只能是一個(gè)；
2）如果要定義樣式的時(shí)候，不能這樣去寫
// 不要出現(xiàn)類似的錯(cuò)誤，style=“opacity:{this.state.opacity};”
3）使用 className 和 htmlFor 來(lái)替代對(duì)應(yīng)的class 和 for
提示：關(guān)于組件化的話題，感興趣的話可以繼續(xù)關(guān)注Vuejs、Web components等對(duì)組件的寫法。/**隨著更為復(fù)雜的多端環(huán)境的出現(xiàn)，組件標(biāo)準(zhǔn)化還有著更大的想象空間，React的組件定義不是終點(diǎn)，也不一定是標(biāo)準(zhǔn)，但會(huì)在組件化的道路上留下深刻de影響。**/
JSX 基本語(yǔ)法：
var names = [‘Alice', ‘Emily', ‘Kate'];
ReactDOM.render(
<div>
{
names.map(function (name,key) {
return <div key={key}>Hello, {name}!</div>
})
}
</div>,
document.getElementById(‘example')
);
上面代碼體現(xiàn)了 JSX 的基本語(yǔ)法規(guī)則：遇到 HTML 標(biāo)簽（以 < 開頭），就用 HTML 規(guī)則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規(guī)則解析。
JSX 允許直接在模板插入 JavaScript 變量。如果這個(gè)變量是一個(gè)數(shù)組，則會(huì)展開這個(gè)數(shù)組的所有成員。
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById(‘example')
);
組件
1.概念
React 允許將代碼封裝成組件（component），然后像插入普通 HTML 標(biāo)簽一樣，在網(wǎng)頁(yè)中插入這個(gè)組件。React.createClass 方法就用于生成一個(gè)組件類
2.代碼示例
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name=“John” />,
document.getElementById(‘example')
);
var HelloMessage = React.createClass({
render: function() {
return <h1 className=“green”>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name=“John” />,
document.getElementById(‘example')
);
this.props.children
this.props 對(duì)象的屬性與組件的屬性一一對(duì)應(yīng)，但是有一個(gè)例外，就是 this.props.children 屬性。它表示組件的所有子節(jié)點(diǎn)
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
/*
* 因?yàn)閠his.props.children的返回值會(huì)根據(jù)子節(jié)點(diǎn)的數(shù)量返回undefined,object,array.
* 所以react提供了一個(gè)react.Children的方法專門處理this.props.children
* */
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.getElementById(“example”)
);
PropTypes
組件的屬性可以接受任意值，字符串、對(duì)象、函數(shù)等等都可以。有時(shí)，我們需要一種機(jī)制，驗(yàn)證別人使用組件時(shí)，提供的參數(shù)是否符合要求。組件類的PropTypes屬性，就是用來(lái)驗(yàn)證組件實(shí)例的屬性是否符合要求。
var MyTitle = React.createClass({
propTypes: {
/*
* 聲明title屬性是必須的,并且數(shù)據(jù)類型要為字符串，相當(dāng)于是規(guī)范化的接口文檔
* */
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
var data = “123”;
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById(“example”)
);
錯(cuò)誤示范：
var data = 123;
ReactDOM.render(
<MyTitle title={data} />,
document.body
);
getDefaultProps
getDefaultProps 方法可以用來(lái)設(shè)置組件屬性的默認(rèn)值
var MyTitle = React.createClass({
getDefaultProps: function () {
return {
title:”hello world”
}
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
// var data = “123”;
ReactDOM.render(
<MyTitle />,
document.getElementById(“example”)
);
獲取真實(shí)的 DOM 節(jié)點(diǎn)
組件并不是真實(shí)的 DOM 節(jié)點(diǎn)，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬 DOM （virtual DOM）。只有當(dāng)它插入文檔以后，才會(huì)變成真實(shí)的 DOM 。根據(jù) React 的設(shè)計(jì)，所有的 DOM 變動(dòng)，都先在虛擬 DOM 上發(fā)生，然后再將實(shí)際發(fā)生變動(dòng)的部分，反映在真實(shí) DOM上，這種算法叫做 DOM diff ，它可以極大提高網(wǎng)頁(yè)的性能表現(xiàn)。
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type=“text” ref=“myTextInput” />
<input type=“button” value=“Focus the text input” onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById(‘example')
);
this.state
組件免不了要與用戶互動(dòng)，React 的一大創(chuàng)新，就是將組件看成是一個(gè)狀態(tài)機(jī)，一開始有一個(gè)初始狀態(tài)，然后用戶互動(dòng)，導(dǎo)致?tīng)顟B(tài)變化，從而觸發(fā)重新渲染 UI。React 把組件看成是一個(gè)狀態(tài)機(jī)（State Machines）。通過(guò)與用戶的交互，實(shí)現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面
var LikeButton = React.createClass({
getInitialState: function() {
/*
* 設(shè)置狀態(tài)的初始值
* */
return {liked: false};
},
handleClick: function() {
/*
* 更改狀態(tài)
* */
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? ‘喜歡' : ‘不喜歡';
return (
<p onClick={this.handleClick}>
你 {text} 他. 點(diǎn)擊切換.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById(‘example')
);
由于 this.props 和 this.state 都用于描述組件的特性，可能會(huì)產(chǎn)生混淆。一個(gè)簡(jiǎn)單的區(qū)分方法是，this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會(huì)隨著用戶互動(dòng)而產(chǎn)生變化的特性。
var Input = React.createClass({
getInitialState: function() {
return {value: ‘Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type=“text” value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.body);
組件 API
組件的7個(gè)方法:
設(shè)置狀態(tài)：setState；
替換狀態(tài)：replaceState；
設(shè)置屬性setProps；
替換屬性replaceProps；
強(qiáng)制更新：forceUpdate；
獲取DOM節(jié)點(diǎn)：getDOMNode；
判斷組件掛載狀態(tài)：isMounted。
組件生命周期
初始化
getDefaultProps：設(shè)置默認(rèn)性的值
getInitialState：設(shè)置初始的狀態(tài)
componentWillMount：（組件即將被裝載）
render（渲染）
componentDidMount：組件已經(jīng)被裝載，只會(huì)在第一個(gè)組件被調(diào)用的時(shí)候出發(fā)
運(yùn)行中
componentWillReceiveProps 在組件將要接收到屬性的時(shí)候，接收屬性前
shouldComponentUpdate 在接收到新的 props 或者 state，將要渲染之前調(diào)用。該方法在初始化渲染的時(shí)候不會(huì)調(diào)用
componentWillUpdate render 觸發(fā)之前，更新
render 渲染
componentWillUnmount 在組件從 DOM 中移除的時(shí)候立刻被調(diào)用
銷毀
componentWillUnmount 在組件從 DOM 中移除的時(shí)候被立刻調(diào)用
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1){
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name=“world”/>,
document.body
);
因?yàn)?React 組件樣式是一個(gè)對(duì)象第一重大括號(hào)表示這是 JavaScript 語(yǔ)法，第二重大括號(hào)表示樣式對(duì)象
Ajax
上面代碼沒(méi)有使用 jQuery 完成 Ajax 請(qǐng)求，這是為了便于說(shuō)明。React 本身沒(méi)有任何依賴，完全可以不用jQuery，而使用其他庫(kù)。
var Input = React.createClass({
getInitialState: function () {
return {users:[]}
},
componentDidMount:function(){
var _this = this;
$.get(“http://localhost:8080/users?act=get”,function (data){
console.log(data);
_this.setState({
users:data
});
});
},
render: function () {
var users = this.state.users;
console.log(users);
return <table>
{
users.map(function (user,key){
return <tr key={key}><td>{user.firstName}</td><td>{user.lastName}</td></tr>
})
}
</table>
}
});
ReactDOM.render(<Input/>,document.getElementById(“test”));
以上所述是小編給大家介紹的React的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
React錯(cuò)誤邊界Error Boundaries
錯(cuò)誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯(cuò)誤,并打印這些錯(cuò)誤,同時(shí)展示降級(jí)UI,而并不會(huì)渲染那些發(fā)生崩潰的子組件樹2023-01-01
這篇文章主要為大家介紹了React Router V6更新內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
如何使用Redux Toolkit簡(jiǎn)化Redux
redux-toolkit是目前redux官方推薦的編寫redux邏輯的方法，針對(duì)redux的創(chuàng)建store繁瑣、樣板代碼太多、依賴外部庫(kù)等問(wèn)題進(jìn)行了優(yōu)化，官方總結(jié)了四個(gè)特點(diǎn)是簡(jiǎn)易的/有想法的/強(qiáng)勁的/高效的，總結(jié)來(lái)看，就是更加的方便簡(jiǎn)單了2022-12-12
在react類組件（class）寫法中，有setState和生命周期對(duì)狀態(tài)進(jìn)行管理，但是在函數(shù)組件中不存在這些，故引入hooks（版本：>=16.8），使開發(fā)者在非class的情況下使用更多react特性2022-08-08
react redux中如何獲取store數(shù)據(jù)并將數(shù)據(jù)渲染出來(lái)
這篇文章主要介紹了react redux中如何獲取store數(shù)據(jù)并將數(shù)據(jù)渲染出來(lái)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了react項(xiàng)目中使用插件配置路由的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了在create-react-app中使用sass的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要介紹了react-router-dom5如何升級(jí)到6問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
SOLID?是一套原則，它們主要是關(guān)心代碼質(zhì)量和可維護(hù)性的軟件專業(yè)人員的指導(dǎo)方針，本文給大家分享如何在React中應(yīng)用SOLID原則，感興趣的朋友一起看看吧2022-07-07
ReactNative集成個(gè)推消息推送過(guò)程詳解
這篇文章主要為大家介紹了ReactNative集成個(gè)推消息推送過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08