用ES6書寫React · 我的前端之路

前段時間學習react+redux的時候發現現在大家基本上都是在用es6的方式編寫react代碼。由于習慣了react本身的編寫方式，起初看得云里霧里。當自己實踐過后發現es6+react確實能夠讓代碼更加簡潔，提高開發效率。 ###起步首先需要安裝react ~~~ npm install react react-dom --save-dev ~~~ 使用es6（7）需要babel轉換器，本人使用的是webpack自動化工具 ~~~ npm install webpack --save-dev npm install babel-preset-es2015 --save-dev //轉換至es5 npm install babel-preset-react --save-dev //轉換jsx至es5 npm install babel-preset-stage-0 --save-dev //支持es7 npm install babel-loader --save-dev //webpack的babel加載器 ~~~ 配置webpack ~~~ //webpack.config.js module.exports={ entry:"./main.js", output:{ path:__dirname, filename:"app.js" }, module:{ loaders:[{ test:/\.js$/, exclude:/node_modules/, loader:"babel", query:{ presets:["es2015","stage-0","react"] } }] } } ~~~ 現在準備工作做好了，接下來的任務就是用新的方式編寫入口文件（main.js） ###ES6-React ####加載模塊通過引入react.js和react-dom.js我們可以直接使用React和ReactDOM這兩個對象，這是傳統的方式 ~~~ //html中需要先引入react.js和react-dom.js console.log(React); console.log(ReactDOM); ~~~ 現在我們使用es6的方式 ~~~ //不需要提前引入任何文件 import React from "react"; import ReactDOM from "react-dom"; console.log(React); console.log(ReactDOM); ~~~ ####創建組件使用類來創建組件代替React.createClass ~~~ import React from "react"; class MyComponent extends React.Component{ //組件內部代碼 } ~~~ 你也可以用另一種方式 ~~~ import React,{Component} from "react"; class MyComponent extends Component{ //組件內部代碼 } ~~~ ####State/Props/PropTypes ~~~ //傳統的react var MyComponent=React.createClass({ getDefaultProps:function(){ return { name:"SunnyChuan", age:22 }; }, propTypes:{ name:React.PropTypes.string.isRequired, age:React.PropTypes.number.isRequired } }); ~~~ es6允許將props和propTypes當作靜態屬性在類外初始化 ~~~ class MyComponent extends React.Component{} MyComponent.defaultProps={ name:"SunnyChuan", age:22 }; MyComponent.propTypes={ name:React.PropTypes.string.isRequired, age:React.PropTypes.number.isRequired }; ~~~ es7支持直接在類中使用變量表達式，這也是我推薦的寫法 ~~~ class MyComponent extends React.Component{ static defaultProps={ name:"SunnyChuan", age:22 } static propTypes={ name:React.PropTypes.string.isRequired, age:React.PropTypes.number.isRequired } } ~~~ state和前兩個不同，它不是靜態的 ~~~ class MyComponent extends React.Component{ static defaultProps={ name:"SunnyChuan", age:22 } state={ isMarried:false } static propTypes={ name:React.PropTypes.string.isRequired, age:React.PropTypes.number.isRequired } } ~~~ ####函數 React.createClass本身接收的是一個對象，對于對象中的方法，es6允許使用`key(){}`的形式取代`key:function(){}` ~~~ class MyComponent extends React.Component{ state={ count:0 } handleChange(){ this.setState({count:this.state.count+1}); } } ~~~ 需要注意的是，由于使用class創建組件，react不會再自動幫我們綁定作用域了，我們需要自己手動解決 ~~~ class MyComponent extends React.Component{ state={ count:0 } handleChange(){ this.setState({count:this.state.count+1}); } render(){ return ( <div> <h2>當前計數是：{this.state.count}</h2> <button onClick={this.handleChange.bind(this)}>點擊</button> </div> ) } } ~~~ 如果你覺得這種每次都需要綁定的方法太瑪法，也可以在構造函數中去綁定 ~~~ class MyComponent extends React.Component{ constructor(props){ super(props); this.handleChange=this.handleChange.bind(this); } state={ count:0 } handleChange(){ this.setState({count:this.state.count+1}); } render(){ return ( <div> <h2>當前計數是：{this.state.count}</h2> <button onClick={this.handleChange}>點擊</button> </div> ) } } ~~~ 如果你覺得這種方式也麻煩，可以使用es6的箭頭函數（自動綁定作用域），但是前提是你的環境要支持es7，因為箭頭函數相當于表達式聲明函數的簡寫，只有es7支持在類中這么使用（類中使用表達式state/props/propTypes也只有es7支持） ~~~ class MyComponent extends React.Component{ state={ count:0 } handleChange=()=>{ this.setState({count:this.state.count+1}); } render(){ return ( <div> <h2>當前計數是：{this.state.count}</h2> <button onClick={this.handleChange}>點擊</button> </div> ) } } ~~~ ####組件生命周期所有的組件生命周期都可以當作普通函數使用上述三種方式編寫，componentWillMount比較特殊，它還可以在構造函數中編寫 ~~~ class MyComponent extends React.Component{ componentWillMount(){ console.log("Hello SunnyChuan"); } } //二者等價 class MyComponent extends React.Component{ constructor(props){ console.log("Hello SunnyChuan") } } ~~~ ####擴展操作符使用react開發最常見的問題就是父組件要傳給子組件的屬性較多時比較麻煩 ~~~ class MyComponent extends React.Component{ //假設MyComponent已經有了name和age屬性 render(){ return ( <SubComponent name={this.props.name} age={this.props.age}/> ) } } ~~~ 使用擴展操作符可以變得很簡單 ~~~ class MyComponent extends React.Component{ //假設MyComponent已經有了name和age屬性 render(){ return ( <SubComponent {...this.props}/> ) } } ~~~ 上述方式是將父組件的所有屬性都傳遞下去，如果這其中有些屬性我不需要傳遞呢？也很簡單 ~~~ class MyComponent extends React.Component{ //假設MyComponent有很多屬性，而name屬性不需要傳遞給子組件 var {name,...MyProps}=this.props; render(){ return ( <SubComponent {...Myprops}/> ) } } ~~~ 上述方法最常用的場景就是父組件的class屬性需要被單獨提取出來作為某個元素的class，而其他屬性需要傳遞給子組件 ####模塊化開發組件說了這么多，個人認為es6+react最吸引人的地方就是模塊化開發，將每個小（大）組件當作一個模塊 ~~~ //father.js import React from "react"; import ReactDOM from "react-dom"; import {SonComponent} from "son.js"; class FatherComponent extends React.Component{ //省去中間的業務邏輯 render(){ return (<SonComponent/>); } } ReactDOM.render(<FatherComponent/>,document.getElementById("ss")); ~~~ ~~~ //son.js import React from "react"; class SonComponent extends React.Component{ //省去中間的業務邏輯 render(){ return (<h2>"SunnyChuan"</h2>); } } export {SonComponent}; ~~~ 如果你把子組件的導出設置為default export，那么在導入時就不必再加{} ~~~ //father.js import SonComponent from "son.js"; ~~~ ~~~ //son.js export default class SonComponent extends React.Component{ //省去中間的業務邏輯 } ~~~