react 函数子组件(Function ad Child Component)

更新日期: 2018-12-30阅读量: 1748标签: 组件

今天学习了react中的函数子组件的概念,然后在工作中得到了实际应用,很开心,那么好记性不如烂笔头,开始喽~

函数子组件(FaCC )与高阶组件做的事情很相似, 都是对原来的组件进行了加强,类似装饰者。

FaCC,利用了react中children可以是任何元素,包括函数的特性,那么到底是如何进行增强呢?


分两步走

第一步:class FetchDataParent 

import * as React from 'react'
import { get } from '../../common/fetch'
import { handleNotificate } from '@hi-ui/hiui/es/notification'

export default class WithRangeData extends React.PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      data: []
    }
  }
  componentDidMount () {
// 从props中接收url,然后制作data,存入到自己的state中,具体处理逻辑,大家不用看
    const { url } = this.props
    get(url)
      .then(res => {
        if (res && res.status === 200) {
          const result = []
          res.data.forEach(element => {
            const { status, value } = element
            switch (status) {
              case 0:
                result.push({
                  name: value,
                  id: value
                })
                break
              default:
            }
          })
          this.setState({
            data: result
          })
        } else {
          handleNotificate({
            type: 'erroe',
            autoClose: true,
            title: '请求出错',
            message: `请求出错,原因:${res.message}`
          })
        }
      })
  }
  render () {
    const { children } = this.props
    const { data } = this.state
// 这里是关键,将自己state中的值,传给children,直接执行了children(), 说明children是个函数
    return <div>
      {children(data)}
    </div>
  }
}


第二步:使用上面的父组件,

export default class AccessApply extends React.PureComponent {
   render(){
    // WithRangeData里的children是一个函数,接收父组件给的data,并return出自己想要的任何东西。
     return (
             <WithRangeData
                url={`${encyclopediaUrl.getPermissionDimensionValues}?id=${range.id}`}
             >
            {
              (data) => {
                return (
                  <div>
                    <span>{range.nickname}</span>
                    <Select
                      mode='multiple'
             list={data}

                      onChange={(item) => {
                        console.log('多选结果', item)
                      }}
                    />
                  </div>
                )
              }
            }
          </WithRangeData>
    )
  }
}


总结:可以看到,函数子组件模式,也是给他的children传递一些数据,与高阶组件很相似。

然而,FaCC不会再去创建一个新的Component,而HOC会创建一个新的Component然后传递props下去。 同时,FaCC这种模式,父组件与子组件的关系比较明显,代码更易读。

高阶组件优点:有完整的生命周期。FaCC中children直接执行,无生命周期。

 

最后,展示一下react 函数组件如何写Facc:

const ClassNameWrapper = ({ children }) => children('demo-class')

// 使用

const HeadWithClass = (props) => (
  <ClassNameWrapper>
    {(class) => <header classNmae={class} ></header>}
  </ClassNameWrapper>
)


来自:https://www.cnblogs.com/yadiblogs/archive/2018/12/29/10197598.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1723

运用 Vue 中的无状态组件

状态管理通常在较小的项目并不需要,但是当涉及到更大的范围时,如企业级的应用大部分需要它了。简单的说,状态是一个包含应用程序使用的最新值的对象。但是,如果咱们从结构的、更抽象的角度来看待它,就会清楚地看到

Vue父子组件双向绑定传值的实现方法

从某方面讲,父组件传值给子组件进行接收,之后在子组件中更改是不允许的。你会发现vue也会直接报错,而在封装一些组件的时候,又希望做到数据的双向绑定,可以更好的控制与使用,在网上找到了两种方法

清理组件的 3 种方法

编写可维护的代码并不容易。这件事学起来难,教别人如何做更难。大多数时候,这是个熟能生巧的事情。但是历年来,我学习到的能让你快速掌握的参考资料还是比较少

深入探讨前端组件化开发

前端组件化开发,已经有多年的历史了,不管是服务端渲染,还是前端SPA,都有了比较成熟的组件化开发的方案。 随着组件化开发的普及,前端社区中贡献了很多不错的前端组件,都提供开箱即用的方案,使得更好的发挥组件化的优势。

vue组件之间互相传值:父传子、子传父

在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性或者借助子组件的ref数性。

vue的provide / inject 有什么用?

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。provide/inject平时用的比较少,多数用于开发组件,但某些情况下还是很好用的。

vue实现一个全局Message组件

不知道大家在用一些UI框架,比如Element-ui的时候,有没有觉得一些全局组件。this.$message(),this.Toast()等,用起来很爽。他们不像其他的组件,需要去导入,去注册。麻烦的很。

Vue.js 多选列表(Multi-Select)组件

多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素。这是一种常见的设计元素。有时候为了节省空间,我们会将选项折叠于 Combo Box 中

vue在自定义组件中使用v-model进行数据绑定

有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。先来一个组件,不用vue-model,正常父子通信;点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。

Vue中插槽的作用_Vue组件插槽的使用以及调用组件内的方法

通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数,slot的使用就像它的名字一样, 在组件内定义一块空间。在组件外, 我们可以往插槽里填入任何元素。slot-scope的作用就是把组件内的数据带出来

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!