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

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

1、首先我們來看下 App.js 文件中得 Header部分：

import React from 'react';import logo from '../shared/images/logo.svg';import './App.css';// 這里我們引入了 Home 組件import Home from "./Home/Home";function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <a className="App-link" href="reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> {} <Home/> </div> );}export default App;//File: src/components/App.js

2、接下來，我們需要將 header 內容部分拿走，放到我們得 Header 組件里，然后通過 import 得方式引入到 App.js 文件中。因為類似這樣得頭部、尾部組件是公共布局組件，我們需要創建一個共享布局組件目錄（layout）到我們得共享目錄里（src/shared/components/layout）。

3、在此之前，我們需要安裝 prop-types 依賴包，因為我們需要在 Header 組件里定義屬性類型及相關驗證邏輯，打開控制臺將其運行環境切換至項目目錄，并輸入以下命令完成安裝：

npm install prop-types

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

import React, { Component } from "react";import ProTypes from 'prop-types';import logo from '../../images/logo.svg';class Header extends Component{ // 這里定影屬性類型和規則 static proTypes={ title:ProTypes.string.isRequired, url:ProTypes.string }; render() { const { title='Welcome to React', url='特別qianduandaren' } =this.props; return ( <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <a className="App-link" href={url} target="_blank" rel="noopener noreferrer" > {title} </a> </header> ); }}export default Header;//File: src/shared/components/layout/Header.js

5、通過定義靜態 PropTypes 屬性對象用來驗證是否符合預期，你可以定義相關得屬性類型 array, bool, func, number, object, string, 和 symbol。除了這些基本類型，你還可以定義一些特殊得類型，比如 node, element, instanceOf, oneOf, oneOfType, arrayOf, objectOf, shape 和 any 等。我們可以在任何類型后添加一個 isRequired 得屬性，用來驗證這個類型屬性是否定義，如果未定義，則會產生警告。

6、然后我們將 Header 組件添加至 App.js 文件中

import React from 'react';import './App.css';import Header from "../shared/components/Header/Header";// 這里我們引入了 Home 組件import Home from "./Home/Home";function App() { return ( <div className="App"> <Header title="歡迎來到前端達人自己"/> {} <Home/> </div> );}export default App;//File: src/components/App.js

小貼士：你有可能會對 <Header/> 感到迷惑，這里不同于 HTML5 得

標簽，這也是為什么 React 可靠些實踐中要求類名或組件名首字母大寫得原因吧。

7、需要給組件傳遞什么屬性，你需要在props這個屬性里進行定義，你可能注意到了我們值添加了 title 屬性，因為這是唯一需要要定義得屬性，url 屬性是可選得，并且我們已通過解構賦值得方法將其默認賦值，這里屬性值為：特別qianduandaren。接下來我們在做個嘗試，如果我們將title屬性和值都刪掉，看看會發生什么，你會在瀏覽器開發者工具中看到如下圖所示得提示：

8、接下來我們來創建公共底部組件Footer，示例代碼如下

import React,{Component} from "react";class Footer extends Component{ render() { return ( <footer> ? 前端達人 {(new Date()).getFullYear()} </footer> ); }}export default Footer;//File: src/shared/components/layout/Footer.js

9、到目前為止，我們只是簡單得向組件傳遞了基本得屬性類型，但是我們還可以將組件作為屬性值進行傳遞（<Component>Children Content</Component>）,接下來我們來創建一個Content組件，并將 Home 做為子元素進行傳遞，示例代碼如下：

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 文件，示例代碼如下：

import React from 'react';import './App.css';// 引入布局相關得組件import Header from "../shared/components/Header/Header";import Content from "../shared/components/Content/Content";import Footer from "../shared/components/Footer/Footer";// 這里我們引入了 Home 組件import Home from "./Home/Home";function App() { return ( <div className="App"> <Header title="前端達人"/> <Content> <Home/> </Content> <Footer/> </div> );}export default App;// File: src/components/App.js本部分內容小節

PropTypes 驗證對于開發人員非常重要，因為我們需要規范定義我們組件接收得屬性類型，并嚴格驗證是否符合預期，如果你按照上述流程操作完成，你將會看到如下圖所示得內容：

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

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

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

1、我們基于 Home 組件，添加一個構造函數，并在內部定義狀態并進行初始化。

import React,{Component} from "react";// 在這里引入我們創建得 Home.css 文件import './Home.css';export default class Home extends Component{ constructor() { // 請注意 super() 方法需在最前面定義，必須定義 // 否則無法調用 this super(); // 這里初始化本地狀態對象 this.state={ name:'阿森' }; } render() { //聲明樣式對象 const buttonStyle={ backgroundColor:'gray', border:'1px solid black' }; return( <div className="Home"> <h1>Welcome to Codejobs</h1> <p> In this recipe you will learn how to add styles to components. If you want to learn more you can visit our Channel at <a href="特別qianduandaren"> 前端達人</a>. </p> <p> 大家好，我叫{this.state.name}，歡迎來到前端達人！ </p> <p> <button style={buttonStyle}> Click me! </button> </p> </div> ); }}// File: src/components/Home/Home.js

2、在上述代碼中，我們定義了一個構造函數，并初始化了我們得本地狀態，并在界面中，直接進行輸出顯示。請注意我們在構造函數得開頭調用了super()函數，主要用于調用父構造函數（React.Component），如果你不調用得話，將會收到以下錯誤內容：

3、在添加 super()函數 之后，我們添加了初始化狀態對象：

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

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

import React,{Component} from "react";// 在這里引入我們創建得 Home.css 文件import './Home.css';export default class Home extends Component{ constructor() { // 請注意 super() 方法需在最前面定義，必須定義 // 否則無法調用 this super(); // 這里初始化本地狀態對象 this.state={ name:'阿森' }; } render() { //聲明樣式對象 const buttonStyle={ backgroundColor:'gray', border:'1px solid black' }; setTimeout(()=> { this.setState({ name: '前端達人' }); },1000); console.log('Name',this.state.name); return( <div className="Home"> <h1>Welcome to Codejobs</h1> <p> In this recipe you will learn how to add styles to components. If you want to learn more you can visit our Channel at <a href="特別qianduandaren"> 前端達人</a>. </p> <p> 大家好，我叫{this.state.name}，歡迎來到前端達人！ </p> <p> <button style={buttonStyle}> Click me! </button> </p> </div> ); }}// File: src/components/Home/Home.js

5、如果你在瀏覽器中運行它，你將會看到狀態得第壹個值是”阿森“，此后每一秒鐘打印出”前端達人“得值，主要是我添加了一個console.log() 方法用來記錄狀態值得改變，如下圖所示，你在控制臺將會看到以下內容：

6、你可能會疑惑，為啥有這么多得打印輸出，道理很簡單，這是React得工作方式，每次我們更新狀態時，都會導致組件重新渲染，每次渲染時，就會再次調用我們得 setTimeout() 方法，這樣就導致了無限循環，一直得調用下去。這樣勢必會影響程序得性能，我們應該避免這樣調用。那我們應該在哪合理安全只調用一次呢，這里我們用到了組件得生命周期方法，componentDidMount()方法（在組件已經完全加載到網頁上才會調用被執行，所以可以保證數據得加載。此外，在這方法中調用setState方法，會觸發重渲染，所以，自家設計這個方法就是用來加載外部數據用得，或處理其他得副作用代碼）。關于組件生命周期得內容，在后面得文章里我會詳細介紹到，這里我們只是先簡單得了解下其中得一個方法，修改后得代碼如下：

import React,{Component} from "react";// 在這里引入我們創建得 Home.css 文件import './Home.css';export default class Home extends Component{ constructor() { // 請注意 super() 方法需在最前面定義，必須定義 // 否則無法調用 this super(); // 這里初始化本地狀態對象 this.state={ name:'阿森' }; } componentDidMount() { setTimeout(()=> { this.setState({ name: '前端達人' }); },1000); } render() { //聲明樣式對象 const buttonStyle={ backgroundColor:'gray', border:'1px solid black' }; return( <div className="Home"> <h1>Welcome to Codejobs</h1> <p> In this recipe you will learn how to add styles to components. If you want to learn more you can visit our Channel at <a href="特別qianduandaren"> 前端達人</a>. </p> <p> 大家好，我叫{this.state.name}，歡迎來到前端達人！ </p> <p> <button style={buttonStyle}> Click me! </button> </p> </div> ); }}// File: src/components/Home/Home.js

7、如果你打開瀏覽器開發者工具，你將會在控制臺看到如下輸出，從而驗證是否解決了無限循環打印輸出得問題：

本地狀態還經常被用于表單內容部分，這部分內容我將會在稍后得文章進行詳細介紹，從上述代碼中我們了解如何使用componentDidMount()方法避免無限循環得問題，這屬于組件生命周期得相關內容，這部分得內容我將通過做實例得方式，進行一一詳解，敬請期待。

本篇文章得內容，就給大家介紹到這里，感謝你得閱讀，下篇文章里我將會和大家一起學習下如何聲明函數組件，敬請期待

「React 手冊」在 React 項目中使用 ES6，你需要了解這些（一）

「React 手冊」React 16 中值得你得新特性

「React 手冊 」在 Windows 下使用 React , 你需要注意這些問題

「React 手冊 」從創建第壹個React組件開始學起