React入門0x017: 函數組件

weapon 發布于2019-08-23 13:50 / 2906人閱讀

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

0x000 概述

函數組件其實就是一個函數，一個render函數。

0x001 栗子

源碼

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

function App(props){
    return(
        {props.name}
    )
}

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

效果

更加精簡一點
借用箭頭函數和參數解構

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

注意：

沒有this

沒有生命周期

只有一個參數：props（如果打印參數列表會發現有兩個參數，第二個參數是context，但是context的api已經發生改變，所以，第二個參數應該是遺留下來的，官方文檔中也有說明，函數組件只有一個props參數）

0x003 portal-容器組件

函數組件也可以有children，變成一個portal，或者是容器組件？

源碼：

let App = ({children}) => {children}
ReactDom.render(
    
       哈哈
    ,
    document.getElementById("app"))

效果

0x004 用法

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

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

源碼：

let App = ({children}) => {children}
let Topbar = () => 這是標題欄
let Navbar = () => 這是導航欄
let Content = ({children}) => {children}

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

效果：

總結

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

云服務器 GPU云服務器函數式組件 react _React React 源碼

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

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

es6基礎0x017：新的 Math、Number、String、Array、Object 的 Ap

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

why_rookie 2019-08-26 12:22 評論0 收藏0
快速入門React

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

figofuture 2019-08-22 18:43 評論0 收藏0
React入門0x018: 高階函數組件(HOC)

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

QLQ 2019-08-23 13:52 評論0 收藏0
01.react入門必備，知識點梳理，生命周期全講解

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

Jiavan 2019-08-26 10:36 評論0 收藏0
不得不聊聊的react--入門篇

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

lidashuang 2019-08-19 18:04 評論0 收藏0