大家好，在上一篇文章裡，我們一起學習了如何建立第一個 React 元件，我相信通過上一篇文章的學習我們已經基本熟悉了什麼是 React 元件，但是還有更多關於元件的內容值得我們去深入學習。本篇文章，我將和大家一起復習下如何使用元件的屬性（props）與狀態（state）。

如何使用元件的屬性（props）

和其它應用程式一樣，元件應具備重用性。接下來我們將基於上一節的例子，分別建立以下元件：頭部元件（ Header）, 內容元件（Content）, 和底部元件（Footer），將其分組放置在 layout 資料夾中，通過 props 傳遞屬性（屬性或子元件），並驗證屬性值的合法性。

1、首先我們來看下 App.js 檔案中的 Header部分：

3、在此之前，我們需要安裝 prop-types 依賴包，因為我們需要在 Header 元件裡定義屬性型別及相關驗證邏輯，開啟控制檯將其執行環境切換至專案目錄，並輸入以下命令完成安裝：

 npm install prop-types

4、PropTypes 最初是作為 React 核心模組之一一起釋出的，將其應用到 React 元件中，我們用來判斷元件的屬性傳遞是否符合設定的預期，如果傳遞的屬性與其不匹配，將會有警告提示。最終我們完成的 Header 元件程式碼如下：

6、然後我們將 Header 元件新增至 App.js 檔案中

標籤，這也是為什麼 React 最佳實踐中要求類名或元件名首字母大寫的原因吧。

7、需要給元件傳遞什麼屬性，你需要在props這個屬性裡進行定義，你可能注意到了我們值添加了 title 屬性，因為這是唯一需要要定義的屬性，url 屬性是可選的，並且我們已通過解構賦值的方法將其預設賦值，這裡屬性值為：https://www.qianduandaren.com。接下來我們在做個嘗試，如果我們將title屬性和值都刪掉，看看會發生什麼，你會在瀏覽器開發者工具中看到如下圖所示的提示：

8、接下來我們來建立公共底部元件Footer，示例程式碼如下

import React,{Componnent} from 'react';import  Protypes from 'prop-types';class Content extends  Componnent{    static proTypes={        children:Protypes.element.isRequired    };    render(){        const { children } = this.props;        return(            <main>                {children}            </main>        )    }}export  default  Content;// File: src/shared/components/layout/Content.js

10、最後，我們來修改 App.js 檔案，示例程式碼如下：

如你所見，我們有很多方法去傳遞屬性給元件，同時還存在很多方法接收值，比如 Redux 和 React Router，我將會在接下來的文章裡進行介紹。

如何使用狀態（state）

local state 是 React 的基本功能，用於建立動態元件。每個元件都可以設定自己的 local state，你可以在元件內部初始化值，值如果發生改變時，將觸發元件重新渲染。Local state 可以用於元件內部的 DOM 互動，表單的處理。如果我們想在不同元件之間共享資料，我們可以使用 Redux 狀態管理，在接下來的文章裡，我將會詳細介紹。好了，廢話不多說，我們來看看如何使用 local state 的。

我們先來為元件定義初始化狀態，看看其狀態更新時元件是如何渲染的。

1、我們基於 Home 元件，新增一個建構函式，並在內部定義狀態並進行初始化。

3、在新增 super()函式 之後，我們添加了初始化狀態物件：

this.state={          name:'阿森'        };

4、接下來我們使用 this.setState() 方法來更新本地狀態，目前的元件只是一個靜態的元件，無法完成互動和渲染。要實現狀態的更新，我們需要使用 this.setState() 方法進行狀態的更新，這裡我們使用 setTimeout() 函式進行狀態的更新，示例程式碼如下：

6、你可能會疑惑，為啥有這麼多的列印輸出，道理很簡單，這是React的工作方式，每次我們更新狀態時，都會導致元件重新渲染，每次渲染時，就會再次呼叫我們的 setTimeout() 方法，這樣就導致了無限迴圈，一直的呼叫下去。這樣勢必會影響程式的效能，我們應該避免這樣呼叫。那我們應該在哪合理安全只調用一次呢，這裡我們用到了元件的生命週期方法，componentDidMount()方法（在元件已經完全載入到網頁上才會呼叫被執行，所以可以保證資料的載入。此外，在這方法中呼叫setState方法，會觸發重渲染，所以，官方設計這個方法就是用來載入外部資料用的，或處理其他的副作用程式碼）。關於元件生命週期的內容，在後面的文章裡我會詳細介紹到，這裡我們只是先簡單的了解下其中的一個方法，修改後的程式碼如下：

本部分小節

本地狀態還經常被用於表單內容部分，這部分內容我將會在稍後的文章進行詳細介紹，從上述程式碼中我們了解如何使用componentDidMount()方法避免無限迴圈的問題，這屬於元件生命週期的相關內容，這部分的內容我將通過做例項的方式，進行一一詳解，敬請期待。

小節

本篇文章的內容，就給大家介紹到這裡，感謝你的閱讀，下篇文章裡我將會和大家一起學習下如何宣告函式元件，敬請期待