成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

react創(chuàng)建組建的四種方式

XanaHopper / 3267人閱讀

摘要：原由寫這篇文章主要是為了增強(qiáng)自己的記憶，同時也是為了分享一下我們常用的創(chuàng)建組建的方法，主要是四種，啟發(fā)來自于不知的博客呀，有興趣的人可以去看看他的博客敘述我們在用的時候考慮最多的其實就是如何策劃組建的劃分，組建的嵌套，能夠做到更省時省力。

原由：寫這篇文章主要是為了增強(qiáng)自己的記憶，同時也是為了分享一下我們常用的創(chuàng)建組建的方法，主要是四種(createClass, component, PureComponet,Stateless Functional Component)，啟發(fā)來自于不知的博客呀，有興趣的人可以去看看他的博客！

敘述： 我們在用react的時候考慮最多的其實就是如何策劃組建的劃分，組建的嵌套，能夠做到更省時、省力。做過了一個react的項目，目前依舊在繼續(xù)，一上來我們就使用了es6的語法堂，用component來，仔細(xì)看過官方文檔后，發(fā)現(xiàn)不用es6語法的同時只能使用createClass。在寫組建的同時我們也都會說到這兩個詞語，狀態(tài)組建和pure組建（純函數(shù)）。今天就來大概介紹一下各自的特點：

一、createClass 
var React = require("react");
var FirstComponent = React.createClass({
  propTypes: {
    name: React.PropTypes.string 
    //屬性校驗 (string, number, bool, func, array, object...... )
  },
  
  getDefaultProps: function() {
    return {
      name: "Mary" 
    };
    // 初始化props
  }, 
    
  getInitialState: function() {
    return {count: this.props.initialCount}; 
    //初始化props
  },
  
  handleClick: function() {
    //.....
  },
  render: function() {
    return 
Hello, {this.props.name}
;
  }
});
module.exports = FirstComponent;
這種方式下，組件的props、state等都是以對象object屬性的方式組合在一起，在createClass中，React對屬性中的所有函數(shù)都進(jìn)行了this綁定，也就是如上面的hanleClick其實相當(dāng)于handleClick.bind(this) 。
二、component es6語法堂 
import React from "react";
class FirstComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
       count: props.initialCount
    };
  }
  static propTypes ＝ {
    name: React.PropTypes.string
  }
  statice props = {
    name: "Mary"
  }
  handleClick() {
    //點擊事件的處理函數(shù)
  }
  
  render() {
    return 
Hello, {this.props.name}
;
  }
}
export default FirstComponent;
這段代碼指定了FirstComponent繼承extends React.Component的屬性，通過constructor來構(gòu)函數(shù)，初始化state，this的綁定也在這里面進(jìn)行，因為這種方式react并沒有對this進(jìn)行綁定，所有需要手動輸入綁定。這種方法創(chuàng)建組建因為繼承了component的屬性，因此這里面可以寫react的所有生命周期函數(shù),例如componentDidMount等系列，并在函數(shù)內(nèi)容通過this.state來改變狀態(tài)state，dom就會隨即刷新，也可以手動靜止更新，具體的細(xì)節(jié)是在某個生命周期中進(jìn)行，具體的可以看看我的這篇文章
三、PureComponet

上面的方法中都不是純函數(shù)的構(gòu)造，因為state是可以在內(nèi)容起到作用的，內(nèi)容就可以控制是否重新渲染狀態(tài)。
而這種方法我也很少用過，看過很多文章才明白！其實大多數(shù)情況下我們也很難用到這樣的方式，在官網(wǎng)的位置都不是很起眼，所以就大概復(fù)述一下－不知－博客的內(nèi)容吧！

class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  render() {
    return (
      
    );
  }
}
大多數(shù)情況下， 我們使用PureComponent能夠簡化我們的代碼，并且提高性能，但是PureComponent的自動為我們添加的shouldComponentUpate函數(shù)，只是對props和state進(jìn)行淺比較(shadow comparison)，當(dāng)props或者state本身是嵌套對象或數(shù)組等時，淺比較并不能得到預(yù)期的結(jié)果，這會導(dǎo)致實際的props和state發(fā)生了變化，但組件卻沒有更新的問題。當(dāng)然還是有解決的方法的，所以建議還是少用。
四、Stateless Functional Component

上面提到的方法都包含了內(nèi)部有交互和狀態(tài)的復(fù)雜的組建，如果組建本身就是用來展示的，那么就可以用stateless的方法來創(chuàng)建組建。

import React from "react";
const Button = ({day,increment}) => {
  return (
    

      
    

  )
}

Button.propTypes = {
  day: PropTypes.string.isRequired,
  increment: PropTypes.func.isRequired,
}

export default Button;
如果像更改顯示的結(jié)果只能改變傳入的props;

以上就是四種創(chuàng)建組建的方式，來點個人的建議吧！

現(xiàn)在我公司的項目就是采用了第四種方式來進(jìn)行組建的創(chuàng)建，那么肯定會有人問，那么請求接口，返回數(shù)據(jù)重新渲染怎么做，肯定還是會有一部分用到es6創(chuàng)建的方法，一部分采用stateless的方法，當(dāng)然這種也是可以的，不過看起來就會稍微的有些亂，用兩種方式定義組建也并不是一個好的團(tuán)隊?wèi)?yīng)該看到的。所以給大家推薦一些react+webpack+react-redux 以及vda這種方式，具體的資料可以參考這個上面說的很詳細(xì)，這種方式的優(yōu)點就在于將邏輯和展示完全的分開了。

最后大家可以根據(jù)自己的喜歡以及項目的要求選擇一種方式來進(jìn)行組建的創(chuàng)建，方便自己的記憶，也供大家參考使用，同時也來提一下更好的方法。

參考：
http://www.cnblogs.com/Unknw/...
https://segmentfault.com/a/11...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/82715.html

相關(guān)文章

  • react關(guān)于事件綁定this的四種方式

    摘要：在組件中，每個方法的上下文都會指向該組件的實例，即自動綁定為當(dāng)前組件而且還會對這種引用進(jìn)行緩存，以達(dá)到和內(nèi)存的最大化。 在react組件中，每個方法的上下文都會指向該組件的實例，即自動綁定this為當(dāng)前組件,而且react還會對這種引用進(jìn)行緩存，以達(dá)到cpu和內(nèi)存的最大化。在使用了es6 class或者純函數(shù)時，這種自動綁定就不復(fù)存在了，我們需要手動實現(xiàn)this的綁定以下是幾種綁定的方...

    張利勇 評論0 收藏0

  • react-router 2.7.0源碼深度分析

    摘要：介紹為提供路由管理為基于格式的系統(tǒng)提供了方便的切換頁面功能。它在前端提供給了種方式通過或者瀏覽器原生的進(jìn)行地址更新上一篇介紹了的方式本文則以的形式切入分析。代碼剖析路由配置本生為組建內(nèi)部組建如等。 前言 在前端單頁面應(yīng)用里面,路由是比較重要的部分,筆者的上一篇博文簡單的路由介紹了簡單的路由內(nèi)部機(jī)制,本文則將分析react-router的內(nèi)部機(jī)制。 介紹 react-router為rea...

    tianyu 評論0 收藏0

  • React基礎(chǔ)再回顧

    摘要：方法一必須在這里綁定方法二使用屬性初始化器語法需要開啟以上方法三在使用時綁定方法四在回調(diào)函數(shù)中使用箭頭函數(shù)渲染的時候都會創(chuàng)建一個不同的回調(diào)函數(shù)。然而如果這個回調(diào)函數(shù)作為一個屬性值傳入低階組件，這些組件可能會進(jìn)行額外的重新渲染。 從16年夏天初學(xué)React，到17年正式投入到工作中使用，直到現(xiàn)在V16.2發(fā)版，React發(fā)生了巨大的變化，最近在工作中使用時遇到很多基礎(chǔ)不是非常清晰，借此再...

    2450184176 評論0 收藏0

  • 深入理解js

    摘要：詳解十大常用設(shè)計模式力薦深度好文深入理解大設(shè)計模式收集各種疑難雜癥的問題集錦關(guān)于，工作和學(xué)習(xí)過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內(nèi)存管理。 延遲加載 (Lazyload) 三種實現(xiàn)方式 延遲加載也稱為惰性加載，即在長網(wǎng)頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細(xì)介紹了三種延遲加載的實現(xiàn)方式。 詳解 Javascript十大常用設(shè)計模式 力薦~ ...

    caikeal 評論0 收藏0

  • ES6中React Mixins的使用（第四部分）

    摘要：在的組建創(chuàng)建中，不太可能使用混合機(jī)制。在中，這個組建將被命名為。他們中的其中一個如下結(jié)論高階組建功能強(qiáng)大和極具表現(xiàn)力?，F(xiàn)在高階組建廣泛的被使用來替代老式的句法。 這是React和ECMAScript6／ECMAScript7結(jié)合使用系列文章的第四篇。 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始化（第二部分） React類...

    Karrdy 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<