Props（屬性）和 State（狀態(tài)）
1.1 Props（屬性）
Props 屬性用于把父組件的中的數(shù)據(jù)或者方法傳遞給子組件澳迫，供子組件使用橄登，他是一個(gè)簡(jiǎn)單的結(jié)構(gòu)對(duì)象。在子組件的生命周期內(nèi)是不可改變的谣妻。
1.2 State（狀態(tài)）
State 是組件的內(nèi)部狀態(tài)卒稳，State 的變化最終將反應(yīng)到組件的 UI 變化上，通常是在組件的 constructor 中通過(guò) this.state 定義組件的初始狀態(tài)减江，通過(guò) this.setState 來(lái)改變組件的狀態(tài)捻爷。
1.2.1如何判斷變量是否屬于state
- 變量是否通過(guò)props獲取，如果是那么它不是 state
- 變量是否在整個(gè)生命周期內(nèi)保持不變茵休，如果是那么它不是 state
- 這個(gè)變量是否通過(guò)其他的state或者props計(jì)算得到手蝎，如果是那么它不是 state
- 這個(gè)變量是否在render中使用棵介，如果不是，如果是那么它不是 state
1.2.2 使用state 注意事項(xiàng)
- 不能通過(guò)
this.state.{val}來(lái)修改值唠雕，必須通過(guò)this.setState來(lái)改變組件的狀態(tài)。 - state的更新是異步的
-
this.setState的更新是一個(gè)合并的過(guò)程钞脂，我們只需要傳入發(fā)生改變的state即可捕儒。
2 組件的定義
組件是react的核心概念，將應(yīng)用的 UI 拆分成獨(dú)立的阎毅、可復(fù)用的模塊点弯，React 應(yīng)用是由一個(gè)個(gè)組件搭建而成抢肛。
定義一個(gè)組件有兩種方式，使用Class （類組件）和 使用函數(shù)（函數(shù)組件）燃领。
2.1 Class 類組件
類組件的定義需要滿足以下兩個(gè)條件
- class 繼承自 React.Component
- class內(nèi)部必須定義 render 方法锦援，返回代表該組件的 UI 的 React 元素。
import React, { Component } from 'react';
class Text extends Component {
render() {
return (
<View ></View>
)
}
}
2.2 有狀態(tài)組件和無(wú)狀態(tài)組件
state 是用來(lái)反映組件內(nèi)部狀態(tài)的變化曼库，如果一個(gè)組件內(nèi)容的狀態(tài)是不可變的略板，我們就不需要使用state叮称，這樣的組件稱為無(wú)狀態(tài)組件。反之赂韵，我們稱為有狀態(tài)組件挠蛉。
無(wú)狀態(tài)組件除了可以使用 class 來(lái)定義，也可以使用函數(shù)定義质涛，也就是函數(shù)組件。如下
funtion Welcome (props) {
return <h1>Hello, {props.name} </h1>;
}
在使用無(wú)狀態(tài)組件時(shí)怒炸，應(yīng)該盡量將其定義成函數(shù)組件瞬测。無(wú)狀態(tài)組件的使用不需要關(guān)心狀態(tài)的變化纠炮，只聚焦UI的展示恢口，無(wú)狀態(tài)組件更容易被復(fù)用。
3 組件的生命周期
組件的生命周期分為三個(gè)階段：掛載階段因妇、更新階段和卸載階段
3.1 掛載階段
組件執(zhí)行初始化被創(chuàng)建猿诸，并被掛載到 Dom 中，完成組件的第一次渲染址芯，依次執(zhí)行以下方法
(1) constructor
(2) componentWillMount
(3) render
(4) componentDidMount
constructor
class 的構(gòu)建方法窜觉，組件被創(chuàng)建時(shí)禀挫，首先會(huì)調(diào)用該方法，接收一個(gè)props參數(shù)描孟，props默認(rèn)是從父組件中傳入的屬性對(duì)象砰左，如果父組件沒(méi)有傳入菜职，props 指向的為組件的默認(rèn)屬性。需要優(yōu)先調(diào)用 super(props) 才能保證 props 被傳入組件中酬核。
該方法通常還用于 state 初始化和綁定事件處理方法等。
componentWillMount
該方法在組件被掛載 Dom 之前被調(diào)用举瑰，只會(huì)被調(diào)用一次此迅，在該方法中調(diào)用 this.setState 不會(huì)引起組件的重新渲染。一般很少使用忍些。
render
定義組件的唯一必須方法坎怪，返回一個(gè) UI 的描述搅窿，本身并不渲染 UI，真正的渲染出頁(yè)面 DOM 工作由 React 自身負(fù)責(zé)闹司。
componentDidMount
組件被掛載到 DOM 后調(diào)用沐飘，只會(huì)被調(diào)用一次。該方法常用于網(wǎng)絡(luò)請(qǐng)求众弓，在該方法中調(diào)用this.setState 會(huì)引起組件的重新渲染隔箍。
3.2 更新階段
組件被掛載到 Dom后蜒滩，組件的 props 或者 state 引起的組件更新。
props 引起的組件更新本質(zhì)上是由渲染該組件的父組件引起的捡遍，當(dāng)父組件的render方法被調(diào)用時(shí)竹握，無(wú)論子組件的props是否發(fā)生變化，都會(huì)導(dǎo)致組件的更新谓传。
state引起的組件更新是通過(guò)調(diào)用 this.setState 來(lái)觸發(fā)的
(1) componentWillReceiveProps
(2) shouldComponentUpdate
(3) componentWillUpdate
(4) render
(5) componentDidUpdate
componentWillReceiveProps（nextProps）
該方法只會(huì)在props引起的組件更新時(shí)被調(diào)用续挟，nextProps 是父組件傳遞的最新 props。nextProps 的值可能和當(dāng)前的 props 是一致的跑芳。因此需要比較兩者來(lái)決定是否需要更新直颅。
shouldComponentUpdate（nextProps, nextState）
該方法決定是否需要繼續(xù)執(zhí)行更新际乘。由返回值true和false控制漂佩。一般通過(guò)比較 nextProps、nextState 和 當(dāng)前組件的 props养葵、state 來(lái)決定是否需要更新瘩缆。從而達(dá)到一些性能優(yōu)化庸娱。
componentWillUpdate （nextProps, nextState）
該方法在執(zhí)行render之前調(diào)用，可在組件更新前執(zhí)行某些工作归露，很少用到斤儿。
componentDidUpdate（prevProps, prevState）
組件更新完成后被調(diào)用往果。prevProps、prevState 代表組件更新前的 props堕油、state 。
3.3 卸載階段
這個(gè)過(guò)程只有一個(gè)方法
(1) componentWillunmount
執(zhí)行一些清理工作例如定時(shí)器等掉缺，防止引起內(nèi)存泄漏
