代表 HTML 的 div 標籤，而 <welcome> 則代表一個組件，並且需在作用域內使用 Welcome。所有 React 組件都必須像純函數一樣保護它們的 props 不被更改。

● state與生命週期

State 與 props 類似，但是 state 是私有的，並且完全受控於當前組件。

componentDidMount() 方法會在組件已經被渲染到 DOM 中後運行，所以，最好在這裡設置計時器：

① 當 <clock> 被傳給 ReactDOM.render() 的時候，React 會調用 Clock 組件的構造函數。因為 Clock 需要顯示當前的時間，所以它會用一個包含當前時間的對象來初始化 this.state。我們會在之後更新 state。

② 之後 React 會調用組件的 render() 方法。這就是 React 確定該在頁面上展示什麼的方式。然後 React 更新 DOM 來匹配 Clock 渲染的輸出。

③ 當 Clock 的輸出被插入到 DOM 中後，React 就會調用 ComponentDidMount() 生命週期方法。在這個方法中，Clock 組件向瀏覽器請求設置一個計時器來每秒調用一次組件的 tick() 方法。

④ 瀏覽器每秒都會調用一次 tick() 方法。 在這方法之中，Clock 組件會通過調用 setState() 來計劃進行一次 UI 更新。得益於 setState() 的調用，React 能夠知道 state 已經改變了，然後會重新調用 render() 方法來確定頁面上該顯示什麼。這一次，render() 方法中的 this.state.date 就不一樣了，如此以來就會渲染輸出更新過的時間。React 也會相應的更新 DOM。

⑤ 一旦 Clock 組件從 DOM 中被移除，React 就會調用 componentWillUnmount() 生命週期方法，這樣計時器就停止了。

>>>正確地使用 State：

● 事件處理

注意：這裡一般用箭頭函數比較方便，自動綁定 this

● 條件渲染

使用 if

● 列表 & Key

● 表單

● 使用 PropTypes 進行類型檢查

注意：

自 React v15.5 起，React.PropTypes 已移入另一個包中。請使用 prop-types 庫 代替。

① 限制單個元素

你可以通過 PropTypes.element 來確保傳遞給組件的 children 中只包含一個元素。

② 默認 Prop 值

您可以通過配置特定的 defaultProps 屬性來定義 props 的默認值：

● React 發起 ajax 請求（接口請求）

以 Axios 為例。

我們推薦你在 componentDidMount 這個生命週期函數中發起 AJAX 請求。這樣做你可以拿到 AJAX 請求返回的數據並通過 setState 來更新組件。

● React 路由

我們訪問一個 URL，最終定向到哪個資源，這部分工作的處理程序，就是路由。

路由也是有狀態的，不同狀態對應不同功能，路由的參數傳遞，同樣也是綁定在 Props屬性 上面。

>>>

---

---

閱讀更多 Python大星 的文章

關鍵字: Node.js 掃盲 Java

---