[TOC] ## 前言 通過本文你將獲得對react的基本了解，并希望你能夠針對此做出正確的技術選型。 ## 框架特性 * 聲明式設計 ?React采用聲明范式，可以輕松描述應用。 * 高效 ?React通過對DOM的模擬，最大限度地減少與DOM的交互。 * 靈活 ?React可以與已知的庫或框架很好地配合。 * JSX ? JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ，但我們建議使用它。 * 組件 ? 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。 * 單向響應的數據流 ? React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什么比傳統數據綁定更簡單。 ## 開始上手 ### 安裝react 你可以通過cdn加載 ，比如下面的方式 ~~~ <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> ~~~ ### 通過npm加載 ~~~ $ npm install -g cnpm --registry=https://registry.npm.taobao.org $ npm config set registry https://registry.npm.taobao.org $ cnpm install -g create-react-app ~~~ ### 初始化react項目 該方法啟動的項目支持實時更新修改到視圖，入口是index.js文件，公共頁面在public中的index.html，默認載入的頁面為app.js文件。樣式與組件為分離的。 ~~~ $ create-react-app my-app $ cd my-app/ $ npm start ~~~ 啟動成功頁面：  **備注：** 如果提示你已經有3030端口占用，是否換一個端口，選擇yes即可 ## 基本語法（參照官網） ### 組件 #### 三種組件類型 ##### **1.無狀態純樣式函數組件，只是依賴prop展示內容** > **基本特點**： > 1 組件不會被實例化，整體渲染性能得到提升 > 因為組件被精簡成一個render方法的函數來實現的，由于是無狀態組件，所以無狀態組件就不會在有組件實例化的過程，無實例化過程也就不需要分配多余的內存，從而性能得到一定的提升。 > 2 組件不能訪問this對象 > 無狀態組件由于沒有實例化過程，所以無法訪問組件this中的對象，例如：this.ref、this.state等均不能訪問。若想訪問就不能使用這種形式來創建組件 > 3 組件無法訪問生命周期的方法 > 因為無狀態組件是不需要組件生命周期管理和狀態管理，所以底層實現這種形式的組件時是不會實現組件的生命周期方法。所以無狀態組件是不能參與組件的各個生命周期管理的。 > 4 無狀態組件只能訪問輸入的props，同樣的props會得到同樣的渲染結果，不會有副作用 > **使用建議**： > 被鼓勵在大型項目中盡可能以簡單的寫法來分割原本龐大的組件，有可能的情況下盡可能用無狀態組件 ~~~ function HelloComponent(props, /* context */) { return <div>Hello {props.name}</div> } ~~~ ##### **2.React.createClass** `React.createClass`是react剛開始推薦的創建組件的方式，這是ES5的原生的JavaScript來實現的React組件，屬于有狀態的組件，其形式如下： ~~~ var InputControlES5 = React.createClass({ propTypes: {//定義傳入props中的屬性各種類型 initialValue: React.PropTypes.string }, defaultProps: { //組件默認的props對象 initialValue: '' }, // 設置 initial state getInitialState: function() {//組件相關的狀態對象 return { text: this.props.initialValue || 'placeholder' }; }, handleChange: function(event) { this.setState({ //this represents react component instance text: event.target.value }); }, render: function() { return ( <div> Type something: <input onChange={this.handleChange} value={this.state.text} /> </div> ); } }); ~~~ 備注: 特點是無論是否需要事件都要綁定在組件上，導致不必要的開銷；混合函數mixin不夠直觀。 ##### **3.React.Component** 是以ES6的形式來創建react的組件的，是React目前極為推薦的創建有狀態組件的方式，最終會取代React.createClass形式；相對于 React.createClass可以更好實現代碼復用。 ~~~ class InputControlES6 extends React.Component { constructor(props) { super(props); // 設置 initial state this.state = { text: props.initialValue || 'placeholder' }; // ES6 類中函數必須手動綁定 this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ text: event.target.value }); } } ~~~ ### 狀態組件 除了使用外部傳入的數據以外 (通過 this.props 訪問傳入數據), 組件還可以擁有其內部的狀態數據 (通過 this.state 訪問狀態數據)。 當組件的狀態數據改變時， 組件會調用 render() 方法重新渲染。在下面的代碼實例中通過聲明周期的鉤子以及state實現了計時器顯示。 ~~~ //構造器中必須實現super繼承 否則拿不到this對象 constructor(props) { super(props); this.state={seconds:0} } ticker() { this.setState(prevState=>( { seconds :prevState.seconds+1 } )) } //組件渲染好時的鉤子函數 componentDidMount() { this.interval=setInterval(()=>this.ticker(),1000) } <span >timer:{this.state.seconds}</span> ~~~ 在實現一個點擊更改狀態的代碼，事件需要在構造器中綁定，另外需要注意的是標簽中的數據或者事件需要加this，需要加大括號。 ~~~ constructor(props){ super(props); this.state={liked:false} this.change=this.change.bind(this) } change(){ this.setState({liked:!this.state.liked}) } render({ var text=this.state.liked?'喜歡':'不喜歡'; return ( {text} <button onClick={this.change}>點擊切換</button> ） }） ~~~ ### todoList應用 使用事件，列表遍歷，值的使用我們可以實現一個簡單的todoList應用，代碼如下：（需要注意的是： - 無論數據還是事件都需要用{}使用 - 事件需要顯性的定義之后再綁定到構造器中 - 使用時需要申明是state中的還是prop中的 - 列表的循環用的是map的方式） ~~~ constructor(props){ super(props); this.state={text:'',items:[]} this.change=this.change.bind(this) this.submit=this.submit.bind(this) } change(e) { this.setState( { text:e.target.value } ) } submit(e){ e.preventDefault(); if (!this.state.text.length) { return; } const newItem = { text: this.state.text, id: Date.now() }; this.setState(prevState => ({ items: prevState.items.concat(newItem), text: '' })); } <h2>Todo list</h2> <ul> {this.state.items.map(item=>( <li key={item.id}>{item.text}</li> ) )} </ul> <input type="text" onChange={this.change} value={this.state.text}/><button onClick={this.submit}>添加items</button> ~~~  ### 引入第三方庫 React 的使用非常靈活，并且提供了可以調用其他第三方框架或庫的接口。下面這個示例就使用了一個用來渲染 markdown 語法，名為 remarkable 的庫。它可以實時轉換渲染 `<textarea>` 里的內容。 ~~~ import Remarkable from "remarkable" constructor(props){ super(props); this.state={text:''} this.change=this.change.bind(this) } change(e) { this.setState( { text:e.target.value } ) } getRawMarkup() { const md = new Remarkable(); return { __html: md.render(this.state.text) }; } <textarea type="text" onChange={this.change} value={this.state.text}>{this.state.text}</textarea> <div dangerouslySetInnerHTML={this.getRawMarkup()}/> ~~~  ## 調試工具 ### react-devtool [react-devtools](https://github.com/facebook/react-devtools) 你可以借助這個chrome的插件查看到react組件的周期以及狀態，方便你進一步的開發。（這個插件需要重啟瀏覽器才會生效） ### 其他 - [stackoverflow-reactjs](https://stackoverflow.com/questions/tagged/reactjs) - ## 相關教程 * [react官方教程](https://doc.react-china.org/tutorial/tutorial.html) * [阮一峰react教程](http://www.ruanyifeng.com/blog/2015/03/react.html) * [react-菜鳥教程](http://www.runoob.com/react/react-tutorial.html) * [react的簡單教程](https://github.com/ruanyf/react-demos) * [react-issues](https://github.com/facebook/react/issues) ## 相關ui框架 * [ant-mobile](https://mobile.ant.design/index-cn) * [ant-design(pc)](https://ant.design/index-cn)