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

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

vue中如何实现的自定义按钮

在实际开发项目中,有时我们会用到自定义按钮;因为一个项目中,众多的页面,为了统一风格,我们会重复用到很多相同或相似的按钮,这时候,自定义按钮组件就派上了大用场,我们把定义好的按钮组件导出,在全局引用,就可以在其他组件随意使用啦,这样可以大幅度的提高我们的工作效率。

React高阶组件中使用React.forwardRef的技巧

之前使用React.forwardRef始终无法应用于React高阶组件中,关键点就是React.forwardRef的API中ref必须指向dom元素而不是React组件。codepen实例请划到底部。

vue父组件触发事件改变子组件的值

父组件向子组件通信业务场景:现在我要在父组件点击一个回退按钮,这个回退会传进子组件中(子组件中有两步进程),子组件来处理。起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值

Vue组件系统

vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统。每一个新技术的诞生,都是为了解决特定的问题。

使用Vue 3.0做JSX(TSX)风格的组件开发

不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方,让我难以接受。所以在很长一段时间,我都在尝试寻找React的替代品,我尝试过不少别的前端框架,但都有各种各样的问题或限制

Vue的组件化

组件化是Vue的精髓,Vue就是由一个一个的组件构成的。Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解。这时候又有可能无从下手,因此在这里阐释一下个人对Vue的组件化的理解。

使用 Recompose 来构建高阶组件

在 Workpop 公司,我们不断使用不同的组件设计模式来迭代我们的产品,以适应瞬息万变的 React 生态系统。早些时候,我们从试用高阶组件设计模式(HOC)中尝到一点甜头。

Vue子父组件方法互调

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

vue.js自定义组件directives

自定义指令:以v开头,如:v-mybind。bind的作用是定义一个在绑定时执行一次的初始化动作,观察bind函数,它将指令绑定的DOM作为一个参数,在函数体中,直接操作DOM节点为input赋值。

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

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

点击更多...

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