React入门0x017: 函数组件

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'))

• 效果

  

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

  let App = ({name}) => <div>{name}</div>

• 注意：

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

0x003 portal-容器组件

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

• 源码：

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

• 效果

  

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'))

• 效果：

  

总结

没有多余的东西，对性能也有所提升哦～