List總條數(shù): {this.state.list.length}
目前完成條數(shù): {this.state.didCount}
-
{
this.state.list.map(this.initListLi)
}
摘要:并根據(jù)官網(wǎng)文檔的語法順序,寫了對應(yīng)的的語法,并附一個教程。和受限元素一樣,使用事件可以監(jiān)聽值的變化。有一個初始值,但這個值用戶可以改變并會反應(yīng)到界面上。
寫在前面
以前寫Vue寫慣了,心血來潮,寫起了react。并根據(jù)Vue官網(wǎng)文檔的語法順序,寫了對應(yīng)的React的語法,并附一個教程demo。
教程的github地址:Close2React
項目使用框架版本主要有 react(15.4.1) + react-dom(15.4.1) + webpack(1.13.3) + axios(0.15.3) + node(6.2.2), 詳情具體可見下文的【環(huán)境配置】
目前該項目有兩個分支, half-es6 + master
half-es6和master實現(xiàn)的功能一樣, 實現(xiàn)了CURD + Axios + Others
half-es6的寫法并沒有完全使用es6的class的概念, master是完善了它
環(huán)境配置寫react就需要先配置webpack還有jsx
首先,新建一個項目,npm init
然后在package中加入下面這些依賴
"dependencies": { "react": "^15.4.1", "react-dom": "^15.4.1", }, "devDependencies": { "axios": "^0.15.3", "babel-core": "^6.18.2", "babel-loader": "^6.2.8", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "babel-preset-react-hmre": "^1.1.1", "bootstrap": "^4.0.0-alpha.2", "css-loader": "^0.26.1", "file-loader": "^0.9.0", "html-webpack-plugin": "^2.24.1", "node-sass": "^3.13.0", "open-browser-webpack-plugin": "0.0.3", "sass-loader": "^4.0.2", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^1.13.3", "webpack-dev-server": "^1.16.2" }
有兩個比較重要的指令
"scripts": { "dev": "webpack-dev-server --progress --profile --hot", "build": "webpack --progress --profile --colors" },webpack.config
在webpack的配置中,我想要的目錄結(jié)構(gòu)是橫向目錄(自創(chuàng)詞 ???,即所有index頁面要用到的東西,包括sass和js都寫在index目錄下,底下會有目錄示意圖),目的是達到,我在src下編輯我想要的文件,打包后生成到public下去。
寫在配置最前面的是路徑的配置
var ROOT_PATH = path.resolve(__dirname); var SRC_PATH = path.resolve(ROOT_PATH, "src"); var PUBLIC_PATH = path.resolve(ROOT_PATH, "Public");
配合著入口文件和輸出文件的配置
entry: { index: path.resolve(SRC_PATH, "index/index.js"), }, output: { path: PUBLIC_PATH, filename: "[name].bundle.js", },
主要的插件就是這個html生成的插件和自動打開瀏覽器的插件,還有babel的配置,不管三七二十一都把他們的等級開到最大
plugins: [ new HtmlwebpackPlugin({ title: "My first react-webpack" }), new OpenBrowserPlugin({ url: "http://localhost:8200" }) ], babel: { //配置babel "presets": ["es2015","stage-0", "react"], },
npm run dev,會自動打開localhost:8200,就可以在瀏覽器上看到初始化的頁面
jsx當你開始要寫js的時候發(fā)現(xiàn),怎么這么多警告,
不用擔心 google 一下都能解決。
在這里下載react 和 react-native:
并勾選對應(yīng)項,保存:
警告會少很多,但是還是有一些警告,怎么辦呢
點擊這個小燈泡,然后選擇configure
把這兩項勾選掉,保存,就一片清凈了。
項目描述Public是打包后生成的目錄,src是寫目錄
src采用橫向目錄結(jié)構(gòu)(自創(chuàng)詞 ???),即所有index頁面要用到的東西,包括sass和js都寫在index目錄下。
指令運行項目npm i
npm run build 生成打包后的文件
npm run dev
數(shù)據(jù)綁定{text}
balabalabalabala......."}} />3 屬性賦值
4 帶js表達式的插值 xxx = {三元表達式}
5 事件綁定
事件綁定和屬性綁定一樣
// 如果沒有使用class繼承的寫法的話 getInitialState() { return { tabTxt: ["CURD", "Axios", "Others"], choice: 0, } }, switchChoice(idx){ this.setState({ choice: idx }) }, renderTabInit(text, idx) { return ({text} ) },有可能會遇到一些BOOM爆炸的bug,請看react父子組件間的事件綁定
css和style的綁定1 className
className={this.props.idx == this.props.choice? "tab on" : "tab"}2 style
第一個括號是插值,第二個括號表示style對象 style={{color: "#FEC264", fontSize: "40px"}}列表渲染 & 條件渲染在getInitalState中定義了一個數(shù)組tabTxt
getInitialState() { return { tabTxt: ["CURD", "Axios", "Others"], choice: 0, } },循環(huán)渲染這個子組件,每個子組件有自己的唯一的key,作用和track-by(或v-bind:key)的作用類似
renderTabInit(text, idx) { return ({text} ) },列表渲染的v-for 在react中使用map
v-if 的條件渲染可用三元,如復(fù)雜判斷則需要在return前寫邏輯代碼
render() { let currentPage = null; if(this.state.choice == 0) { currentPage =表單控件} else if (this.state.choice == 1){ currentPage = } else { currentPage = } return ( ) }{currentPage}表單組件有幾個受用戶影響的屬性:
value,用于input、textarea組件
checked, 用于類型為 checkbox 或者 radio 的 input 組件
selected,用于option組件
每個表單控件都有一個onChange事件用來監(jiān)聽組件的變化:
受限組件當 input 或 textarea 的value 發(fā)生變化時
input 的 checked 狀態(tài)改變時
option 的 selected 狀態(tài)改變時
//es5 render: function() { return ; } // 在渲染出來的元素里輸入任何值都不起作用,因為 React 已經(jīng)賦值為 Hello!如果要讓用戶修改的值有用,則需要:
getInitialState() { return {value: "Hello!"}; }, handleChange(event) { this.setState({value: event.target.value}); }, render() { let value = this.state.value; return ; }不受限組件//es5 render: function() { return (父子組件通信Option 1 Option 2); } // 用戶輸入將立即反應(yīng)到元素上。 // 和受限元素一樣,使用 onChange 事件可以監(jiān)聽值的變化。 // default 有一個初始值,但這個值用戶可以改變并會反應(yīng)到界面上。// 父組件,相當于最大的組件 // 子組件是一個tab,和三個page,切換tab 就能切換 page const Content = React.createClass({ getInitialState() { return { tabTxt: ["CURD", "Axios", "Others"], choice: 0, // 當前選中的tab下標 } }, switchChoice(idx){ this.setState({ // 修改state choice: idx }) }, renderTabInit(text, idx) { return ({text} ) }, render() { let currentPage = null; if(this.state.choice == 0) { // 條件判斷 currentPage =} else if (this.state.choice == 1){ currentPage = } else { currentPage = } return ( ) } });{currentPage}在使用事件綁定choose={this.switchChoice} 的時候,因為沒有采用class的學法所以不用bind
class的寫法的時候需要bind: choose={this.switchChoice.bind(this)}
不用class的寫法的時候不綁定不會導(dǎo)致子組件的this指向錯誤,如果綁定了還會報錯(如綁定this會有警告)
使用了class的寫法的時候則需要手動bind, 這個在文章最后會詳細解說
// tab 子組件 const Tab = React.createClass({ chooseTab() { this.props.choose(this.props.idx); //一定要將父組件的方法在子組件中做一個中轉(zhuǎn) }, render(){ return ( {this.props.children} ) } });
獲取dom元素當你的組件還沒有掛載在容器上,可以用this.refs訪問
已經(jīng)掛載完畢,通過react-dom提供findDOMNode方法拿到組件對應(yīng)的dom
另外:
如果ref是設(shè)置在原生HTML元素上,它拿到的就是DOM元素;
如果設(shè)置在自定義組件上,它拿到的就是組件實例,這時候就需要通過 findDOMNode來拿到組件的DOM元素。
//es5 var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.getDOMNode().focus(); // 通過this.refs.xxxxx拿到元素 }, render: function() { return (幾個常用api componentDidMount componentWillReceiveProps(nextProps) 花一分鐘,改成正統(tǒng)的class寫法// 給輸入框命名ref); } });第一步,把所有createClass 換成 class xxx extends Component。
我們用一半的es6的姿勢寫出來的代碼如下:
// half-es6 import React from "react"; const List = React.createClass({ // 用createdClass創(chuàng)建一個組件 getInitialState() { // 初始化數(shù)據(jù)state return { // 在函數(shù)的return里定義state status: false, } }, // 這里一定寫逗號 saveLiValue() { // 組件內(nèi)要調(diào)用的function this.setState({ status: false }) }, .... })我們用完整的es6的姿勢寫出來的代碼如下:
// master // 利用class姿勢的es6 import React, {Component} from "react"; class List extends Component{ constructor(props){ super(props); this.state = { status: false, } } // 沒有逗號 saveLiValue() { this.setState({ status: false }) } .... }第二步,在父組件中,給所有需要傳遞給子組件的方法加bind(this)。
這句話有點繞口,但一定要理解。
1、第一層意思是在父組件上加bind(this)
2、加的目的是防止子組件在調(diào)用方法的時候this指向錯誤
例如下面這個初始化列表的函數(shù)
// half-es6 // 如果在這種寫法下bind(this),編譯后的頁面會報警告 // 大概是說react已經(jīng)提供了豐富的方法可以避免指向錯誤,不需要手動bind initListLi(val, idx) { return () }, render() { return (
) } List總條數(shù): {this.state.list.length}
目前完成條數(shù): {this.state.didCount}
{ this.state.list.map(this.initListLi) }
但是使用了class的寫法之后,就可能會出現(xiàn)警告說 props 是null
這個時候就需要手動bind(this)
// master // es6的class寫法下的函數(shù)的事件綁定, // 如果子組件會需要調(diào)用函數(shù),則在父組件中手動向子組件中bind(this) initListLi(val, idx) { return (寫在后面) } render() { return (
) } List總條數(shù): {this.state.list.length}
目前完成條數(shù): {this.state.didCount}
{ this.state.list.map(this.initListLi.bind(this)) //子組件中會需要調(diào)用函數(shù) }
github地址:Close2React
我是嘉寶Appian,一個賣萌出家的算法妹紙。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/86608.html
摘要:比如在的時候組件掛載的時候會根據(jù)指定的參數(shù)繼續(xù)向下執(zhí)行,則會在掛載的時候還沒發(fā)生點擊事件就直接執(zhí)行了父組件的函數(shù)。即中轉(zhuǎn)函數(shù)的效果,保證了時的函數(shù)都是并且也防止了子組件在掛載時,順著調(diào)用父組件的函數(shù)從而避免了一系列錯誤。 寫在前面 以前寫Vue寫慣了,心血來潮,寫起了react。 github地址:Close2React 項目使用框架版本主要有 react(15.4.1) + reac...
摘要:是目前唯一一個支持同步調(diào)用的跨平臺年度上最多的個項目前端掘金年接近尾聲,在最近的幾篇文章中,會整理總結(jié)一些年度開源項目。 JS 全棧教程 - 前端 - 掘金本課程是基于阮一峰的 js 全棧教程的視頻版本,免費供大家觀看... 2016 年 10 個最佳的 CodePen 作品 - 前端 - 掘金說到 CodePen,前端開發(fā)者們肯定不會陌生。如果說 Dribbble 是設(shè)計師們聚集的圣...
摘要:作者兩年經(jīng)驗第一家任職的是個小公司第二家算是二線互聯(lián)網(wǎng)公司各待了一年吧能有機會去阿里面試很驚喜先來和大家分享一下面試經(jīng)歷電話面試初探因為還在職的緣故電話面試從晚上點鐘開始持續(xù)了半個小時左右一開始的時候特比緊張甚至聲音略有些顫抖簡單自我介紹做 作者兩年經(jīng)驗, 第一家任職的是個小公司, 第二家算是二線互聯(lián)網(wǎng)公司, 各待了一年吧... 能有機會去阿里面試很驚喜! 先來和大家分享一下面試經(jīng)歷....
摘要:前兩天有朋友拿了這樣一段代碼來問我,我想把一段代碼寫成模塊化的樣子,你幫我看看是不是這樣的。的一個好處在與依賴前置,所有被使用到的模塊都會被提前加載好,從而加快運行速度。 前兩天有朋友拿了這樣一段代碼來問我,我想把一段代碼寫成模塊化的樣子,你幫我看看是不是這樣的。,代碼大概是這樣的: (function(global) { var myModules = { n...
摘要:基礎(chǔ)鞏固基礎(chǔ)總結(jié)使用已經(jīng)好幾年了,由于工作主要是做服務(wù)端開發(fā),在工作中逐漸發(fā)現(xiàn)的使用范圍原來越廣泛。這里要注意,務(wù)必將基礎(chǔ)部分掌握牢靠,磨刀不誤砍柴功,只有將基礎(chǔ)部分掌握并建立起系統(tǒng)的知識體系,在后面學習衍生的其他模式才能游刃有余。 基礎(chǔ)鞏固:JavaScript基礎(chǔ)總結(jié) 使用JavaScript已經(jīng)好幾年了,由于工作主要是做服務(wù)端開發(fā),在工作中逐漸發(fā)現(xiàn)JavaScript的使用范圍原...
閱讀 1769·2021-10-19 13:30
閱讀 1335·2021-10-14 09:48
閱讀 1531·2021-09-22 15:17
閱讀 2007·2019-08-30 15:52
閱讀 3273·2019-08-30 11:23
閱讀 1983·2019-08-29 15:27
閱讀 887·2019-08-29 13:55
閱讀 753·2019-08-26 14:05