亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

React入門(mén)系列 - 4. 認(rèn)識(shí)無(wú)狀態(tài)組件

cgspine / 2415人閱讀

摘要：讓他增加一個(gè)內(nèi)部維持的狀態(tài)另外有一點(diǎn)需要注意，由于是無(wú)狀態(tài)組件，所以，無(wú)論是否變更，都會(huì)重新刷新這個(gè)組件。

4.1 什么是無(wú)狀態(tài)組件

在開(kāi)發(fā)React組件的時(shí)候，大家可能會(huì)遇到就是我使用的這個(gè)組件純粹就是渲染使用，里面并沒(méi)有自己的狀態(tài)、方法、生命周期等等操作。

而為這種組件創(chuàng)建完整的實(shí)例有一種浪費(fèi)機(jī)器性能的感覺(jué)。

那么，讓我們來(lái)看看，如何創(chuàng)建一個(gè)easy react component。

新建一個(gè)文件noStateComponent.js，在里面寫(xiě)入如下代碼:

import React from "react";

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

接著修改index.js文件，導(dǎo)入這個(gè)無(wú)狀態(tài)組件

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}
        
組件生成時(shí)間:{this.state.time}

        
{this.state.obj.join("
")}

        
        主體Children
        
        
      

    );
  }
}

刷新瀏覽器，你會(huì)看到無(wú)狀態(tài)組件成功渲染在界面上。

當(dāng)然并不是無(wú)狀態(tài)組件無(wú)法使用內(nèi)部狀態(tài)，我們修改一下無(wú)狀態(tài)組件。讓他增加一個(gè)內(nèi)部維持的狀態(tài)

import React from "react";

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

}

另外有一點(diǎn)需要注意，由于是無(wú)狀態(tài)組件，所以，無(wú)論props是否變更，都會(huì)重新刷新這個(gè)組件。請(qǐng)看以下代碼

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，這個(gè)方法會(huì)自動(dòng)對(duì)數(shù)據(jù)進(jìn)行淺層對(duì)比。

你可以通過(guò)注釋上面兩個(gè)export你會(huì)發(fā)現(xiàn)，點(diǎn)擊按鈕之后，如果是無(wú)狀態(tài)組件，那么它將跟隨變動(dòng)而刷新。
如果是繼承PureComponent的，則沒(méi)有任何改變。

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

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

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

相關(guān)文章

  • React入門(mén)系列 - 3 state與props

    摘要：而主要被設(shè)計(jì)用于維持組件內(nèi)部私有狀態(tài)。初始化初始化需要在中進(jìn)行。對(duì)于的定義為請(qǐng)求修改某個(gè)數(shù)據(jù)，而的實(shí)現(xiàn)則是將對(duì)變量的修改放入一個(gè)修改隊(duì)列中，在一個(gè)循環(huán)之后進(jìn)行批量更新結(jié)果深入點(diǎn)涉及的更新機(jī)制。推出了與版本之后推出來(lái)的就是為了解決這些問(wèn)題的。 3.1 什么是state 我們要認(rèn)識(shí)到，React中的組件其實(shí)是一個(gè)函數(shù)，所以state是函數(shù)內(nèi)部的私有變量，外部其他組件或者方法都是無(wú)法直接訪問(wèn)...

    henry14 評(píng)論0 收藏0

  • 庫(kù)，組件，框架 - 收藏集 - 掘金

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

    tommego 評(píng)論0 收藏0

  • React 深入系列２：組件分類(lèi)

    摘要：無(wú)狀態(tài)組件和有狀態(tài)組件無(wú)狀態(tài)組件和有狀態(tài)組件，劃分依據(jù)是根據(jù)組件內(nèi)部是否維護(hù)。展示型組件和容器型組件展示型組件和容器型組件，劃分依據(jù)是根據(jù)組件的職責(zé)。 文：徐超，《React進(jìn)階之路》作者授權(quán)發(fā)布，轉(zhuǎn)載請(qǐng)注明作者及出處 React 深入系列2：組件分類(lèi) React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使...

    Karrdy 評(píng)論0 收藏0

  • React 深入系列2：組件分類(lèi)

    摘要：無(wú)狀態(tài)組件和有狀態(tài)組件無(wú)狀態(tài)組件和有狀態(tài)組件，劃分依據(jù)是根據(jù)組件內(nèi)部是否維護(hù)。展示型組件和容器型組件展示型組件和容器型組件，劃分依據(jù)是根據(jù)組件的職責(zé)。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使用React。 React 組件有很多種分類(lèi)方式，常見(jiàn)的分類(lèi)方式有函數(shù)組件和類(lèi)組件，無(wú)狀態(tài)組件和有狀態(tài)組件...

    fizz 評(píng)論0 收藏0

  • 第三方庫(kù)

    摘要：微信支付，支付寶支付，銀聯(lián)支付三大支付總結(jié)支付寶植入總結(jié)支付寶的植基于和百度地圖的組件庫(kù)基于百度地圖封裝的組件庫(kù)，使用這個(gè)庫(kù)最好需要先了解和百度地圖。 Commento - 多說(shuō) & Disqus 開(kāi)源替代品 Commento - 多說(shuō) & Disqus 開(kāi)源替代品 anime.js 簡(jiǎn)單入門(mén)教程 強(qiáng)大輕量的動(dòng)畫(huà)庫(kù) anime.js 入門(mén)教程 來(lái)自B站的開(kāi)源的MagicaSakura源...

    seanHai 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<