1、簡介??

　　React 是Facebook 開發并開源的前端框架

　　當時他們的團隊在市面上沒找到合適的MVC 框架，就自己寫一個 JS 框架，用來架設 instagram（圖片分享社交網路），2013年開源

　　React 解決的是前端MVC 框架中的view 視圖層的問題。

2、Virual DOM

　　DOM（文檔對象模型Document Object Model）

　　　

　　　　

　　將網頁內所有內容映射到一顆樹形結構的層級對象模型上，瀏覽器提供對DOM的支持，用戶可以是用腳本調用DOM API 來動態的修改DOM 結點，從而達到修改網頁的目的，這種修改是瀏覽器中完成的，瀏覽器會根據DOM 的改變重繪 改變DOM 結點部分。

　　修改DOM 重新渲染代價太高，前端框架為了提高效率，盡量減少DOM 的重繪，提出了Virtual DOM，所有的修改都是在現在的Cirtual DOM 上完成的，通過比較算法，找出瀏覽器DOM 之間的差異，使用這個差操作DOM，瀏覽器只需要渲染這部分變化就行了

　　React 實現了DOM Diff 算法，可以高效的對比Virtual DOM 和DOM 之間的差異。

3、支持JSX 語法

　　jsx 是 一種JavaScript 和XML 混寫的語法，是JavaScript的擴展

　　XML?被設計為傳輸和存儲數據,其焦點是數據的內容。 HTML 被設計用來顯示數據,其焦點是數據的外觀

　　

4、測試程序　

　　修改 /src/index.js:　

　　　　

　　修改 根目錄下的 index.html：在html文件中，提供一個div標簽，同時提供id ，使得react可以通過id找到

　　啟動 npm start 后

　　　　? ?

　　　　

　　程序解釋：

　　　　

　　　　import React from "react";? 導入 react 模塊

　　　　import ReactDom? from "react-dom"；導入react 的DOM 模塊

　　　　class Root extends React.Component ：組件類定義，從React.Component 類上繼承，這個類生成JSXElement對象即React元素。

　　　　render（）渲染函數，返回組件中渲染的內容，注意，只能返回唯一一個頂級元素回去　　　　　　　　　　　　

　　　　ReactDom.render（<Root/>, document.getElementById("root"））：第一個參數是JSXElement對象，第二個是DOM的Element元素，將React元素添加到DOM的Element 元素中并渲染。　也可以使用name，如果Element元素的屬性定義了name，document.getElementsByName("newroot")

　　　　（不推薦使用）還可以使用React.createElement創建react元素，第一參數是react組件或者一個HTML的標簽明后才能（如：div，span）　

?　　　　

　　增加一個子元素：　（這就是SPA網頁，單頁應用，普通的爬蟲就只能爬基本頁面了，因為此時，css和js分割開了）　圖二是 DOM數，虛擬DOM 是react的事　　　

?　　　　??

　　　　注意：

React組件的render函數return ，只能是一個頂級元素

JSX語法是XML，要求所有元素必須閉合，注意<br />

?　　　　JSX 規范：

• • • 約定標簽中首字符小寫就是html標記，首字母大寫就是組件
    • 要求嚴格的HTML標記，要求所有標簽都必須是閉合的，br也應該寫成<br /> ，/ 前留一個空格
    • 單行省略小括號，多行使用小括號
    • 元素有嵌套，建議多行，注意縮進
    • JSX表達式：表達式使用{ } 括起來，如果大括號內使用了引號，會當做字符串處理，例如 <div>{'2>1?true:fase'}</div>　　

?　　　　　　　　

5、組件狀態 state?

　　每一個 React組件 都有一個狀態屬性 state，它是一個JavaScript對象，可以為他定義屬性來保存值

　　如果狀態變化了，會觸發UI 的重新渲染，使用setState(）方法可以修改stste值

　　注意：state是每個組件自己內部使用的，是組件自己的屬性

　　依然修改/src/index.js

　　　　

　　　　解決方式1：

　　　　　　??

?　　　　　　可以使用延時函數，setTimeout（（）=> this.setState({ p1: ' jerry' })， 3000）? 是一個異步函數

　　　　　　但是 不要這樣使用，把setState放在別的地方　　　　　　

　　　　　　setInterval（） 每幾秒，執行一次，而 setTimeout 多少秒后，執行一次

　　復雜狀態的例子　　

　　　　

　　　　瀏覽器結果：

　　　　? ?========》點擊后

?

　　　　

　　　　　　　　　　　　　　div的id 是t1 ，鼠標按下事件捆綁了一個函數，只要鼠標按下就出觸發調用 getEventTrigger 函數，瀏覽器會送給他一個參數 event， event是事件對象，當事件觸發時，event 包含觸發這個時間的對象

?

　　HTML DOM的JavaScript 事件

　　　　　　

　　　　　　

　　　　使用React 實現上面的傳統的HTML

　　　　　　

　　　　　　

?

　　　　分析：

　　　　　　Toggle類

　　　　　　　　它有自己的state屬性

　　　　　　　　當render完成后，網頁上有一個div標簽，div標簽對象捆綁了一個click 時間的處理函數，div標簽內有文本內容

　　　　　　　　如果通過點擊左鍵，即觸發了一個click方法關聯的handleClick 函數，在這個函數里將狀態改變

　　　　　　　　狀態值state，的改變 將引發render重繪

　　　　　　　　如果組件自己的state變了，只會觸發自己的render方法重繪。　　

　　　　注意：

　　　　　　{this.handleClick.bind(this)} 不能外加括號

　　　　　　this.handleClick.bind(this) 一定要綁定this，否則當觸發捆綁的函數時，this是函數執行的上下文決定的，this已經不是觸發事件的對象了。

　　　　　　console.log(event.target.id) 取回的產生的對象的id，但是這不是我們封裝的組件對象，所以

　　　　　　console.log(event.target ===this) 是false，所以這里一定要使用this，而這個this是通過綁定來的

　　　　　　event.target 就是生成的一個塊 <div>-----</div>

　　　　React中的事件：

　　　　　　使用小駝峰

　　　　　　使用JSX表達式，表達式中指定事件處理函數

　　　　　　不能使用return false 如果要組織事件默認行為，使用event。preventDefault()　　

　　

6、屬性props：

　　props 就是組件的屬性properties。

　　把React組件當作標簽使用，可以為其增加屬性，如下：

　　　　<Toggle name="school" parent={this} />

　　為上面的Toggle 元素增加屬性：

name="school" ,這個屬性 會作為一個單一的對象傳遞給組件，加入到組件的porps 屬性中

parent = {this} 注意這個this是在Root 元素中，指的是Root組件本身

在Root中為使用JSX 語法為Toggle 增加子元素，這些子元素也會被加入到Toggle組件的props.childern中

　　　　　　

　　　　　　嘗試修改props 的屬性值，會拋出 TypeError：cannot assign to read only property “name” of object # <Object>異常

　　　　　　　　應該說， state是私有 private 的屬于組件自己的屬性，組件外無法直接訪問，可以修改state但是建議使用setState方法

　　　　　　　　props是公有public屬性組件外也可以訪問，但是只讀。

　　　　　　

7、構造器constructor：

　　使用ES 6 的構造器，要提供一個參數props， 并把這個參數使用super傳遞給父類

　　??

　　

8、組件的生命周期：

　　組件的生命周期可分為三個狀態

• • Mounting :已 插入真實的DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真實的DOM

　　組件的生命周期狀態，說明在不同時機訪問 組件，組件正在處于生命周期的不同轉臺上

　　在不同的生命周期狀態訪問，就產生不同的方法。

• • 裝載組件觸發
    • componentWillMOunt 在渲染前調用， 在客戶端---也在服務端。只會在裝載之前調用一次。
    • componentDidMount 在第一次渲染后調用，只在客戶端，之后組件已經生成了對應的DOM 結構可以通過this.getDOMNode（）來進行訪問，如果你想和其他JS 框架一起使用，可以在這個方法中調用setTimeout，setInterval或者發送AJAX 請求等操作（防止異步操作阻塞UI），只在裝載完成后調用一次，在render之后
  • 更新組件觸發，這些方法不會再首次render組件的周期調用
    • componentWillReceiveProps（nextProps）在組件接收到一個新的prop的時候，調用，這個方法在初始化render時不會被調用
    • shouldComponentUpdate（nextProps，nextState）返回一個布爾值，組件接收到新的props或者state時被調用，在初始化時或者使用forceUpdate時不會被調用
      • 可以在你確認不需要更新組件時 使用
      • 如果設置為false，就是不允許更新組件，那么componentWillUpdate，componentDidupdate不會執行　　
    • componentWillUpdate(nextProps, nextState) 在組件接收到新的props或者state但還沒有render時被調用，在初始化時不會被調用
    • componentDidUpdate（prevProps，prevState）在組件完成更新后立即被調用，在初始化時不會被調用　　　　　　　　
  • 卸載組件觸發
    • componentWillUnmount 在組件從DOM中移除的時候，立即被調用

　　　　　　　　　　

　　　　有圖可知：

　　　　　　constructor 構造器是最早執行的函數

　　　　　　觸發更新生命周期函數，需要更新 state 或 props

　　　　　　因此，重寫編寫 /scr/index.js

　　　　　　構造兩個組件，在子組件SUb中，加入所有生命周期函數

　　　　測試：裝載，卸載組件的生命周期函數。　　　　

1 import React from 'react'; 2 import ReactDom from 'react-dom'; 3 4 5 class Sub extends React.Component { 6 constructor (props){ 7 console.log("sub constructor") 8 super(props); 9 this.state = {count:0}; 10 } 11 handleClick(event) { 12 this.setState({count:this.state.count + 1}); 13 } 14 render() { 15 console.log('sub render'); 16 return ( 17 <div id="sub" onClick={this.handleClick.bind(this)}> 18 Sub's count = {this.state.count} 19 </div> 20 ); 21 } 22 23 componentWillMount() { 24 console.log('sub componentwillmont') 25 } 26 27 componentDidMount() { 28 console.log('sub componentdidmount') 29 } 30 componentWillUnmount(){ 31 console.log('sub componentdidunmount') 32 } 33 34 35 } 36 37 38 class Root extends React.Component{ 39 constructor (props) { 40 console.log("root constructor") 41 super(props); 42 this.state = {}; 43 44 } 45 render (){ 46 return( 47 <div> 48 <Sub /> 49 </div> 50 ) 51 } 52 } 53 54 ReactDom.render(<Root/>, document.getElementById("newroot"));

?

?　　結果：

? ? ? ? ?

?

?　　　　增加，更新組件函數：

　　　　　演示 props的改變，為Root增加一個click事件處理函數　

1 import React from 'react'; 2 import ReactDom from 'react-dom'; 3 import { runInAction } from 'mobx'; 4 5 6 class Sub extends React.Component { 7 constructor (props){ 8 console.log("sub constructor") 9 super(props); 10 this.state = {count:0}; 11 } 12 handleClick(event) { 13 this.setState({count:this.state.count + 1}); 14 } 15 render() { 16 console.log('sub render'); 17 return ( 18 <div style={{height:200 + "px", color:'red', backgroundColor:"#aaffff"}}> 19 <a id='sub' onClick={this.handleClick.bind(this)}> 20 sub'x count = {this.state.cont} 21 </a> 22 </div> 23 ); 24 } 25 26 componentWillMount() { 27 //constructor 之后，第一次render之前 28 console.log('sub componentwillmont') 29 } 30 31 componentDidMount() { 32 // 第一次render之前 33 console.log('sub componentdidmount') 34 } 35 componentWillUnmount(){ 36 //清理工作 37 console.log('sub componentdidunmount') 38 } 39 40 componentWillReceiveProps(nexProps) { 41 // props更新時，街道新的props，交給shouldComponentUpdate 42 // props組件內只讀，只能從外部改變 43 console.log(this.props) 44 console.log(nexProps) 45 console.log('sub com---receiveProps', this.state.count) 46 } 47 48 shouldComponentUpdate(nexProps, nextState) { 49 // 是否組件更新，props 或state 方式改變，返回布爾值，true才會更新 50 console.log('sub shuold--------', this.state.count, nextState) 51 return true 52 53 } 54 55 componentWillUpdate(nexProps, nextState) { 56 //同意更新后，真正更新前，之后調用rener 57 console.log('will update', this.state.count, nextState) 58 } 59 60 componentDidUpdate(prevProps, prevState){ 61 //同意更新后，真正更新后，在render在之后調用 62 console.log('did Update', this.state.count, prevState) 63 } 64 65 } 66 67 68 class Root extends React.Component{ 69 constructor (props) { 70 console.log("root constructor") 71 super(props); 72 this.state = {flag:true, name:'root'}; 73 74 } 75 handleClick(event){ 76 this.setState({ 77 flag:!this.state.flag, 78 name:this.state.flag ? this.state.name.toLowerCase() : this.state.name.toUpperCase() 79 }) 80 } 81 render (){ 82 return( 83 <div id='t1' onClick={this.handleClick.bind(this)}> 84 my name is {this.state.name} 85 <Sub /> {/* 父組件的render，會引起下一級組件的更新流程，導致props重新發送，即使子組件props沒有改變*/} 86 </div> 87 ) 88 } 89 } 90 91 ReactDom.render(<Root/>, document.getElementById("newroot"));

?

?　　componentWillMount 第一次裝載，在首次render之前，例如控制state，props

　　conpinentDidMount 第一次裝載結束，在首次render之后，

?　　

?

?

?

?

?

?

?

注：++ 原位置自動加1 ，+= 是調到棧里，加1 再返回

?

?

?

?10、無狀態組件

?　　React從15.0 開始支持無狀態組件，定義如下：

　　　　

?　　無狀態組件，也叫函數式組件

?　　開發中，很多情況下，組件其實很簡單，不需要state狀態，也不需要使用生命周期函數，無狀態組件很好的滿足了需要

　　無狀態組件函數應該提供一個參數props，返回一個React元素

　　無狀態組件函數本身就是 render函數

?　　改寫上面的代碼：箭頭函數

　　　　

?

?11、高階組件

?　　

?　　如果要在上例的Root組件進行增強怎么辦，例如將Root 組件的div 外部在加入其它的 div

　　

　　簡化Wrapper?　　

?　　　　

1 import React from 'react'; 2 import ReactDom from 'react-dom'; 3 // let Wrapper = function (Component/*傳入組件*/, props) { 4 // return ( 5 // <div> 6 // {props.schoolName} 7 // <hr /> 8 // <Component /> 9 // </div> 10 // ) 11 // } 12 // 柯里化 13 let Wrapper = function (Component) { 14 function _wrapper(props) { 15 return ( 16 <div> 17 {props.schoolName} 18 <hr /> 19 <Component /> 20 </div>) 21 } 22 return _wrapper 23 } 24 // 第一次簡化 25 let Wrapper = function(Component) { 26 return function _wrapper(props){ 27 return ( 28 <div> 29 {props.schoolName} 30 <hr /> 31 <Component /> 32 </div>) 33 } 34 } 35 //第二次簡化 36 let Wrapper = function(Component) { 37 return (props) => { 38 return ( 39 <div> 40 {props.schoolName} 41 <hr /> 42 <Component /> 43 </div>) 44 } 45 } 46 // 第三次簡化 47 let Wrapper = (Component) =>(props) => 48 ( 49 <div> 50 {props.schoolName} 51 <hr /> 52 <Component /> 53 </div> 54 ) 55 56 //整理 57 let Wrapper = (Component) =>(props) => <div> {props.schoolName} <hr /> <Component /> </div> 58 71 let Root = (props) => <div>Root</div> 72 73 // 返回新組件 74 let NewComp = Wrapper(Root) 75 ReactDom.render(<NewComp schoolName="jerry"/>, document.getElementById('newroot'))

?　　測試：加入子組件（無狀態組件）

　　

?

?12、裝飾器　　

?　　新版的ES2016中增加了裝飾器的支持，因此可以使用裝飾器來改造上面的代碼。

　　裝飾器是裝飾函數，類，不能對一個變量裝飾（這樣是不對的）

?　　

?　　ES 2016 的裝飾器只能裝飾類，所以，將Root改寫成類

?　　　　

?　　讓Root 也顯示schoolName

　　　　

?

13、帶參裝飾器

?　　想給裝飾器函數增加一個id 參數

1 import React from 'react'; 2 import ReactDom from 'react-dom'; 3 4 let Wrapper = (id, Component) =>(props) => 5 ( 6 <div id={id}> 7 {props.schoolName} 8 <hr /> 9 <Component /> 10 </div> 11 ) 12 13 // 柯里化 14 let Wrapper = id => Component => (props) => 15 ( 16 <div id={id}> 17 {props.schoolName} 18 <hr /> 19 <Component {...props}/> 20 </div> 21 ) 22 23 24 @Wrapper('123') // Root = wrapper("123")(Root) = (props) => ..... 25 26 class Root extends React.Component { 27 render(){ 28 return <div>Root ---- {this.props.address}</div> 29 } 30 } 31 32 ReactDom.render(<Root schoolName="jerry" address="somewhere"/>, document.getElementById('newroot'))

?

?　　　　

　　

?

　　

?

?

?

?

?

?

　　　　

?

轉載于:https://www.cnblogs.com/JerryZao/p/9986008.html

總結

以上是生活随笔為你收集整理的（React 框架）React技术的全部內容，希望文章能夠幫你解決所遇到的問題。

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