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

XanaHopper 發(fā)布于2019-08-20 16:06 / 3235人閱讀

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

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

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

一、createClass

var React = require("react");
var FirstComponent = React.createClass({
  propTypes: {
    name: React.PropTypes.string 
    //屬性校驗(yàn) (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等都是以對(duì)象object屬性的方式組合在一起，在createClass中，React對(duì)屬性中的所有函數(shù)都進(jìn)行了this綁定，也就是如上面的hanleClick其實(shí)相當(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() {
    //點(diǎn)擊事件的處理函數(shù)
  }
  
  render() {
    return Hello, {this.props.name};
  }
}
export default FirstComponent;

這段代碼指定了FirstComponent繼承extends React.Component的屬性，通過constructor來構(gòu)函數(shù)，初始化state，this的綁定也在這里面進(jìn)行，因?yàn)檫@種方式react并沒有對(duì)this進(jìn)行綁定，所有需要手動(dòng)輸入綁定。這種方法創(chuàng)建組建因?yàn)槔^承了component的屬性，因此這里面可以寫react的所有生命周期函數(shù),例如componentDidMount等系列，并在函數(shù)內(nèi)容通過this.state來改變狀態(tài)state，dom就會(huì)隨即刷新，也可以手動(dòng)靜止更新，具體的細(xì)節(jié)是在某個(gè)生命周期中進(jìn)行，具體的可以看看我的這篇文章

三、PureComponet

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

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

  render() {
    return (
      
    );
  }
}

大多數(shù)情況下， 我們使用PureComponent能夠簡化我們的代碼，并且提高性能，但是PureComponent的自動(dòng)為我們添加的shouldComponentUpate函數(shù)，只是對(duì)props和state進(jìn)行淺比較(shadow comparison)，當(dāng)props或者state本身是嵌套對(duì)象或數(shù)組等時(shí)，淺比較并不能得到預(yù)期的結(jié)果，這會(huì)導(dǎo)致實(shí)際的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)建組建的方式，來點(diǎn)個(gè)人的建議吧！

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

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

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

GPU云服務(wù)器云服務(wù)器對(duì)數(shù)據(jù)倉庫分析的四種方式 activity的四種狀態(tài) 數(shù)據(jù)遷移的四種方法 java中線程的四種狀態(tài)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82715.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

XanaHopper

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

非常實(shí)用的在線工具網(wǎng)站清單

閱讀 1831·2021-11-18 10:02
Leetcode 刷題（持續(xù)更新）

閱讀 3554·2021-11-16 11:45
??思維導(dǎo)圖整理大廠面試高頻數(shù)組10: 3種方法徹底解決中位數(shù)問題, 力扣4??

閱讀 1822·2021-09-10 10:51
HTML、CSS、meta常用代碼

閱讀 2139·2019-08-30 15:43
移動(dòng)端兼容問題總結(jié)(2)

閱讀 1402·2019-08-30 11:23
從隱藏元素談起

閱讀 1510·2019-08-29 11:07
Decorator:從原理到實(shí)踐，我一點(diǎn)都不虛~

閱讀 1924·2019-08-23 17:05
JavaScript--變量與基本數(shù)據(jù)類型

閱讀 1484·2019-08-23 16:14

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

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

Hello, {this.props.name}

Hello, {this.props.name}

相關(guān)文章

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

react-router 2.7.0源碼深度分析

React基礎(chǔ)再回顧

深入理解js

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

發(fā)表評(píng)論

0條評(píng)論

XanaHopper

男|高級(jí)講師

TA的文章

非常實(shí)用的在線工具網(wǎng)站清單

Leetcode 刷題（持續(xù)更新）

??思維導(dǎo)圖整理大廠面試高頻數(shù)組10: 3種方法徹底解決中位數(shù)問題, 力扣4??

HTML、CSS、meta常用代碼

移動(dòng)端兼容問題總結(jié)(2)

從隱藏元素談起

Decorator:從原理到實(shí)踐，我一點(diǎn)都不虛~

JavaScript--變量與基本數(shù)據(jù)類型

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

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

Hello, {this.props.name}

Hello, {this.props.name}

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！