大家好，在上一篇文章里，我們一起學(xué)習(xí)了如何創(chuàng)建第壹個 React 組件，我相信通過上一篇文章得學(xué)習(xí)我們已經(jīng)基本熟悉了什么是 React 組件，但是還有更多關(guān)于組件得內(nèi)容值得我們?nèi)ド钊雽W(xué)習(xí)。本篇文章，我將和大家一起復(fù)習(xí)下如何使用組件得屬性（props）與狀態(tài)（state）。

和其它應(yīng)用程序一樣，組件應(yīng)具備重用性。接下來我們將基于上一節(jié)得例子，分別創(chuàng)建以下組件：頭部組件（ Header）, 內(nèi)容組件（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 內(nèi)容部分拿走，放到我們得 Header 組件里，然后通過 import 得方式引入到 App.js 文件中。因為類似這樣得頭部、尾部組件是公共布局組件，我們需要創(chuàng)建一個共享布局組件目錄（layout）到我們得共享目錄里（src/shared/components/layout）。

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

npm install prop-types

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

import React, { Component } from "react";import ProTypes from 'prop-types';import logo from '../../images/logo.svg';class Header extends Component{ // 這里定影屬性類型和規(guī)則 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、通過定義靜態(tài) PropTypes 屬性對象用來驗證是否符合預(yù)期，你可以定義相關(guān)得屬性類型 array, bool, func, number, object, string, 和 symbol。除了這些基本類型，你還可以定義一些特殊得類型，比如 node, element, instanceOf, oneOf, oneOfType, arrayOf, objectOf, shape 和 any 等。我們可以在任何類型后添加一個 isRequired 得屬性，用來驗證這個類型屬性是否定義，如果未定義，則會產(chǎn)生警告。

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 得

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

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

8、接下來我們來創(chuàng)建公共底部組件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>）,接下來我們來創(chuàng)建一個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';// 引入布局相關(guān)得組件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本部分內(nèi)容小節(jié)

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

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

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

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

1、我們基于 Home 組件，添加一個構(gòu)造函數(shù)，并在內(nèi)部定義狀態(tài)并進行初始化。

import React,{Component} from "react";// 在這里引入我們創(chuàng)建得 Home.css 文件import './Home.css';export default class Home extends Component{ constructor() { // 請注意 super() 方法需在最前面定義，必須定義 // 否則無法調(diào)用 this super(); // 這里初始化本地狀態(tài)對象 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、在上述代碼中，我們定義了一個構(gòu)造函數(shù)，并初始化了我們得本地狀態(tài)，并在界面中，直接進行輸出顯示。請注意我們在構(gòu)造函數(shù)得開頭調(diào)用了super()函數(shù)，主要用于調(diào)用父構(gòu)造函數(shù)（React.Component），如果你不調(diào)用得話，將會收到以下錯誤內(nèi)容：

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

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

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

import React,{Component} from "react";// 在這里引入我們創(chuàng)建得 Home.css 文件import './Home.css';export default class Home extends Component{ constructor() { // 請注意 super() 方法需在最前面定義，必須定義 // 否則無法調(diào)用 this super(); // 這里初始化本地狀態(tài)對象 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、如果你在瀏覽器中運行它，你將會看到狀態(tài)得第壹個值是”阿森“，此后每一秒鐘打印出”前端達人“得值，主要是我添加了一個console.log() 方法用來記錄狀態(tài)值得改變，如下圖所示，你在控制臺將會看到以下內(nèi)容：

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

import React,{Component} from "react";// 在這里引入我們創(chuàng)建得 Home.css 文件import './Home.css';export default class Home extends Component{ constructor() { // 請注意 super() 方法需在最前面定義，必須定義 // 否則無法調(diào)用 this super(); // 這里初始化本地狀態(tài)對象 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、如果你打開瀏覽器開發(fā)者工具，你將會在控制臺看到如下輸出，從而驗證是否解決了無限循環(huán)打印輸出得問題：

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

本篇文章得內(nèi)容，就給大家介紹到這里，感謝你得閱讀，下篇文章里我將會和大家一起學(xué)習(xí)下如何聲明函數(shù)組件，敬請期待

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

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

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

「React 手冊 」從創(chuàng)建第壹個React組件開始學(xué)起