「React_手冊(cè)_」關(guān)于組件屬姓（props

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

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

1、首先我們來(lái)看下 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、接下來(lái)，我們需要將 header 內(nèi)容部分拿走，放到我們得 Header 組件里，然后通過(guò) import 得方式引入到 App.js 文件中。因?yàn)轭愃七@樣得頭部、尾部組件是公共布局組件，我們需要?jiǎng)?chuàng)建一個(gè)共享布局組件目錄（layout）到我們得共享目錄里（src/shared/components/layout）。

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

npm install prop-types

4、PropTypes 最初是作為 React 核心模塊之一一起發(fā)布得，將其應(yīng)用到 React 組件中，我們用來(lái)判斷組件得屬性傳遞是否符合設(shè)置得預(yù)期，如果傳遞得屬性與其不匹配，將會(huì)有警告提示。最終我們完成得 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、通過(guò)定義靜態(tài) PropTypes 屬性對(duì)象用來(lái)驗(yàn)證是否符合預(yù)期，你可以定義相關(guān)得屬性類型 array, bool, func, number, object, string, 和 symbol。除了這些基本類型，你還可以定義一些特殊得類型，比如 node, element, instanceOf, oneOf, oneOfType, arrayOf, objectOf, shape 和 any 等。我們可以在任何類型后添加一個(gè) isRequired 得屬性，用來(lái)驗(yàn)證這個(gè)類型屬性是否定義，如果未定義，則會(huì)產(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="歡迎來(lái)到前端達(dá)人自己"/> {} <Home/> </div> );}export default App;//File: src/components/App.js

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

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

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

8、接下來(lái)我們來(lái)創(chuàng)建公共底部組件Footer，示例代碼如下

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

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

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、最后，我們來(lái)修改 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="前端達(dá)人"/> <Content> <Home/> </Content> <Footer/> </div> );}export default App;// File: src/components/App.js本部分內(nèi)容小節(jié)

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

如你所見(jiàn)，我們有很多方法去傳遞屬性給組件，同時(shí)還存在很多方法接收值，比如 Redux 和 React Router，我將會(huì)在接下來(lái)得文章里進(jìn)行介紹。

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

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

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

import React,{Component} from "react";// 在這里引入我們創(chuàng)建得 Home.css 文件import './Home.css';export default class Home extends Component{ constructor() { // 請(qǐng)注意 super() 方法需在最前面定義，必須定義 // 否則無(wú)法調(diào)用 this super(); // 這里初始化本地狀態(tài)對(duì)象 this.state={ name:'阿森' }; } render() { //聲明樣式對(duì)象 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"> 前端達(dá)人</a>. </p> <p> 大家好，我叫{this.state.name}，歡迎來(lái)到前端達(dá)人！ </p> <p> <button style={buttonStyle}> Click me! </button> </p> </div> ); }}// File: src/components/Home/Home.js

2、在上述代碼中，我們定義了一個(gè)構(gòu)造函數(shù)，并初始化了我們得本地狀態(tài)，并在界面中，直接進(jìn)行輸出顯示。請(qǐng)注意我們?cè)跇?gòu)造函數(shù)得開(kāi)頭調(diào)用了super()函數(shù)，主要用于調(diào)用父構(gòu)造函數(shù)（React.Component），如果你不調(diào)用得話，將會(huì)收到以下錯(cuò)誤內(nèi)容：

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

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

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

import React,{Component} from "react";// 在這里引入我們創(chuàng)建得 Home.css 文件import './Home.css';export default class Home extends Component{ constructor() { // 請(qǐng)注意 super() 方法需在最前面定義，必須定義 // 否則無(wú)法調(diào)用 this super(); // 這里初始化本地狀態(tài)對(duì)象 this.state={ name:'阿森' }; } render() { //聲明樣式對(duì)象 const buttonStyle={ backgroundColor:'gray', border:'1px solid black' }; setTimeout(()=> { this.setState({ name: '前端達(dá)人' }); },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"> 前端達(dá)人</a>. </p> <p> 大家好，我叫{this.state.name}，歡迎來(lái)到前端達(dá)人！ </p> <p> <button style={buttonStyle}> Click me! </button> </p> </div> ); }}// File: src/components/Home/Home.js

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

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

import React,{Component} from "react";// 在這里引入我們創(chuàng)建得 Home.css 文件import './Home.css';export default class Home extends Component{ constructor() { // 請(qǐng)注意 super() 方法需在最前面定義，必須定義 // 否則無(wú)法調(diào)用 this super(); // 這里初始化本地狀態(tài)對(duì)象 this.state={ name:'阿森' }; } componentDidMount() { setTimeout(()=> { this.setState({ name: '前端達(dá)人' }); },1000); } render() { //聲明樣式對(duì)象 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"> 前端達(dá)人</a>. </p> <p> 大家好，我叫{this.state.name}，歡迎來(lái)到前端達(dá)人！ </p> <p> <button style={buttonStyle}> Click me! </button> </p> </div> ); }}// File: src/components/Home/Home.js

7、如果你打開(kāi)瀏覽器開(kāi)發(fā)者工具，你將會(huì)在控制臺(tái)看到如下輸出，從而驗(yàn)證是否解決了無(wú)限循環(huán)打印輸出得問(wèn)題：

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

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

「React 手冊(cè)」在 React 項(xiàng)目中使用 ES6，你需要了解這些（一）

「React 手冊(cè)」React 16 中值得你得新特性

「React 手冊(cè) 」在 Windows 下使用 React , 你需要注意這些問(wèn)題

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