React學習筆記01
React是什麼
React是用於構建使用者介面的JavaScript庫。由FaceBook開發的，能簡單，快速，高效地開發複雜和互動式的Web和移動UI。優點體現在開發效率、維護、組合擴充套件、生態、元件化思想等。現在，React有一個很大的支援社群。
React的特點:
宣告式。配合使用JSX，以宣告式編寫UI, 使得程式碼編寫容易，容易理解和維護。
元件化。通過React元件來構建各種UI，元件擁有狀態，當狀態資料改變時，React能有效地更新並正確地渲染元件。
跨平臺。一次學習，隨處編寫。可以在Web開發中使用，也可以使用 Node 進行伺服器渲染，還可以使用基於React的 React Native 開發原生移動應用。
Hello React
因為React本身是一個JavaScript庫，所以只要在HTML檔案中通過script 標籤引入相關的一些js檔案，就可以直接用React來編寫UI了。
<script type="text/babel">
ReactDOM.render(
<h1>Hello, React!</h1>,
document.getElementById('root')
);
</script>
大多的屬性的屬性值是方法。React.createElement就是我們常用的用來建立React元素。
JSX
JSX(JavaScript XML)是 JavaScript 定義的一套用於描述UI的擴充套件語法。使用JSX來編寫UI，使得程式碼的可讀性更好。在React開發中，經常會使用JSX來寫元件。
JSX語法
JSX語法有如下一些規則：
自定義元件使用是必須首字母大寫，首字母不大寫會直接解析為同名html標籤
屬性名稱用camelCase來定義
對於字串值，用引號
對於表示式，用大括號，可以在大括號內放置任何有效的 JavaScript 表示式。
一個標籤裡面沒有內容，可以使用 /> 來閉合標籤
JSX中編寫註釋用大括號將/* */語句包起來
key、ref 和 dangerouslySetInnerHTML屬性只在JSX中存在
使用到HTML的標記元素的class屬性名稱在JSX中是className
JSX中事件要使用小駝峰式寫法
style中的css屬性要使用小駝峰式寫法
React元素
React元素就是JSX表示式的值，通過React元素來渲染螢幕上的內容。ReactDOM 會負責更新 DOM 來與 React 元素保持一致。
將一個React元素渲染到HTML的節點（假設id = 'root'）上的方法是把它們傳入ReactDOM.render()方法中
const element =
Hello, world
;ReactDOM.render(element, document.getElementById('root'));
複製程式碼ReactDOM 會將元素和它的子元素與它們之前的狀態進行比較，並只會進行必要的更新來使 DOM 達到預期的狀態，從而提高效能。
React元件
React元件使用一個名為 render() 的方法，接收輸入的資料並返回需要展示的內容，展示的內容是由React元素構成的。
最簡單的React元件
建立一個繼承於React.Component的class
建立render方法並實現
class Welcome extends React.Component {
render() {
return
}
}
複製程式碼自定義元件名稱必須以大寫字母開頭。
在React應用中，UI是由一系列React元件構建起來的。這些元件將整個UI分成小的、獨立的甚至是可重用的部分。一個元件的變動不會影響到另一個元件。
元件資料管理
React元素會將 JSX 所接收的屬性（attributes）轉換為單個物件傳遞給元件，這個物件被稱之為 “props”。
元件有兩個很重要的屬性props 和 state。
元件使用外部資料 this.props
元件維護內部資料 this.state 和 this.setState()
元件的props屬性是隻讀的，它們總是在整個應用中從父元件傳遞到子元件。子元件永遠不能將 prop 送回父元件。這有助於維護單向資料流。即元件不能修改自身的props。
元件的state屬性是私有的，並且完全受控於當前元件。隨使用者操作、網路響應或者其他變化而需要動態更新UI的可以通過更新其state來實現。
修改this.state需要通過this.setState()方法，不要直接修改this.state
state的更新可能是非同步的
state的更新會被合併
當元件的狀態發生變化時，元件會再次呼叫render()方法重新渲染。
React元件生命週期
分三個階段：掛載階段、更新階段和解除安裝階段，始終使用props 引數來呼叫父類的建構函式
掛載階段：元件即將開始被新增到DOM階段。
更新階段：一旦元件被新增到DOM，它只有在 props 或state發生變化時才可能更新和重新渲染。
解除安裝階段：元件被銷燬並從 DOM 中刪除。這是元件生命週期的最後階段。
一些重要的生命週期方法：
componentWillMount() – 在渲染之前執行，在客戶端和伺服器端都會執行。
componentDidMount() – 僅在第一次渲染後在客戶端執行。
componentWillReceiveProps() – 當從父類接收到 props 並且在呼叫另一個渲染器之前呼叫。
shouldComponentUpdate() – 根據特定條件返回 true 或 false。如果你希望更新元件，請返回true 否則返回 false。預設情況下，它返回 false。
componentWillUpdate() – 在 DOM 中進行渲染之前呼叫。
componentDidUpdate() – 在渲染髮生後立即呼叫。
componentWillUnmount() – 從 DOM 解除安裝元件後呼叫。用於清理記憶體空間。
關於componentWill系列方法，在React16.9中提到
React元件事件處理
React元素同html標籤元素一樣，可以響應事件，其語法要求是
React事件的命名採用小駝峰
傳入一個函式作為事件處理函式
需要顯示呼叫preventDefault方法來阻止預設行為
在 JavaScript 中，類的方法預設不會繫結 this, 所以如果直接在React元素的響應事件方法中訪問this，得到的值是undefined，因此，需要通過bind繫結。
在建構函式中繫結
class Foo extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Click happened');
}
render() {
return ;
}
}
複製程式碼直接在render函式中繫結
class Foo extends Component {
handleClick() {
console.log('Click happened');
}
render() {
return ;
}
}
複製程式碼如果不想繫結bind，可以用箭頭函式。
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
);
}
}
複製程式碼在 render 方法中使用 Function.prototype.bind 和 箭頭函式 都會在每次元件渲染時建立一個新的函式, 這會影響效能。
5. 事件處理函式傳遞引數
<button onClick={() => this.handleClick(id)} />
// 等價
<button onClick={this.handleClick.bind(this, id)} />
複製程式碼向事件處理函式傳遞引數時，如果事件處理函式是箭頭函式，事件物件必須顯式的進行傳遞，如果是bind方式，事件物件可以被隱式傳遞。
元件更多語法
基本上就是將js的語法和JSX組合起來靈活的構建元件，比如條件語句、迴圈語句等。元件的className也可以是變數，根據不同的值來展示對應的樣式。
class Demo extends React.Component {
const numbers = [1, 2, 3, 4, 5];
const isShow = props.isShow
render() {
return
Hello
; const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
const showItem = isShow ? <div> showItem </div> : null
return (
<ul>{listItems}</ul>
{showItem}
);
}
}
複製程式碼因為JSX允許在大括號中嵌入任何表示式，所以上面render方法中的變數對應的表示式可以直接放到return中，替換掉變數
以下內容研究不深，等以後在實際開發中涉及到相關知識點的時候再回來研究