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

时间: 2018-12-30阅读: 1490标签: 组件

今天学习了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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

如何构建运行良好的Vue组件

很少有人最初编写Vue组件时打算将其开源。我们大多数人都是从自己编写组件开始的——我们有一个问题,然后决定通过构建一个组件来解决它。有时我们发现自己想要在代码库的新位置解决相同的问题,因此我们使用组件并对其进行重构

编写 Vue.js 组件前需要知道的 10 件事

本文介绍了编写 Vue.js 组件前需要知道的 10 件事,其中包括:组件可以全局或局部加载;延迟加载 / 异步组件;必需的 Props;使用 $emit 触发自定义事件;多 Props 绑定和覆盖等等。

如何在 React 中实现 keep alive

在 Vue 中,我们可以使用 keep-alive 包裹一个动态组件,从而「缓存」不活跃的实例,而不是直接销毁他们:

vue封装组件调用时绑定click事件

我们在开发中会封装许多的通用的组件,那么如何封装好一个组件时,在调用的时候绑定click事件呢?

将多个属性传递给 Vue 组件的几种方式

所有使用基于组件的体系结构(如Vue和React)的开发人员都知道,创建可重用组件是很困难的,而且大多数情况下,最终会通过传入大量的属性,以便从外部更容易地控制和自定义组件。这并不坏,但是传递大量属性确实会变得有点麻烦和丑陋。

父组件从vuex获取数据给子组件传值延迟问题

做项目的时候发现如果子组件在页面比较靠上,子组件渲染的时候父组件还未取到值,导致子组件取不到数据

可靠React组件设计的7个准则之组合和复用

此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长,我对文章进行了分割,本篇文章重点阐述 组合和复用。因水平有限,文中部分翻译可能不够准确,如果你有更好的想法

Vue子父组件方法互调

讲干货,不啰嗦,大家在做vue开发过程中经常遇到父组件需要调用子组件方法或者子组件需要调用父组件的方法的情况,现做一下总结,希望对大家有所帮助。设置子组件的ref

实现一个简单的toast组件

最近写了个简单的html+js的页面,里面需要一个提交表单的反馈动作,于是手撸了个简单的toast组件

vue.js注册引用全局消息组件

在 src/components 下新建 index.js 文件,复制贴入以下代码:注册全局组件需要使用 Vue.component,第一个参数 ‘Message‘ 是组件名称,第二个参数 Message 是一个对象或者函数,我们这里是一个对象

点击更多...

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