寫在前面
以前寫Vue寫慣了,心血來潮,寫起了react。並根據Vue官網文件的語法順序,寫了對應的React的語法,並附一個教程demo。
專案使用框架版本主要有 react(15.4.1)
+ react-dom(15.4.1)
+ webpack(1.13.3) + axios(0.15.3)
+ node(6.2.2)
, 詳情具體可見下文的【環境配置】
目前該專案有兩個分支, half-es6
+ master
half-es6和master實現的功能一樣, 實現了CURD + Axios + Others
half-es6的寫法並沒有完全使用es6的class的概念, master是完善了它
環境配置
寫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的配置中,我想要的目錄結構是橫向目錄(自創詞 •༝•,即所有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的時候發現,怎麼這麼多警告,
不用擔心 google 一下都能解決。
在這裡下載react 和 react-native:
並勾選對應項,儲存:
警告會少很多,但是還是有一些警告,怎麼辦呢
點選這個小燈泡,然後選擇configure
把這兩項勾選掉,儲存,就一片清淨了。
專案描述
Public是打包後生成的目錄,src是寫目錄
src採用橫向目錄結構(自創詞 •༝•),即所有index頁面要用到的東西,包括sass和js都寫在index目錄下。
指令執行專案
-
npm i
-
npm run build
生成打包後的檔案 -
npm run dev
資料繫結
1 文字插值
<span>{text}</span>
2 html 插值
<div dangerouslySetInnerHTML={{__html: "<p>balabalabalabala.......</p>"}} />
3 屬性賦值
<span id = {this.props.idName}></span>
<span className = "nav-box"></span>
4 帶js表示式的插值 xxx = {三元表示式}
<span className={this.props.idx == this.props.choice? "tab on" : "tab"} ></span>
5 事件繫結
事件繫結和屬性繫結一樣
// 如果沒有使用class繼承的寫法的話
getInitialState() {
return {
tabTxt: [`CURD`, `Axios`, `Others`],
choice: 0,
}
},
switchChoice(idx){
this.setState({
choice: idx
})
},
renderTabInit(text, idx) {
return (<Tab key={idx} idx={idx}
choose={this.switchChoice} // 繫結了switchChoice方法
choice={this.state.choice} // 資料data的繫結,this.state可以獲取到整個state
>{text}</Tab>)
},
有可能會遇到一些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中定義了一個陣列tabTxt
getInitialState() {
return {
tabTxt: [`CURD`, `Axios`, `Others`],
choice: 0,
}
},
迴圈渲染這個子元件,每個子元件有自己的唯一的key,作用和track-by(或v-bind:key)的作用類似
renderTabInit(text, idx) {
return (<Tab key={idx} idx={idx}
choose={this.switchChoice}
choice={this.state.choice}
>{text}</Tab>)
},
列表渲染的v-for 在react中使用map
v-if 的條件渲染可用三元,如複雜判斷則需要在return前寫邏輯程式碼
render() {
let currentPage = null;
if(this.state.choice == 0) {
currentPage = <PageA />
} else if (this.state.choice == 1){
currentPage = <PageB />
} else {
currentPage = <PageC />
}
return (
<div id="content">
<div id="navBox">
{this.state.tabTxt.map(this.renderTabInit)}
</div>
<div id="pageBox">
{currentPage}
</div>
</div>
)
}
表單控制元件
表單元件有幾個受使用者影響的屬性:
value,用於input、textarea元件
checked, 用於型別為 checkbox 或者 radio 的 input 元件
selected,用於option元件
每個表單控制元件都有一個onChange事件用來監聽元件的變化:
當 input 或 textarea 的value 發生變化時
input 的 checked 狀態改變時
option 的 selected 狀態改變時
受限元件
//es5
render: function() {
return <input type="text" value="Hello!" />;
}
// 在渲染出來的元素裡輸入任何值都不起作用,因為 React 已經賦值為 Hello!
如果要讓使用者修改的值有用,則需要:
getInitialState() {
return {value: `Hello!`};
},
handleChange(event) {
this.setState({value: event.target.value});
},
render() {
let value = this.state.value;
return <input type="text" value={value} onChange={this.handleChange} />;
}
不受限元件
//es5
render: function() {
return (
<div>
<input type="radio" name="opt" defaultChecked /> Option 1
<input type="radio" name="opt" /> Option 2
<select defaultValue="C">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
</div>
);
}
// 使用者輸入將立即反應到元素上。
// 和受限元素一樣,使用 onChange 事件可以監聽值的變化。
// default 有一個初始值,但這個值使用者可以改變並會反應到介面上。
父子元件通訊
// 父元件,相當於最大的元件
// 子元件是一個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 (<Tab key={idx} idx={idx}
choice={this.state.choice} // keyidxchoice 分別都是作為props傳入tab子元件的引數名
choose={this.switchChoice} // choose 作為props作為傳入tab子元件的方法名
>{text}</Tab>)
},
render() {
let currentPage = null;
if(this.state.choice == 0) { // 條件判斷
currentPage = <PageA />
} else if (this.state.choice == 1){
currentPage = <PageB />
} else {
currentPage = <PageC />
}
return (
<div id="content">
<div id="navBox">
{this.state.tabTxt.map(this.renderTabInit)} //迴圈輸出
</div>
<div id="pageBox">
{currentPage}
</div>
</div>
)
}
});
在使用事件繫結choose={this.switchChoice} 的時候,因為沒有采用class的學法所以不用bind
class的寫法的時候需要bind: choose={this.switchChoice.bind(this)}
不用class的寫法的時候不繫結不會導致子元件的this指向錯誤,如果繫結了還會報錯(如繫結this會有警告)
使用了class的寫法的時候則需要手動bind, 這個在文章最後會詳細解說
// tab 子元件
const Tab = React.createClass({
chooseTab() {
this.props.choose(this.props.idx); //一定要將父元件的方法在子元件中做一箇中轉
},
render(){
return (
<span className={this.props.idx == this.props.choice? "tab on" : "tab"}
style={{color: `#FEC264`, fontSize: `40px`}}
data-idx={this.props.idx}
onClick={this.chooseTab} // 呼叫子元件的方法
>{this.props.children}</span>
)
}
});
獲取dom元素
當你的元件還沒有掛載在容器上,可以用this.refs訪問
已經掛載完畢,通過react-dom提供findDOMNode方法拿到元件對應的dom
另外:
如果ref是設定在原生HTML元素上,它拿到的就是DOM元素;
如果設定在自定義元件上,它拿到的就是元件例項,這時候就需要通過 findDOMNode來拿到元件的DOM元素。
//es5
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.getDOMNode().focus(); // 通過this.refs.xxxxx拿到元素
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" /> // 給輸入框命名ref
<input
type="button"
value="Focus the text input"
onClick={this.handleClick}
/>
</div>
);
}
});
幾個常用api
componentDidMount
componentWillReceiveProps(nextProps)
花一分鐘,改成正統的class寫法
第一步,把所有createClass 換成 class xxx extends Component。
我們用一半的es6的姿勢寫出來的程式碼如下:
// half-es6
import React from `react`;
const List = React.createClass({ // 用createdClass建立一個元件
getInitialState() { // 初始化資料state
return { // 在函式的return裡定義state
status: false,
}
}, // 這裡一定寫逗號
saveLiValue() { // 元件內要呼叫的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、加的目的是防止子元件在呼叫方法的時候this指向錯誤
例如下面這個初始化列表的函式
// half-es6
// 如果在這種寫法下bind(this),編譯後的頁面會報警告
// 大概是說react已經提供了豐富的方法可以避免指向錯誤,不需要手動bind
initListLi(val, idx) {
return (
<List {...val} key={idx} index={idx}
handleTxtChange={this.handleTxtChange}
handleCheckChange={this.handleCheckChange}
deleteItem={this.deleteItem}
/>
)
},
render() {
return (
<article className="page">
<h3 className="h3">List總條數: {this.state.list.length}</h3>
<h3 className="h3">目前完成條數: {this.state.didCount}</h3>
<ul className="ul">
{
this.state.list.map(this.initListLi)
}
</ul>
<Add addLiItem={this.addLiItem}/>
</article>
)
}
但是使用了class的寫法之後,就可能會出現警告說 props 是null
這個時候就需要手動bind(this)
// master
// es6的class寫法下的函式的事件繫結,
// 如果子元件會需要呼叫函式,則在父元件中手動向子元件中bind(this)
initListLi(val, idx) {
return (
<List {...val} key={idx} index={idx}
// 以下三個方法都是在向List元件中繫結this
handleTxtChange={this.handleTxtChange.bind(this)}
handleCheckChange={this.handleCheckChange.bind(this)}
deleteItem={this.deleteItem.bind(this)}
/>
)
}
render() {
return (
<article className="page">
<h3 className="h3">List總條數: {this.state.list.length}</h3>
<h3 className="h3">目前完成條數: {this.state.didCount}</h3>
<ul className="ul">
{
this.state.list.map(this.initListLi.bind(this)) //子元件中會需要呼叫函式
}
</ul>
<Add addLiItem={this.addLiItem.bind(this)}/>
</article>
)
}
寫在後面
我是嘉寶Appian,一個賣萌出家的演算法妹紙。