React入门0x017: 函数组件

followWinter

0x000 概述

函数组件其实就是一个函数,一个render函数。

0x001 栗子

  • 源码

    import React from 'react'
    import ReactDom from 'react-dom'
    
    function App(props){
        return(<div>
            {props.name}
        </div>)
    }
    
    ReactDom.render(
        <App name='function component'/>,
        document.getElementById('app'))
  • 效果

    clipboard.png

  • 更加精简一点
    借用箭头函数和参数解构

    let App = ({name}) => <div>{name}</div>
  • 注意:

    • 没有this
    • 没有生命周期
    • 只有一个参数:props(如果打印参数列表会发现有两个参数,第二个参数是context,但是contextapi已经发生改变,所以,第二个参数应该是遗留下来的,官方文档中也有说明,函数组件只有一个props参数)

0x003 portal-容器组件

函数组件也可以有children,变成一个portal,或者是容器组件?

  • 源码:

    let App = ({children}) => <div>{children}</div>
    ReactDom.render(
        <App>
           哈哈
        </App>,
        document.getElementById('app'))
  • 效果

    clipboard.png

0x004 用法

函数组件有个好处,那就是简单,不需要太多的样板代码,并且相同的输入可以得到相同的输出,是个纯函数。

所以可以用来做一些快速的封装,比如,一个组件的代码太多,显得咋乱,又没有复杂到需要另起一个组件,可以用函数组件:

  • 源码:

    let App = ({children}) => <div>{children}</div>
    let Topbar = () => <div>这是标题栏</div>
    let Navbar = () => <div>这是导航栏</div>
    let Content = ({children}) => <div>{children}</div>
    
    ReactDom.render(
        <App>
            <Topbar/>
            <Content>
                <div>哈哈</div>
            </Content>
            <Navbar/>
        </App>,
        document.getElementById('app'))
  • 效果:

    clipboard.png

总结

没有多余的东西,对性能也有所提升哦~

阅读 439

漫漫填坑路,十里长安响码声。
哎,好像不能申请多个专栏呢,原本这个专栏只放前端文章,现在看来不行了!就都放吧!

暂时没有

1.5k 声望
54 粉丝
0 条评论

暂时没有

1.5k 声望
54 粉丝
宣传栏