課程目標(biāo)
- 掌握React其他 API 使用：PureComponent、ref、children、dangerouslySetInnerHTML、key
- 掌握函數(shù)式組件及常見 hooks 的使用
- 可以獨(dú)立開發(fā)基于Hooks 或 Component 的 todoList 應(yīng)用
課程內(nèi)容
PureComponent
PureComponent 提供了一個(gè)具有淺比較的 shouldComponentUpdate 方法,其他和 Component 完全一直
ref
- 舊版 - string ref
- 主流 - createRef()
- 注意：在 組件掛載完成之后及更新之后使用
children
- 組件標(biāo)簽對(duì)之間的內(nèi)容會(huì)被當(dāng)做一個(gè)特殊的屬性 props.children 傳入組件內(nèi)容
- 可以自定義結(jié)構(gòu)的組件的常用形式
- children
- 傳遞函數(shù)
- 傳遞子組件
dangerouslySetInnerHTML
直接設(shè)置標(biāo)簽的 innerHTML
key 的問題
在 React ，組件每次更新時(shí)，會(huì)生成一個(gè) 虛擬DOM，和原有的虛擬DOM進(jìn)行對(duì)比。
如果是批量生成的一組元素，那React就會(huì)根據(jù) key 值去做對(duì)比
一個(gè)列表中的每一項(xiàng) key 是唯一的
如果列表中發(fā)生順序等操作變化，key 一定要用數(shù)據(jù)的id
實(shí)戰(zhàn) - 完整todoList
函數(shù)式組件
函數(shù)式組件中，沒有 state 和 生命周期，所以又被稱為 無狀態(tài)組件，在早期 react 版本中，被當(dāng)前純渲染組件來用
React hooks
React hooks 是React 16.8中的新增功能。它們使您無需編寫類即可使用狀態(tài)和其他React功能
參考：https://reactjs.org/docs/hooks-intro.html
React Hooks 優(yōu)勢(shì)
- 簡(jiǎn)化組件邏輯
- 復(fù)用狀態(tài)邏輯
- 無需使用類組件編寫
常用 hook
- useState
const [state, setState] = useState(initialState); - useEffect
類組件
componentDidMount、componentDidUpdate 和 componentWillUnmount
需要清除的副作用 - useRef
Hook 使用規(guī)則
- 只在最頂層使用 Hook
- 只在 React 函數(shù)中調(diào)用 Hook
- React 函數(shù)組件中
- React Hook 中 - 我自己定義 hook 時(shí)，可以調(diào)用別的hook
- 所有的 hook 必須 以 use
