react創建組建的四種方式

XanaHopper 發布于2019-08-20 16:06 / 3205人閱讀

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

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

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

一、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對屬性中的所有函數都進行了this綁定，也就是如上面的hanleClick其實相當于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() {
    //點擊事件的處理函數
  }
  
  render() {
    return Hello, {this.props.name};
  }
}
export default FirstComponent;

這段代碼指定了FirstComponent繼承extends React.Component的屬性，通過constructor來構函數，初始化state，this的綁定也在這里面進行，因為這種方式react并沒有對this進行綁定，所有需要手動輸入綁定。這種方法創建組建因為繼承了component的屬性，因此這里面可以寫react的所有生命周期函數,例如componentDidMount等系列，并在函數內容通過this.state來改變狀態state，dom就會隨即刷新，也可以手動靜止更新，具體的細節是在某個生命周期中進行，具體的可以看看我的這篇文章

三、PureComponet

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

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

  render() {
    return (
      
    );
  }
}

大多數情況下，我們使用PureComponent能夠簡化我們的代碼，并且提高性能，但是PureComponent的自動為我們添加的shouldComponentUpate函數，只是對props和state進行淺比較(shadow comparison)，當props或者state本身是嵌套對象或數組等時，淺比較并不能得到預期的結果，這會導致實際的props和state發生了變化，但組件卻沒有更新的問題。當然還是有解決的方法的，所以建議還是少用。

四、Stateless Functional Component

上面提到的方法都包含了內部有交互和狀態的復雜的組建，如果組建本身就是用來展示的，那么就可以用stateless的方法來創建組建。

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

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

export default Button;

如果像更改顯示的結果只能改變傳入的props;

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

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

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

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

云服務器 GPU云服務器對數據倉庫分析的四種方式 activity的四種狀態數據遷移的四種方法 java中線程的四種狀態

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82715.html

react關于事件綁定this的四種方式

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

張利勇 2019-08-22 15:12 評論0 收藏0
react-router 2.7.0源碼深度分析

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

tianyu 2019-08-20 10:44 評論0 收藏0
React基礎再回顧

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

2450184176 2019-08-22 15:16 評論0 收藏0
深入理解js

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

caikeal 2019-08-26 11:39 評論0 收藏0
ES6中React Mixins的使用（第四部分）

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

Karrdy 2019-08-20 17:59 評論0 收藏0