- 這些 on* 的事件監聽只能用在普通的 HTML 的標簽上，而不能用在組件標簽上。
- 在使用 React.js 的時候，并不需要擔心多次進行 setState 會帶來性能問題。
- state傾向于管理自己內部的狀態，props更傾向于由外部組件傳遞狀態
- 使用map(data, index)中的index作為key標簽是不好的做法，這只是掩耳盜鈴（具體原因大家可以自己思考一下）。記住一點：在實際項目當中，如果你的數據順序可能發生變化，標準做法是最好是后臺數據返回的 id 作為列表元素的 key。（思考：如果僅僅是靜態展示的內容，則直接使用index沒有什么大的問題，但是如果是動態渲染的就會出現key與順序不一致的問題，而且key的值要唯一穩定）
一個可用實踐
在不能使用random隨機生成key時，我們可以像下面這樣用一個全局的localCounter變量來添加穩定唯一的key值。
var localCounter = 1;
this.data.forEach(el=>{
el.id = localCounter++;
});
//向數組中動態添加元素時，
function createUser(user) {
return {
...user,
id: localCounter++
}
}
- 一個狀態被多個組件使用依賴的時候就要考慮狀態提升了，但是如果提升的層級過高，這時就需要考慮狀態管理工具的使用了，比如redux/mobx
-
日常出現的錯誤，要及時清除定時器，并且不能在已經unmount的組件上調用包含setState操作的方法，否則會出現下列圖片出現的錯誤
image.png - 我們一般會把組件的
state的初始化工作放在constructor里面去做；在componentWillMount進行組件的啟動工作，例如Ajax 數據拉取、定時器的啟動組件從頁面上銷毀的時候，有時候需要一些數據的清理，例如定時器的清理，就會放在componentWillUnmount里面去做。
示例
class Post extends Component {
constructor () {
super()
this.state = { content: '' }
}
componentWillMount () {
// 在componentWillMount中拉取數據
this._loadData()
}
async _loadData () {
this.setState({ content: '數據加載中...' })
const content = await getPostData()
this.setState({ content })
}
render () {
return (
<div>
<div className='post-content'>{this.state.content}</div>
<button onClick={() => {
this._loadData()
}}>刷新</button>
</div>
)
}
}
- diff算法參考資料
