狀態(tài)提升
- 當(dāng)某個(gè)狀態(tài)被多個(gè)組件依賴或影響時(shí),就該把狀態(tài)提升到最近公共父組件中管理,用props傳遞數(shù)據(jù)或函數(shù)來管理這種依賴或影響的行為.
如何更好的管理這種被多個(gè)組件依賴或影響的狀態(tài)?
Redux狀態(tài)管理工具
掛載階段的組件生命周期(一)
我們把 React.js 將組件渲染腾降，并且構(gòu)造 DOM 元素然后塞入頁面的過程稱為組件的掛載
掛載過程Demo
componentWillMount:組件掛載開始之前,也就是在render之前調(diào)用
componentDidMount:組件掛載完成后,也就是在DOM元素插入頁面后調(diào)用
componentWillUnmount:在組件對(duì)應(yīng)DOM元素從頁面中刪除之前調(diào)用
掛載階段的組件生命周期(二)
一般把組件的state的初始化工作放在constructor里去做,在componentWillMount進(jìn)行組件的啟動(dòng)工作,如果有數(shù)據(jù)清理就放在componentWillUnmount里面去做
時(shí)鐘Demo
更新階段的組件生命周期
更新階段:就是setState導(dǎo)致React重新渲染組件并把組件的變化應(yīng)用到DOM元素上的過程,這是一個(gè)組件變化的過程
補(bǔ)充關(guān)于更新階段的組件生命周期：
- shouldComponentUpdate(nextProps, nextState)：你可以通過這個(gè)方法控制組件是否重新渲染链烈。如果返回 false 組件就不會(huì)重新渲染靖榕。這個(gè)生命周期在 React.js 性能優(yōu)化上非常有用根吁。
- componentWillReceiveProps(nextProps)：組件從父組件接收到新的 props 之前調(diào)用。
- componentWillUpdate()：組件開始重新渲染之前調(diào)用端盆。
- componentDidUpdate()：組件重新渲染并且把更改變更到真實(shí)的 DOM 以后調(diào)用怀骤。
ref和react中的DOM操作
我們可以給任意代表 HTML 元素標(biāo)簽加上 ref 從而獲取到它 DOM 元素然后調(diào)用 DOM API。但是記住一個(gè)原則：能不用 ref 就不用爱谁。特別是要避免用 ref 來做 React.js 本來就可以幫助你做到的頁面自動(dòng)更新的操作和事件監(jiān)聽晒喷。多余的 DOM 操作其實(shí)是代碼里面的“噪音”孝偎，不利于我們理解和維護(hù)访敌。
props.children和容器類組件
demo
嵌套的結(jié)構(gòu)在組件內(nèi)部都可以通過 props.children 獲取到，這種組件編寫方式在編寫容器類型的組件當(dāng)中非常有用衣盾。
dangerouslySetHTML和style屬性
demo
設(shè)置 innerHTML 可能會(huì)導(dǎo)致跨站腳本攻擊（XSS）寺旺，所以 React.js 團(tuán)隊(duì)認(rèn)為把事情搞復(fù)雜可以防止（警示）大家濫用這個(gè)屬性。這個(gè)屬性不必要的情況就不要使用势决。
<h1 style={{fontSize: '12px', color: 'red'}}>React.js 小書</h1>
style 接受一個(gè)對(duì)象阻塑，這個(gè)對(duì)象里面是這個(gè)元素的 CSS 屬性鍵值對(duì)，原來 CSS 屬性中帶 - 的元素都必須要去掉 - 換成駝峰命名果复，如 font-size 換成 fontSize陈莽，text-align 換成 textAlign。
用對(duì)象作為 style 方便我們動(dòng)態(tài)設(shè)置元素的樣式虽抄。我們可以用 props 或者 state 中的數(shù)據(jù)生成樣式對(duì)象再傳給元素走搁，然后用setState 就可以修改樣式，非常靈活
PropTypes 和組件參數(shù)驗(yàn)證
通過 PropTypes 給組件的參數(shù)做類型限制迈窟，可以在幫助我們迅速定位錯(cuò)誤私植，這在構(gòu)建大型應(yīng)用程序的時(shí)候特別有用；另外车酣，給組件加上 propTypes曲稼，也讓組件的開發(fā)、使用更加規(guī)范清晰湖员。
這里建議大家寫組件的時(shí)候盡量都寫 propTypes贫悄，有時(shí)候有點(diǎn)麻煩，但是是值得的娘摔。
我們?cè)谏弦浑A段的評(píng)論功能基礎(chǔ)上加上以下功能需求：
- 頁面加載完成自動(dòng)聚焦到評(píng)論輸入框窄坦。
- 把用戶名持久化，存放到瀏覽器的 LocalStorage 中。頁面加載時(shí)會(huì)把用戶名加載出來顯示到輸入框嫡丙，用戶就不需要重新輸入用戶名了拴袭。
- 把已經(jīng)發(fā)布的評(píng)論持久化，存放到瀏覽器的 LocalStorage 中曙博。頁面加載時(shí)會(huì)把已經(jīng)保存的評(píng)論加載出來拥刻，顯示到頁面的評(píng)論列表上。
- 評(píng)論顯示發(fā)布日期父泳，如“1 秒前”般哼，”30 分鐘前”，并且會(huì)每隔 5 秒更新發(fā)布日期惠窄。
- 評(píng)論可以被刪除蒸眠。
- 類似Markdown 的行內(nèi)代碼塊顯示功能，用戶輸入的用 `` 包含起來的內(nèi)容都會(huì)被處理成用 <code> 元素包含杆融。例如輸入
console.log就會(huì)處理成 <code>console.log</code> 再顯示到頁面上楞卡。
記錄下開發(fā)的流程:
1 聚焦評(píng)論框(focus())
2 持久化用戶名(在 handleUsernameBlur 中我們把用戶輸入的內(nèi)容傳給了 _saveUsername 私有方法（所有私有方法都以 _ 開頭）。)
3 持久化評(píng)論(JSON.stringify()-JSON.parse())
4 顯示評(píng)論發(fā)布時(shí)間(timeString , duration)
5 可以刪除評(píng)論
6 利用正則添加代碼塊顯示功能如 ``
