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

資訊專欄INFORMATION COLUMN

React入門0x017: 函數(shù)組件

weapon / 2922人閱讀

摘要：概述函數(shù)組件其實(shí)就是一個(gè)函數(shù)，一個(gè)函數(shù)。所以可以用來做一些快速的封裝，比如，一個(gè)組件的代碼太多，顯得咋亂，又沒有復(fù)雜到需要另起一個(gè)組件，可以用函數(shù)組件源碼這是標(biāo)題欄這是導(dǎo)航欄哈哈效果總結(jié)沒有多余的東西，對(duì)性能也有所提升哦

0x000 概述

函數(shù)組件其實(shí)就是一個(gè)函數(shù)，一個(gè)render函數(shù)。

0x001 栗子

源碼

import React from "react"
import ReactDom from "react-dom"

function App(props){
    return(

        {props.name}
    
)
}

ReactDom.render(
    ,
    document.getElementById("app"))

效果

更加精簡(jiǎn)一點(diǎn)
借用箭頭函數(shù)和參數(shù)解構(gòu)

let App = ({name}) => 
{name}

注意：

沒有this

沒有生命周期

只有一個(gè)參數(shù)：props（如果打印參數(shù)列表會(huì)發(fā)現(xiàn)有兩個(gè)參數(shù)，第二個(gè)參數(shù)是context，但是context的api已經(jīng)發(fā)生改變，所以，第二個(gè)參數(shù)應(yīng)該是遺留下來的，官方文檔中也有說明，函數(shù)組件只有一個(gè)props參數(shù)）

0x003 portal-容器組件

函數(shù)組件也可以有children，變成一個(gè)portal，或者是容器組件？

源碼：

let App = ({children}) => 
{children}

ReactDom.render(
    
       哈哈
    ,
    document.getElementById("app"))

效果

0x004 用法

函數(shù)組件有個(gè)好處，那就是簡(jiǎn)單，不需要太多的樣板代碼，并且相同的輸入可以得到相同的輸出，是個(gè)純函數(shù)。

所以可以用來做一些快速的封裝，比如，一個(gè)組件的代碼太多，顯得咋亂，又沒有復(fù)雜到需要另起一個(gè)組件，可以用函數(shù)組件:

源碼：

let App = ({children}) => 
{children}

let Topbar = () => 
這是標(biāo)題欄

let Navbar = () => 
這是導(dǎo)航欄

let Content = ({children}) => 
{children}


ReactDom.render(
    
        
        
            
哈哈

        
        
    ,
    document.getElementById("app"))

效果：

總結(jié)

沒有多余的東西，對(duì)性能也有所提升哦～

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

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

相關(guān)文章

  • es6基礎(chǔ)0x017：新的 Math、Number、String、Array、Object 的 Ap

    摘要：更新了幾個(gè)方法，但是一般情況下沒有太大的用處反雙曲線函數(shù)，返回一個(gè)數(shù)字的反雙曲余弦值算數(shù)平方根函數(shù)，返回所有參數(shù)的算術(shù)平方根類的位整數(shù)乘法運(yùn)算函數(shù)該常量表示與可表示的大于的最小的浮點(diǎn)數(shù)之間的差值，那有什么用呢可以用來解決浮 0x001 Math Math更新了幾個(gè)方法，但是一般情況下沒有太大的用處 反雙曲線函數(shù)，返回一個(gè)數(shù)字的反雙曲余弦值 Math.acosh(-1); // N...

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

  • 快速入門React

    摘要：考慮到是快速入門，于是乎我們就記住一點(diǎn)，當(dāng)修改值需要重新渲染的時(shí)候，的機(jī)制是不會(huì)讓他全部重新渲染的，它只會(huì)把你修改值所在的重新更新。這一生命周期返回的任何值將會(huì)作為參數(shù)被傳遞給。 安裝react npm install creat-react-app -gshowImg(https://segmentfault.com/img/remote/1460000015639868); 這里直...

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

  • React入門0x018: 高階函數(shù)組件(HOC)

    摘要：總結(jié)其實(shí)，這個(gè)和的思想有很大的淵源，不推薦繼承，而是推薦組合，而就是其中的典范。比如我們寫了兩個(gè)個(gè)高階組件，一個(gè)是，一個(gè)是，組件就可以隨意的在和之間隨意切換，而不需要改動(dòng)組件原有代碼。 0x000 概述 高階函數(shù)組件...還是一個(gè)函數(shù)，和函數(shù)組件不同的是他返回了一個(gè)完整的組件...他返回了一個(gè)class！?。?0x001 直接上栗子 照常，先寫個(gè)App組件，外部傳入一個(gè)theme ...

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

  • 01.react入門必備，知識(shí)點(diǎn)梳理，生命周期全講解

    摘要：生命周期在版本中引入了機(jī)制。以后生命周期圖解不包含官方不建議使用的事件處理事件的命名采用小駝峰式，而不是純小寫。只是在兄弟節(jié)點(diǎn)之間必須唯一受控組件使的成為唯一數(shù)據(jù)源。 react 基礎(chǔ) JSX JSX是一個(gè) JavaScript 的語法擴(kuò)展,可以很好地描述 UI 應(yīng)該呈現(xiàn)出它應(yīng)有交互的本質(zhì)形式。 React DOM 在渲染所有輸入內(nèi)容之前，默認(rèn)會(huì)進(jìn)行轉(zhuǎn)義。它可以確保在你的應(yīng)用中，永遠(yuǎn)...

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

  • 不得不聊聊的react--入門篇

    摘要：一誕生的性能瓶頸，主要有以下原因。注意組件類的第一個(gè)字母必須大寫，否則會(huì)報(bào)錯(cuò)。組件并不是真實(shí)的節(jié)點(diǎn)，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬。此外，還提供兩種特殊狀態(tài)的處理函數(shù)。不會(huì)隨著時(shí)間改變可能不是。 本文為學(xué)習(xí)筆記，適合入門的童鞋，如有錯(cuò)誤，請(qǐng)多多指教。 一、react誕生 Web app的性能瓶頸，主要有以下原因。 （1）Web基于DOM，而DOM很慢。瀏覽器打開網(wǎng)頁時(shí)，需要...

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

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

0條評(píng)論

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