構(gòu)建組件的方式

1. 函數(shù)式組件（function）
2. createElement（不建議使用）
3. 類組件形式創(chuàng)建（不建議使用）

對于 React 的理解

React, 用于構(gòu)建用戶界面的JavaScript庫，本身只提供了Ul層面的解決方案。（遵循組件設(shè)計模式、聲明式編程范式和函數(shù)式編程概念，以使前端應(yīng)用程序更高效。）

使用虛擬D0M來有效地操作DOM，遵循從高階組件到低階組件的單向數(shù)據(jù)流。幫助我們將界面成了各個獨(dú)立的小塊，每一個塊就是組件，這些組件之間可以組合、嵌套，構(gòu)成整體頁面，且易于理解和增加可維護(hù)性。

比如類組件，jsx 會被 babel 編譯為合法的 js 語句。被傳入的數(shù)據(jù)可以通過 this.props 在 render() 中訪問。

class HelloMessage extends React.Component {render() {return <div>Hello {this.props.name}</div>;}
}
ReactDOM.render(<HelloMessage name="Taylor" />,document.getElementById("hello-example")
);

react 還有一些特性，jsx 語法、單向數(shù)據(jù)流（react 本身來說 props 只能通過父組件向子組件傳輸，不能反過來修改，便于對數(shù)據(jù)的控制）、虛擬 DOM（diff、patch，高效操作 DOM）、聲明式編程、Component（一切皆為組件）

聲明式編程：關(guān)注要做什么，而不是怎么做，我們可以根據(jù)邏輯的計算聲明要顯示的組件。

比如命令式編程，一步一步描述過程進(jìn)行操作：

const map = new Map.map(document.getElementById("map"), {zoom: 4,center: { lat, lng },
});const marker = new Map.marker({position: { lat, lng },title: "Hello Marker",
});marker.setMap(map);

然后 react 的聲明式編程只需要，聲明出頁面結(jié)構(gòu)，然后渲染頁面：

<Map zoom={4} center={(lat, lng)}><Marker position={(lat, lng)} title={"Hello Marker"} />
</Map>

state 和 props

state 用于維護(hù)自身組件的數(shù)據(jù)狀態(tài)，setState 用于修改這個數(shù)據(jù)狀態(tài)，進(jìn)行更新組件，重新調(diào)用組件的 render 方法；props 用來接收外部（單向數(shù)據(jù)流流，所以一般是父組件）傳過來的數(shù)據(jù)（在子組件內(nèi)為不可變的）。

class Button extends React.Component {constructor() {super();this.state = {count: 0,};}updateCount() {this.setState((prevState, props) => {return { count: prevState.count + 1 };});}render() {return (<button onClick={() => this.updateCount()}>Clicked {this.state.count} times</button>);}
}

setState 還可以接受第二個參數(shù)，它是一個函數(shù)，會在setState調(diào)用完成并且組件重新渲染之后被調(diào)用，可以用來監(jiān)聽渲染是否完成:

this.setState({name: "JS ",},() => console.log("setState finished")
);

super() 和 super(props) 的區(qū)別

super 代表父類的構(gòu)造函數(shù)，子類沒有自己的 this，只能繼承父類的 this 作為自己的 this，所以 super 的調(diào)用必須在constructor 的第一行 。調(diào)用 this ，一般需要傳入 props 作為參數(shù)，如果不手動傳入，react 內(nèi)部也會自動傳入 props 。所有無論有沒有 constructor ，render 中都是可以調(diào)用 this.props 的。

使用 super(name) 相當(dāng)于調(diào)用 father.prototype.constructor.call(this.name)

但是也不建議使用super()代替super(props)。因為在 React會在類組件構(gòu)造函數(shù)生成實例后再給 this.props賦值，所以在不傳遞 props在 super的情況下，調(diào)用 this.props 為undefined,如下情況：

class Button extends React.Component {constructor(props) {super(); // propsconsole.log(props); // {}console.log(this.props); // undefined// ...}
}

而傳入props的則都能正常訪問，確保了this.props在構(gòu)造函數(shù)執(zhí)行完畢之前已被賦值，更符合羅輯，如下：

class Button extends React.Component {constructor(props) {super(props); // propsconsole.log(props); // {}console.log(this.props); // {}// ...}
}

對于類組件和函數(shù)組件的理解

1. 寫法不同
2. 狀態(tài)管理（setState 、 useState）
3. 生命周期（函數(shù)組件不存在生命周期，它是使用 useEffect 替代生命周期發(fā)揮作用）
4. 調(diào)用方法（函數(shù)直接調(diào)用，類實例化后再調(diào)用render方法）
5. 獲取渲染的值

props 是只讀的，但是 this 是可變的（可以在 render 和生命周期讀取最新值），所以如果組件在請求運(yùn)行時更新，類組件 this.props 可以獲取最新的值，而 函數(shù)組件 props 仍是舊值（函數(shù)組件本身不存在 this）。

// function
function ProfilePage(props) {const showMessage = () => {alert('Followed ' + props.user);}const handleClick = () => {setTimeout(showMessage, 3000);}return (<button onClick={handleClick}>Follow</button>)
}
// class
class ProfilePage extends React.Component {showMessage() {alert('Followed ' + this.props.user);}handleClick() {setTimeout(this.showMessage.bind(this), 3000);}render() {return <button onClick={this.handleClick.bind(this)}>Follow</button>}
}