React創(chuàng)建組件的方法

今天小編給大家分享一下React創(chuàng)建組件的方法的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

創(chuàng)新互聯(lián)云計(jì)算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過(guò)13年的服務(wù)器租用、成都西信服務(wù)器托管、云服務(wù)器、虛擬主機(jī)、網(wǎng)站系統(tǒng)開(kāi)發(fā)經(jīng)驗(yàn)，已先后獲得國(guó)家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專業(yè)提供云主機(jī)、虛擬主機(jī)、域名與空間、VPS主機(jī)、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。

組件介紹

組件(Components) 讓你可以將用戶界面分成獨(dú)立的，可復(fù)用的小部件，并可以對(duì)每個(gè)部件進(jìn)行單獨(dú)的設(shè)計(jì)。

從定義上來(lái)說(shuō)， 組件就像JavaScript的函數(shù)。組件可以接收任意輸入(稱為”props”)， 并返回 React 元素，用以描述屏幕顯示內(nèi)容。

Props ， 即屬性(Property)， 在代碼中寫(xiě)作 props，故可用 props 指代 properties。
react中有兩種組件：類組件（class components）、函數(shù)組件（function components）

創(chuàng)建類組件

類組件的定義有如下要求：

  • 類組件需要繼承自 React.Component

  • 類組件必須實(shí)現(xiàn)render函數(shù)

在ES6之前，可以通過(guò)create-react-class 模塊來(lái)定義類組件，但是目前官網(wǎng)建議我們使用ES6的class類定義。

使用class定義一個(gè)組件：

class App extends Component {
  constructor() {
    super()
    this.state = {}
  }

  render() {
    return <h3>Hello App</h3>
  }
}

我們來(lái)詳細(xì)分析一下類組件有哪幾個(gè)部分

  • constructor：這是類組件的構(gòu)造函數(shù)，是可選的，我們通常在constructor中初始化一些數(shù)據(jù)；

  • this.state：我們?cè)赾onstructor中給類組件加入state屬性，你可以理解為組件中有一個(gè)state對(duì)象，其中包含著各種屬性，用于維護(hù)組件內(nèi)部的數(shù)據(jù)。同時(shí)你可以通過(guò)this.state.<屬性名>訪問(wèn)該屬性；

  • render()： 該方法是 class 組件中唯一必須實(shí)現(xiàn)的方法，類組件通過(guò)render()返回組件的顯示內(nèi)容；

關(guān)于 state

我們可以通過(guò)this.state給類組件添加數(shù)據(jù)對(duì)象，我們可以通過(guò)this.state.<屬性名>去訪問(wèn)我們setState中的屬性。

constructor(props) {
    super(props);
    this.state = {
      name:"xhs-rookies"
    }
  }

render(){
    return <h3>{this.state.name}</h3>
  }

但是我們想要修改上述例子中的name屬性的時(shí)候，則必須通過(guò)react給我們規(guī)定好的setState()方法，去給state添加或者修改其中的數(shù)值。

this.state.name = 'new xhs-rookies' //錯(cuò)誤的方式，不允許采用
this.setState({ name: 'new xhs-rookies' }) //正確的方式

簡(jiǎn)單點(diǎn)來(lái)說(shuō)，在 react 中頁(yè)面是通過(guò)數(shù)據(jù)進(jìn)行渲染，使用setState()更新的數(shù)據(jù)，react 會(huì)幫我們執(zhí)行render()去更新頁(yè)面，從而將頁(yè)面中用到 state 中的數(shù)據(jù)全部更新。

關(guān)于 render

當(dāng) render 被調(diào)用時(shí)，它會(huì)檢查 this.props 和 this.state 的變化并返回很多類型，很多時(shí)候我們選擇讓該方法返回 React 元素，然后交由 React 去渲染展示：

React 元素：

  • 通常通過(guò) JSX 創(chuàng)建。

  • 例如，<div/> 會(huì)被 React 渲染為 DOM 節(jié)點(diǎn)，<MyComponent/> 會(huì)被 React 渲染為自定義組件；

  • 無(wú)論是 <div/> 還是 <MyComponent/> 均為 React 元素。

詳細(xì)關(guān)于 render() 方法的內(nèi)容請(qǐng)見(jiàn)React.Component - Render)

創(chuàng)建函數(shù)組件

函數(shù)組件是使用 function 來(lái)進(jìn)行定義的函數(shù)，只是這個(gè)函數(shù)會(huì)返回和類組件中 render 函數(shù)返回一樣的內(nèi)容。

跟類組件相比，函數(shù)組件有自己的特點(diǎn)：

  • 沒(méi)有生命周期，也會(huì)被更新并掛載，但是沒(méi)有生命周期函數(shù)；

  • 沒(méi)有 this(組件實(shí)例）；

  • 沒(méi)有內(nèi)部狀態(tài)（state）；

我們來(lái)定義一個(gè)函數(shù)組件：

export default function App() {
  return <div>xhs rookies</div>
}

渲染組件

在前幾篇中, 我們只遇到代表 DOM 標(biāo)簽的 React 元素：

const element = <div />

然而，元素也可以代表用戶定義的組件：

const element = <Welcome name="xhs rookies" />

當(dāng) React 遇到一個(gè)代表用戶定義組件的元素時(shí)，它將 JSX 屬性以一個(gè)單獨(dú)對(duì)象的形式傳遞給相應(yīng)的組件。 我們將其稱為 “props” 對(duì)象。

比如, 以下代碼在頁(yè)面上渲染“xhs rookies”：

function Welcome(props) {
  return <h2>Hello, {props.name}</h2>
}

const element = <Welcome name="xhs rookies" />
ReactDOM.render(element, document.getElementById('root'))

我們簡(jiǎn)單解釋一下上面這個(gè)例子:

  • 我們調(diào)用了 ReactDOM.render() 方法并向其中傳入了 <Welcome name="xhs rookies" /> 元素。

  • React 調(diào)用 Welcome 組件，并向其中傳入了 {name: 'xhs rookies'} 作為 props 對(duì)象。

  • Welcome 組件返回 <h2>xhs rookies</h2>。

  • React DOM 迅速更新 DOM ，使其顯示為 <h2>xhs rookies</h2>。

注意： 組件名稱總是以大寫(xiě)字母開(kāi)始。

舉例來(lái)說(shuō), <div/> 代表一個(gè) DOM 標(biāo)簽，而 <Welcome/> 則代表一個(gè)組件，并且需要在作用域中有一個(gè) Welcome 組件。

你可以深入 JSX閱讀更多關(guān)于這點(diǎn)背后的原因。

合成組件

組件可以在它們的輸出中引用其它組件。這使得我們可以使用同樣的組件來(lái)抽象到任意層級(jí)。一個(gè)按鈕，一個(gè)表單，一個(gè)對(duì)話框，一個(gè)屏幕：在 React 應(yīng)用中，所有這些都通常描述為組件。

例如，我們可以創(chuàng)建一個(gè) App 組件，并在其內(nèi)部多次渲染 Welcome：

function Welcome(props) {
  return <h2>Hello, {props.name}</h2>
}

function App() {
  return (
    <div>
      <Welcome name="rookie-Sara" />
      <Welcome name="rookie-Cahal" />
      <Welcome name="rookie-Edite" />
    </div>
  )
}

 
ReactDOM.render(<App />, document.getElementById('root'))

通常，新的 React apps 都有一個(gè)單獨(dú)的頂層 App 組件。然而，如果你在已有的應(yīng)用中整合 React，你可以需要由下至上地, 從類似于 Button 這樣的小組件開(kāi)始, 逐漸整合到視圖層的頂層。

提取組件

不要害怕把一個(gè)組件分為多個(gè)更小的組件。

舉個(gè)例子，思考下名 Comment 組件：

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar" src={props.author.avatarUrl} alt={props.author.name} />
        <div className="UserInfo-name">{props.author.name}</div>
      </div>
      <div className="Comment-text">{props.text}</div>
      <div className="Comment-date">{formatDate(props.date)}</div>
    </div>
  )
}

它接受 author（一個(gè)對(duì)象），text（一個(gè)字符串）和 date（一個(gè)日期）作為 props。

這個(gè)組件修改起來(lái)很麻煩，因?yàn)樗潜磺短椎?，而且很難復(fù)用其中的某個(gè)部分。讓我們從其中提取一些組件。

首先，提取頭像 Avatar：

function Avatar(props) {
  return <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} />
}

Avatar 組件不用關(guān)心它在 Comment 中是如何渲染的。這是為什么我們它的 prop 一個(gè)更通用的屬性名: user, 而不是 author 的原因。

我們建議從組件本身的角度來(lái)命名 props 而不是它被使用的上下文環(huán)境。

我們可以稍微簡(jiǎn)化一下 Comment 組件:

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">{props.author.name}</div>
      </div>
      <div className="Comment-text">{props.text}</div>
      <div className="Comment-date">{formatDate(props.date)}</div>
    </div>
  )
}

接下來(lái)，我們提取用戶信息 UserInfo 組件， 用于將 Avatar 顯示在用戶名旁邊：

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">{props.user.name}</div>
    </div>
  )
}

這使我們可以進(jìn)一步簡(jiǎn)化 Comment 組件：

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">{props.text}</div>
      <div className="Comment-date">{formatDate(props.date)}</div>
    </div>
  )
}

提取組件可能看起來(lái)是一個(gè)繁瑣的工作，但是在大型的 Apps 中可以回報(bào)給我們的是大量的可復(fù)用組件。一個(gè)好的經(jīng)驗(yàn)準(zhǔn)則是如果你 UI 的一部分需要用多次 (Button，Panel，Avatar)，或者本身足夠復(fù)雜(App，F(xiàn)eedStory，Comment)，最好的做法是使其成為可復(fù)用組件。

Props 是只讀的

無(wú)論你用函數(shù)或類的方法來(lái)聲明組件, 它都無(wú)法修改其自身 props. 思考下列 sum (求和)函數(shù):

function sum(a, b) {
  return a + b
}

這種函數(shù)稱為 “純函數(shù)” ，因?yàn)樗鼈儾粫?huì)試圖改變它們的輸入，并且對(duì)于同樣的輸入,始終可以得到相同的結(jié)果。

反之， 以下是非純函數(shù)， 因?yàn)樗淖兞俗陨淼妮斎胫担?/p>

function withdraw(account, amount) {
  account.total -= amount
}

雖然 React 很靈活，但是它有一條嚴(yán)格的規(guī)則：

注意： 所有 React 組件都必須是純函數(shù)，并禁止修改其自身 props 。
當(dāng)然， 應(yīng)用 UI 總是動(dòng)態(tài)的，并且隨時(shí)有可以改變。

如果我們想要?jiǎng)討B(tài)改變 UI，那么就會(huì)涉及到我們上面說(shuō)到的state(狀態(tài)) 。我們通過(guò)動(dòng)態(tài)的改變state來(lái)渲染整個(gè)頁(yè)面，我們后面會(huì)提及。

以上就是“React創(chuàng)建組件的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

標(biāo)題名稱：React創(chuàng)建組件的方法
標(biāo)題來(lái)源：http://bm7419.com/article34/ijhipe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、App開(kāi)發(fā)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、做網(wǎng)站、微信公眾號(hào)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

營(yíng)銷(xiāo)型網(wǎng)站建設(shè)