React入门0x017: 函数组件

weapon 发布于2019-08-23 13:50 / 2818人阅读

摘要：概述函数组件其实就是一个函数，一个函数。所以可以用来做一些快速的封装，比如，一个组件的代码太多，显得咋乱，又没有复杂到需要另起一个组件，可以用函数组件源码这是标题栏这是导航栏哈哈效果总结没有多余的东西，对性能也有所提升哦

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 源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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