React入門系列 - 4. 認識無狀態組件

cgspine 發布于2019-08-26 18:09 / 2363人閱讀

摘要：讓他增加一個內部維持的狀態另外有一點需要注意，由于是無狀態組件，所以，無論是否變更，都會重新刷新這個組件。

4.1 什么是無狀態組件

在開發React組件的時候，大家可能會遇到就是我使用的這個組件純粹就是渲染使用，里面并沒有自己的狀態、方法、生命周期等等操作。

而為這種組件創建完整的實例有一種浪費機器性能的感覺。

那么，讓我們來看看，如何創建一個easy react component。

新建一個文件noStateComponent.js，在里面寫入如下代碼:

import React from "react";

export default (props)=>{props.name}

接著修改index.js文件，導入這個無狀態組件

import React, { PureComponent } from "react";
import Content from "./content.js"
import NoStateComponent from "./noStateComponent"
export default class index extends PureComponent {
  ...
  render() {
    return (
      
        Hello world React!{this.state.name}
        組件生成時間:{this.state.time}
        {this.state.obj.join("
")}
        
        主體Children
        
        
      
    );
  }
}

刷新瀏覽器，你會看到無狀態組件成功渲染在界面上。

當然并不是無狀態組件無法使用內部狀態，我們修改一下無狀態組件。讓他增加一個內部維持的狀態

import React from "react";

export default function(props){
    let lastTime = +new Date()
    return {props.name},lastTime:{lastTime}
}

另外有一點需要注意，由于是無狀態組件，所以，無論props是否變更，都會重新刷新這個組件。請看以下代碼

import React from "react";

export default function(props){
     let lastTime = +new Date()
     return {props.name},lastTime:{lastTime}
}

export default class Index extends React.PureComponent{
    constructor(props){
        super(props)
    }
    render () {
        let lastTime = +new Date()
        return {this.props.name},lastTime:{lastTime}
    }
}

我們繼承的是React新的PureComponent，這個方法會自動對數據進行淺層對比。

你可以通過注釋上面兩個export你會發現，點擊按鈕之后，如果是無狀態組件，那么它將跟隨變動而刷新。
如果是繼承PureComponent的，則沒有任何改變。

reflink:https://www.yodfz.com/detail/...

GPU云服務器云服務器系列4 react-router4 入門系列課程深度學習入門系列課程

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

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

React入門系列 - 3 state與props

摘要：而主要被設計用于維持組件內部私有狀態。初始化初始化需要在中進行。對于的定義為請求修改某個數據，而的實現則是將對變量的修改放入一個修改隊列中，在一個循環之后進行批量更新結果深入點涉及的更新機制。推出了與版本之后推出來的就是為了解決這些問題的。 3.1 什么是state 我們要認識到，React中的組件其實是一個函數，所以state是函數內部的私有變量，外部其他組件或者方法都是無法直接訪問...

henry14 2019-08-23 14:38 評論0 收藏0
庫，組件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架構就是骨架，如下圖所示譯年月個有趣的和庫前端掘金我們創辦的使命是讓你及時的了解開發中最新最酷的趨勢。翻譯 | 上手 Webpack ? 這篇就夠了！ - 掘金譯者：小 boy （滬江前端開發工程師）本文原創，轉載請注明作者及出處。原文地址：https://www.smashingmagazine.... JavaSrip... 讀 Zepto 源碼之代碼結構 - ...

tommego 2019-08-20 16:33 評論0 收藏0
React 深入系列２：組件分類

摘要：無狀態組件和有狀態組件無狀態組件和有狀態組件，劃分依據是根據組件內部是否維護。展示型組件和容器型組件展示型組件和容器型組件，劃分依據是根據組件的職責。文：徐超，《React進階之路》作者授權發布，轉載請注明作者及出處 React 深入系列2：組件分類 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使...

Karrdy 2019-08-22 16:05 評論0 收藏0
React 深入系列2：組件分類

摘要：無狀態組件和有狀態組件無狀態組件和有狀態組件，劃分依據是根據組件內部是否維護。展示型組件和容器型組件展示型組件和容器型組件，劃分依據是根據組件的職責。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 React 組件有很多種分類方式，常見的分類方式有函數組件和類組件，無狀態組件和有狀態組件...

fizz 2019-08-22 17:26 評論0 收藏0
第三方庫

摘要：微信支付，支付寶支付，銀聯支付三大支付總結支付寶植入總結支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程強大輕量的動畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

seanHai 2019-08-22 13:58 評論0 收藏0