ReactJs介紹:
官方一句很簡單的話，道出了什麼是ReactJS，就是，一個用於構建用戶界面的JavaScript框架，是Facebook開發的一款的JS框架。ReactJS把複雜的頁面，拆分成一個個的組件，將這些組件一個個的拼裝起來，就會呈現多樣的頁面。
環境準備
安裝UmiJS
umi，中文可發音爲烏米，是一個可插拔的企業級 react 應用框架。你可以將它簡單的理解爲一個專注性能的類 next.js 前端框架，並通過約定、自動生成和解析代碼等方式來輔助開發，減少我們開發者的代碼量。
1.安裝Node.js
2.安裝yarn
#接下來，開始安裝yarn，其中tyarn使用的是npm.taobao.org的源，速度要快一些
#可以把yarn看做了優化了的npm
npm i yarn tyarn -g #-g 是指全局安裝
tyarn -v #進行測試，如果能夠正常輸出版本信息則說明安裝成功了
#如果安裝失敗，是由於將yarn添加到環境變量中導致，參見
http://www.easysb.cn/index.php/2017/06/04/11/
3.
#下面開始安裝umi
tyarn global add umi
創建HelloWorld工程
1.初始化項目
初始化完成
在命令輸入如下命令添加umi依賴：
創建config全局配置文件
在umi中，約定的目錄結構如下：
第二步，創建HelloWorld.js頁面文件
在umi中，約定存放頁面代碼的文件夾是在src/pages，可以通過singular:false來設置單數的命名方式，我們採用默認即可。
在HelloWorld.js文件中輸入如下內容：
部署項目
umi dev
JSX語法
JSX語法就是，可以在js文件中插入html片段，是React自創的一種語法。
JSX語法會被Babel等轉碼工具進行轉碼，得到正常的js代碼再執行。
使用JSX語法，需要2點注意：
- 標籤必須是閉合的
- 只有一個根元素
在JSX語法中，如果想要在html標籤中插入js腳本，需要通過{}插入js腳本。
組件
組件是React中最重要也是最核心的概念，一個網頁，可以被拆分成一個個的組件， 像這樣：的概念，一個網頁，可以被拆分成一個個的組件,列如
在React中，這樣定義一個組件：
import React from 'react';//第一步，導入React
class HelloWorld extends React.Component{//第二步，編寫類並且繼承 React.Component
render(){//第三步,重寫render渲染方法
return <div>HelloWorld_class!</div>
}
}
//第四部,導出該類
export default HelloWorld;
效果
導入自定義組件
import React from 'react'
import HelloWorld from './HelloWorld'
class Show extends React.Component{
render(){
return <div>111<HelloWorld/></div>;//使用HelloWorld組建
}
}
export default Show;
效果圖
組件參數
組件是可以傳遞參數的，有2種方式傳遞，分別是屬性和標籤包裹的內容傳遞，具體使用如下：
import React from 'react'
import HelloWorld from './HelloWorld'
class Show extends React.Component{
render(){
return <HelloWorld name="lisi">hubei</HelloWorld>;//使用HelloWorld組建
}
}
export default Show;
其中，name="zhangsan"就是屬性傳遞，shanghai就是標籤包裹的內容傳遞。容傳遞。
接收數據對應的也是2種方法：
屬性：this.props.name 接收；
標籤內容：this.props.children 接收；
import React from 'react';//第一步，導入React
class HelloWorld extends React.Component{//第二步，編寫類並且繼承 React.Component
render(){//第三步,重寫render渲染方法
return <div>HelloWorld_class! name={this.props.name},address=
{this.props.children}</div>
}
}
//第四部,導出該類
export default HelloWorld;
效果圖如下:
組件的狀態
每一個組件都有一個狀態，其保存在this.state中，當狀態值發生變化時，React框架會自動調用render()方法，重新渲染頁面。
其中，要注意兩點：
一： this.state值的設置要在構造參數中完成；
二：要修改this.state的值，需要調用this.setState()完成，不能直接對this.state進行修改；
下面通過一個案例進行演示，這個案例將實現：通過點擊按鈕，不斷的更新this.state，從而反應到頁面中。
import React from 'react'
class List extends React.Component{
constructor(props){
super(props);
this.state = {
dataList:[1,2,3]
}
}
render(){
return (
<div>
<ul>
{
this.state.dataList.map((value,index) => {
return <li key={index}>{value}</li>
})
}
</ul>
<button onClick={()=>{
let arr = [...this.state.dataList,this.state.dataList[this.state.dataList.length-1]+1];
this.setState({
dataList:arr
});
}}
>添加</button>
</div>
)
}
}
export default List;
初始狀態
點擊添加按鈕
生命週期
組件的運行過程中，存在不同的階段。React 爲這些階段提供了鉤子方法，允許開發者自定義每個階段自動執行的函數。這些方法統稱爲生命週期方法（lifecycle methods）。
