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