資訊專欄INFORMATION COLUMN
摘要：接下來是實戰(zhàn)環(huán)節(jié)，我們會繼續(xù)上一階段的例子，把評論功能做得更加復(fù)雜一點。把已經(jīng)發(fā)布的評論持久化，存放到瀏覽器的中。評論顯示發(fā)布日期，如秒前，分鐘前，并且會每隔秒更新發(fā)布日期。事件監(jiān)聽方法，。下一節(jié)中我們將介紹小書實戰(zhàn)分析評論功能五。
React.js 小書 Lesson25 - 實戰(zhàn)分析：評論功能（四）
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson25
轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
目前為止，第二階段知識已經(jīng)基本介紹完，我們已經(jīng)具備了項目上手實戰(zhàn)必備的 React.js 知識，現(xiàn)在可以把這些知識應(yīng)用起來。接下來是實戰(zhàn)環(huán)節(jié)，我們會繼續(xù)上一階段的例子，把評論功能做得更加復(fù)雜一點。
我們在上一階段的評論功能基礎(chǔ)上加上以下功能需求：
頁面加載完成自動聚焦到評論輸入框。
把用戶名持久化，存放到瀏覽器的 LocalStorage 中。頁面加載時會把用戶名加載出來顯示到輸入框，用戶就不需要重新輸入用戶名了。
把已經(jīng)發(fā)布的評論持久化，存放到瀏覽器的 LocalStorage 中。頁面加載時會把已經(jīng)保存的評論加載出來，顯示到頁面的評論列表上。
評論顯示發(fā)布日期，如“1 秒前”，”30 分鐘前”，并且會每隔 5 秒更新發(fā)布日期。
評論可以被刪除。
類似 Markdown 的行內(nèi)代碼塊顯示功能，用戶輸入的用 `` 包含起來的內(nèi)容都會被處理成用 元素包含。例如輸入 `console.log` 就會處理成 console.log 再顯示到頁面上。
在線演示地址。
大家可以在原來的第一階段代碼的基礎(chǔ)上進行修改，第一、二階段評論功能代碼可以在這里找到： react-naive-book-examples。可以直接使用最新的樣式文件 index.css 覆蓋原來的 index.css。
接下來可以分析如何利用第二階段的知識來構(gòu)建這些功能，在這個過程里面可能會穿插一些小技巧，希望對大家有用。我們回顧一下這個頁面的組成：
我們之前把頁面分成了四種不同的組件：分別是 CommentApp 、CommentInput、CommentList、Comment。我們開始修改這個組件，把上面的需求逐個完成。
自動聚焦到評論框這個功能是很簡單的，我們需要獲取 textarea 的 DOM 元素然后調(diào)用 focus() API 就可以了。我們給輸入框元素加上 ref 以便獲取到 DOM 元素，修改 src/CommentInput.js 文件：
...