改變this指向的幾種方式：

//1.使用箭頭函數代替原始函數寫法：getState=()=>{}//2.在函數調用時給函數名加bind(this)方法：(bind中第一個參數表示修改this指向、第二個參數開始是用來傳遞數據的)onClick={this.getProps.bind(this,this.datas)}//3.在構造函數constructor中通過：this.函數名.bind(this,data)的方式修改this指向//4.調用時使用箭頭函數：onClick={()=>{this.getChange(datas)}}

實現數據雙向綁定：

React中默認是不能實現數據雙向綁定的，也就是說react只支持將數據從state中傳遞到頁面上，頁面上的數據不能傳遞到state中；但是可以通過value事件和onChange事件實現數據雙向綁定的效果，如：

class Header extends React.Component { constructor(props){super(props)this.state={messages:'hello'}}render() { return (<div><input type="text" value={this.State.messages} readOnly/>{/*注意:當只提供value屬性時，會渲染一個只讀的控件，此時若修改控件，會報警告；若不想報警告，那么就的加readOnly屬性*/}<input type="text" ref='inp' value={this.State.messages} onChange={changeData}/>{/*當value屬性和onChange事件同時使用時，可使用邏輯實現數據雙向綁定*/}</div>)}// 實現數據雙向綁定的邏輯：changeData=()=>{this.setState({// 獲取input中文本的方式：// 1.原生DOM的方式：getElementById('input').value// 2.使用refs獲取ref設置元素的方式：this.refs.inp.value// 3.使用事件對象的方式：e.target.valuemessages:this.refs.inp.value})}};

父組件向子組件傳遞數據：

// 1.傳統父組件向子組件傳入數據的方式：（一層一層的往下傳）// 最外層組件Boxo:export default class Boxo extends React.Component { constructor(props){super(props)this.state={colors:'yellow'}}render() { return (<div><Boxt colorboxt={this.state.colors}/>{/*1.將最外層組件的colors屬性值傳給中間組件*/}<span>最外層組件</span></div>)}}; // 中間組件Boxt:class Boxt extends React.Component { render() { return (<div><Boxth colorboxth={this.props.colorboxt}/>{/*2.最外層傳遞數據是用props的方式傳遞的，所以這里通過this.props的方式獲取數據，并以props的方式傳遞給最里層的組件*/}<span>中間組件</span></div>)}}; // 最里層組件Boxth: class Boxth extends React.Component { render() { return (<div><span style={{color:this.props.colorboxth}}>最里層組件</span>{/*3.在最里層組件中通過this.props的方式獲取數據*/}</div>)}}; // 2.通過context的方式傳遞數據：（最外層組件聲明一次，所有子組件可直接獲取）// 最外層組件Boxo:import ReactTypes from 'prop-types';export default class Boxo extends React.Component { constructor(props){super(props)this.state={colors:'yellow'}}getChildContext(){//1.在最外層組件中調用固定方法：getChildContext，此方法返回一個對象，對象中的屬性就是要傳遞的數據return {colorboxo:this.state.colors}}// 2.使用static childContextTypes={}固定寫法規定colorboxo數據的類型，記得引入prop-type包static childContextTypes = {colorboxo:ReactTypes.string}render() { return (<div><Boxt /><span>最外層組件</span></div>)}}; // 中間組件Boxt:class Boxt extends React.Component { render() { return (<div><Boxth /><span>中間組件</span></div>)}}; // 最里層組件Boxth: class Boxth extends React.Component { static childContextTypes = {//3.在子組件中繼續做數據類型校驗，校驗完就可以直接使用了colorboxo:ReactTypes.string}render() { return (<div><span style={{color:this.context.colorboxo}}>最里層組件</span>{/*4.通過this.context.屬性名獲取數據*/}</div>)}}; //3.新版React中Context的使用步驟：var Colors = React.createContext('blue');//1.使用React的createContext方法創建一個可被深入傳遞的對象，括號中為默認值// 最外面的子組件：export default class Boxo extends React.Component { render() { return (<Colors.Provider value='yellow'>{/*2.Colors對象使用Provider將當前的值傳遞給一下的組價，下面任何組件都能拿到該值；在這里將yellow做為新值傳遞下去*/}<Boxt/><span>最外面的組件</span></Colors.Provider>)}}; // 中間組件Boxt:class Boxt extends React.Component { render() { return (<div><Boxth /><span>中間組件</span></div>)}}; // 最里層組件Boxth: class Boxth extends React.Component { static contextType = Colors;//3.在子組件中使用 static contextType接收對象render() { return (<div><span style={{color:this.context}}>最里層組件</span>{/*4.通過this.context拿到從里向外最近的Provider的值，這里值為yellow*/}</div>)}};

JSX中的循環:

JSX中是不能寫循環的，但是可以將循環的元素存到數組中，在JSX中數組是直接被展開的,如：

// 遍歷的方式輸出10個li元素:var lis = [];for(var i = 0;i < 10; i++){var lie = <p key={i}>hello</p>;{/* 舊版JSX中當遍歷的元素相同時會有報錯，此時應該給循環元素中加key={i}確保每項不同，新版中不會報錯 */}lis.push(lie);}const elements =<div><ul>{lis}</ul></div>const box = document.getElementById('box');ReactDOM.render(elements,box);//當然上面只是一種方式，常用的方式如下：class Header extends React.Component { constructor(){this.state.datas=[{id:'1',names:'jack'},{id:'2',names:'honest'},{id:'3',names:'luck'}]}render() {return (<div>{/*利用map拿到數據，通過：{數據} 的方式渲染*/}{this.state.datas.map(item=>{return<span>{item.names}</span>})}</div>)}}; ReactDOM.render(<Header names='jack'/>, document.getElementById('box'));

React中樣式：

在React中使用樣式修飾元素，有兩種方式，如：

//1.外鏈式（推薦,但是需要優化，看注意）：import './css/main.css';//導入普通css樣式文件<span className='colors'>hello</span>//使用className定義類名使用外鏈式中的類樣式//2.行內式：<span style={{color:'yellow',fontSize:'18px'}}>hello</span>//行內式中style=接一對{}表示js語法，里面的{}表示屬性對象，這個對象可以提到外部，且屬性采用駝峰命名法，屬性值要使用引號包裹（屬性值單位為px時，可以省略單位和引號）//注意：因為上面外鏈式樣式是全局的樣式之間會沖突，但是React中沒有像vue中scoped一樣的指令，當然也是有辦法的(css模塊化，使類樣式私有)：//1.使用模塊化導入css樣式文件:import mainStyle from './css/main.css' ;不能直接import './css/main.css'的方式導入//2.修改webpack.config.js文件中處理css文件的css-loader為：'css-loader?modules&localIdentName=[name]_[local]-[hash:6]' 即,加參數//3.通過：mainStyle.類名 拿到具體的類樣式，如：<span classNmae={mainStyle.colors}>hello</span>//4.有時候可能會將私有的類暴露為全局的類，此時只需要在css文件中將某類名通過：:global{.類名}包裹，如：:global{.box}{width:100px;height:200px;border:1px solid;}//若同時想要私有和公有，那么就的使用兩個類樣式（公有和私有）

路由：

React在5.2.0版本中提供了兩套路由模塊，WEB版和 NATIVE版。做網站選擇web版(npm install react-router-dom)，做移動App選擇native版(npm install react-router-native)；這里選擇web形式進行介紹：

// 1.終端鍵入：npm install react-router-dom --save 安裝路由// 2.按需導入模塊：HashRouter(路由容器，包裹所有路由相關的東西，只需用一次)、Route(路由規則)、Link(路由鏈接)import {HashRouter,Route,Link} from 'react-router-dom';import Homeone from './components/homeone.js'import Hometwo from './components/hometwo.js'import Homethree from './components/homethree.js'export default class App extends React.Component{constructor(props){super(props)this.state={}}render(){//1.hashRouter容器里面只能有一個根節點，此容器包裹路由return <HashRouter><div><div>{/*2.Link類似vue中router-link*/}<Link to='/homeone'>頁面一</Link><Link to='/hometwo'>頁面二</Link><Link to='/homethree/fun/53'>頁面三</Link>{/* 這里傳遞的fun和53可以在組件中通過：this.props.match.params.type(or id)拿到 */}</div><div>{/*3.Route用來處理路由的規則并做元素占位（vue中router-view）,因此Route可放在不同的結構中；path匹配路由，component匹配渲染的組件*/}<Route path='/homeone' component={Homeone}></Route><Route path='/hometwo' component={Hometwo}></Route><Route path='/homethree/:type/:id' component={Homethree} exact></Route>{/*react中路由默認是不嚴格配置，也就是說只要Link中路由字符中包含path中字符則可匹配；若要開啟嚴格匹配模式：在Route中加exact即可*/}{/* 如果想要嚴格匹配且參數變化時，可以通過 /:type/:id 傳遞參數的形式匹配Link*/}</div></div></HashRouter>}}

JSX獨立文件：

react中jsx文件可以獨立存在，使用時在html文件引入即可，如：

//1.以下是JSX文件代碼(實際就是js文件,這里命名為：testjsx.js)，如const box = document.getElementById('box')var content=(<div>{/*JSX中可以使用js表達式,如運算，三元表達式，變量等*/}<h1>{1+1}</h1>{/*允許數組出現在JSX中，此時數組會自動展開所有項，如：*/}<div>{[1,'2','hello']}</div></div>{/*建議將內容用小括號包裹起來，這樣即使換行之類也不會影響*/});ReactDOM.render(content,box);//2.在html文件中引入以上文件：<body><div id="box"></div><script type="text/babel" src="testjsx.js"></script></body>

其他方式使用React依賴資源：

除導入模塊的方式引用資源外，還有一些方式引入資源，如：

引用CDN資源啟動React：

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title></title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><!--React核心庫--><script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script><!--提供與DOM相關功能的庫--><script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script><!--用來編譯JSX代碼將ES6轉化為ES5，生產環境不建議使用--></head><body><div id="box"></div><script type="text/babel">//這里type="text/babel"表示使用為JSXvar box = document.getElementById('box'); ReactDOM.render(<p>Hello</p>, box);//ReactDOM.render(content.element)方法將content內容渲染到element元素上，即：ReactDOM可以將瀏覽器DOM和React元素保持一致。</script></body></html>

安裝React相關資源引入啟動React：

1.新建一個文件夾，這里命名為reacttest,并在此文件夾下進入命令行2.命令鍵入：npm i babel-standalone react react-dom --save 安裝：babel-standalone、react、react-dom3.在reacttest文件夾中新建test.html文件，代碼入下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><script src="node_modules/babel-standalone/babel.min.js"></script><script src="node_modules/react/umd/react.development.js"></script><script src="node_modules/react-dom/umd/react-dom.development.js"></script></head><body><div id="box"></div><script type="text/babel">const box = document.getElementById('box');ReactDOM.render(<p>Hello</p>,box)</script></body></html>4.在瀏覽器打開test.html文件如果看到hello,則表示成功。

通過create-react-app啟動React：

create-react-app類似于vue中vue-cli,是快速搭建React項目環境的腳手架工具，具體使用如下：

1.新建一個文件夾，這里命名為：createreactapp（隨便找個文件打開終端即可，這里并非項目文件夾），并進入終端2.終端輸入：cnpm install create-react-app -g 全局安裝：create-react-app腳手架工具3.終端繼續輸入：npx create-react-app test 創建一個名為test的react項目文件夾；npx不是拼寫錯誤，它是npm5.2+附帶的package運行工具4.終端繼續輸入：cd test 切換到test目錄下5.終端繼續輸入: npm start 啟動項目，此時在瀏覽器輸入:http://localhost:3000此時就會看到react頁面7.在src目錄下App.js中，reader()括號中的內容將被顯示在瀏覽器中，實際開發中可以修改reader括號中的內容來達到項目的要求。8.打生產環境的包,終端輸入：npm run build ,同時build后的項目需要在服務器下才能訪問；否則打開的將是空白頁面；執行該命令前需要在 package.json 中新增條配置"homepage": "."9.將打包好的build文件夾中的內容全部復制部署到服務器上，（測試可以使用Apache本地服務器打開），通過訪問服務器地址即可看到react項目。

更新元素渲染：

React 元素都是不可變的，想要改變DOM就要創建新的元素并通過ReactDOM.render()重新渲染；值得注意的是 ReactDOM 首先會比較元素內容先后的不同，而在渲染過程中只會更新改變的部分。

事件處理：

React 元素的事件處理和 DOM 元素類似，區別：react中事件采用駝峰命名法、不能使用return false阻止默認行為，必須通過事件對象：e.preventDefault()阻止默認行為，如：

<button onClick={actions}>function actions(e){e.preventDefault();console.log('hello');}

獲取數據：

在React中可以使用es6中fetch來獲取數據，它是基于Promise封裝的，但是它不能跨域請求，具體用法如：

fetch(url)//fetch可異步請求數據，括號里面傳入接口地址；后面then表示請求成功，里面接收一個回調函數得到response對象，這里不能拿到數據.then(response=>{// console.log(response);return response.json()//response.json()可以拿到數據，這里return出去通過第二個then()拿到處理}).then(datas=>{console.log(datas);})

通過fetch-jsonp跨域請求數據：

fetch-json是一個第三方包，用來做跨域請求數據，具體用法如下：

//1.終端鍵入：npm install fetch-jsonp --save 下載fetch-jsonp//2.導入fetch-jsonp包：import fetchJSONP from 'fetch-jsonp'//3.使用fetch-jsonp獲取數據：（用法和fetch一樣）fetchJSONP(url).then(response=>{return response.json()}).then(datas=>{console.log(datas);})

文檔推薦：

上面只是簡單介紹React，想要了解更多，可閱讀相關中文文檔：https://react.docschina.org/docs/forms.html

Ant Design:

在React UI開發中，推薦使用Ant Design,使用時閱讀官方文檔即可。

一款UI設計語言，多為react服務，了解更多請閱讀相關文檔：https://ant.design/index-cn

electronjs:

使用 JavaScript，HTML 和 CSS 構建跨平臺的桌面應用程序（電腦端）框架。了解更多閱讀官方文檔：https://www.electronjs.org/

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的this指向、数据双向流、传递参数、JSX中循环、React中样式、路由、引入资源的其它方式、create-react-app脚手架、事件处理、获取数据、UI框架推荐、pc桌面应用electronjs的全部內容，希望文章能夠幫你解決所遇到的問題。

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