React組件模式是什么

這篇文章給大家分享的是有關(guān)React組件模式是什么的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧。

10年積累的網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有中原免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

組件是 React 的核心，因此了解如何利用它們對(duì)于創(chuàng)建優(yōu)秀的設(shè)計(jì)結(jié)構(gòu)至關(guān)重要。

什么是組件

根據(jù) React 官網(wǎng)的介紹，“組件讓你可以將 UI 分割成獨(dú)立的、可重用的部分，并獨(dú)立管理每個(gè)部分?！?/p>

當(dāng)你第一次安裝 npm install react 時(shí)，會(huì)得到一件事:組件及其 API。與 JavaScript 函數(shù)類似，組件接受名為 “props” 的輸入并返回 React 元素，該元素描述(聲明)用戶界面(UI)的外觀。這就是為什么 React 被稱為聲明性 API，因?yàn)槟愀嬖V它你希望 UI 是什么樣子的，而 React 負(fù)責(zé)其余的工作。

可以把聲明式想像成當(dāng)打的去一個(gè)目的

地時(shí)，只需要告訴司機(jī)去哪里，他就會(huì)開車把你送到那里。命令式編程正好相反—，你得自己駕車到那里。

組件的 API

當(dāng)安裝 React 后，便可以使用 React 提供的 API，基本可以分成 5 種。

• render

• state

• props

• context

• lifecycle events

盡管一個(gè)組件可以使用上述所有 API，但一個(gè)組件通常用到只有少數(shù)幾個(gè) API，而其他組件則只使用其他 API。

可以對(duì)組件使用不同的 API 對(duì)組件進(jìn)行劃分，分為 有狀態(tài)（stateful）和 無(wú)狀態(tài)（stateless）兩種組件。

• 有狀態(tài)組件通常使用 API: render, state 和生命周期相關(guān)事件。

• 無(wú)狀態(tài)組件通常使用 API: render, props 和 context。

以上就是我們?yōu)槔幸榻B 組件模式的原因。組件模式是使用 React 時(shí)的最佳實(shí)踐，最初引入組件模式是為了將數(shù)據(jù)邏輯和 UI 表現(xiàn)層進(jìn)行分離。通過在組件之間劃分職責(zé)，您以創(chuàng)建更多可重用的、內(nèi)聚的組件，這些組件可用于組合復(fù)雜的 UI，這在構(gòu)建可擴(kuò)展的應(yīng)用程序時(shí)尤其重要。

組件模式

通常組件模式有以下幾種：

• Container （容器組件）

• Presentational （展示組件）

• Higher order components （高級(jí)組件）

• Render callback （渲染回調(diào)）

Container （容器組件）

“容器組件就是取數(shù)據(jù)，然后渲染子組件而已” —— Jason Bonta

容器組件是你的數(shù)據(jù)或邏輯層并利用 stateful API，使用生命周期事件，你可以連接 state 到
redux 或者 Flux 的 storage 中，并將數(shù)據(jù)和回調(diào)作為  props 傳遞給子組件。

在容器組件的 render 方法中，你可以使用 展示組件 來(lái)渲染具體的樣式。為了能夠訪問到所有狀態(tài) API，容器組件必須使用 class 的方式聲明，而不是使用函數(shù)式方法聲明。

在下面的示例中，我們有一個(gè)名為 Greeting 的類組件，它具有狀態(tài)，生命周期事件componentDidMount() 和 render 方法。

class Greeting extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
    };
  }

  componentDidMount() {
    // AJAX
    this.setState(() => {
      return {
        name: "William",
      };
    });
  }

  render() {
    return (
      <div>
        <h2>Hello! {this.state.name}</h2>
      </div>
    );
  }
}

此時(shí)，該組件是一個(gè)有狀態(tài)類組件，為了使 Greeting 成為一個(gè)容器組件，我們可以將 UI 拆分為一個(gè) 展示組件，將在下面進(jìn)行說(shuō)明。

展示組件

展示組件 使用 props、render 和 context (無(wú)狀態(tài)API)，并且由于不需要使用生命周期相關(guān) Api，可以使用純函數(shù)來(lái)簡(jiǎn)化表述它們：

const GreetingCard = (props) => {
  return (
    <div>
      <h2>Hello! {props.name}</h2>
    </div>
  )
}

展示組件 僅從 props 接收數(shù)據(jù)和回調(diào)，這些數(shù)據(jù)和回調(diào)可以由其容器組件(父組件)提供。

容器組件和展示組件各自將數(shù)據(jù)/邏輯和展示部分封裝到各自的組件中：

const GreetingCard = (props) => {
  return (
    <div>
      <h2>{props.name}</h2>
    </div>
  )
}

class Greeting extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
    };
  }

  componentDidMount() {
    // AJAX
    this.setState(() => {
      return {
        name: "William",
      };
    });
  }

  render() {
    return (
      <div>
       <GreetingCard name={this.state.name} />
      </div>
    );
  }
}

如你所見，已經(jīng)將 Greeting 組件中展示相關(guān)的部分移動(dòng)到了它自己的函數(shù)式展示組件中。當(dāng)然，這是一個(gè)非常簡(jiǎn)單的例子——對(duì)于更復(fù)雜的應(yīng)用程序，這也是最基本的。

高階組件

高階組件是一種函數(shù)，它接受一個(gè)組件作為參數(shù)，然后返回一個(gè)新的組件。

這是一種可以對(duì)輸入組件的 props 進(jìn)行修改（增刪改查）然后返回全新的修改后的組件強(qiáng)大模式，想想 react-router-v4 和 redux 。用了 react-router-v4 后，你可以使用 withRouter() 來(lái)繼承以 props 形式傳遞給組件的各種方法。同樣，用了redux，就可以使用 connect({})() 方法來(lái)將展示組件和 store 中的數(shù)據(jù)進(jìn)行連接。

代碼演示：

import {withRouter} from 'react-router-dom';
class App extends React.Component {
  constructor() {
    super();
    this.state = {path: ''}
  }
  
  componentDidMount() {
    let pathName = this.props.location.pathname;
    this.setState(() => {
      return {
        path: pathName,
      }
    })
  }
  
  render() {
    return (
      <div>
        <h2>Hi! I'm being rendered at: {this.state.path}</h2>
      </div>
    )
  }
}

export default withRouter(App);

導(dǎo)出組件時(shí)，使用用 react-router-v4 的 withRouter()方法封裝它。 在 組件 App 的生命周期事件 componentDidMount() 方法中，我們使用this.props.location.pathname 提供的值來(lái)更新 state。 由于我們使用了 withRouter 高階組件，我們可以直接訪問 this.props.locationlocation，而不需要直接將 location 作為 props 直接傳入，非常方便。

渲染回調(diào)

與高階組件類似，渲染回調(diào)或渲染 props 被用于共享或重用組件邏輯。雖然許多開發(fā)人員傾向于使用 高階組件 的可重用邏輯，但是使用 渲染回調(diào) 仍然有一些非常好的理由和優(yōu)勢(shì)——這是在 Michael Jackson 的“永不寫另一個(gè)高階組件”中得到了最好的解釋。簡(jiǎn)而言之，渲染回調(diào)減少了命名空間沖突，并更好的說(shuō)明了邏輯來(lái)源。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState(prevState => {
      return {
        count: prevState.count + 1,
      };
    });
  };

  render() {
    return (
      <div onClick={this.increment}>{this.props.children(this.state)}</div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <Counter>
        {state => (
          <div>
            <h2>The count is: {state.count}</h2>
          </div>
        )}
      </Counter>
    );
  }
}

在 Counter 類中，在 render 方法中嵌入 this.props.children 并將 this.state 作為參數(shù)。在 App 類中，我們可以將我們組件封裝在 Counter 組件中，因此我可以操作 Counter 組件內(nèi)的邏輯。

Counter 組件的本質(zhì)是暴露了 children 這個(gè)外部屬性，將 children 具體的渲染細(xì)節(jié)交個(gè) Counter 的使用者，使用的時(shí)候只需要將組件傳入到 Counter 的 children 中，當(dāng)然可以使用其他參數(shù)，如果 children 不夠的話。

代碼部署后可能存在的BUG沒法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

感謝各位的閱讀！關(guān)于React組件模式是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站題目：React組件模式是什么
本文路徑：http://muchs.cn/article18/jojegp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計(jì)公司、小程序開發(fā)、移動(dòng)網(wǎng)站建設(shè)、App設(shè)計(jì)、定制網(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)