目录:

    . 组件名字首字母一定是大写的
. 返回一个jsx
. jsx依赖React,所以组件内部需要引入React
. 组件传参
a. 传递. <Component list={ arrData }><Component>
b. 接收. function Component( props ){...}
c. 使用. const { list } = props,list就是参数数据
. 缺点:【无状态组件】只能实现很简单的视图展示功能,没有自己的内容数据、没有状态,没有逻辑处理,【没有this】,【没有生命周期】。
. .7以后版本的react有状态和钩子函数提供使用。不过版本过新不推荐用
内部不用render函数,会自动把return返回结果当做render返回结果【见类组件的必须要求】

js文件中的函数组件:

首字母大写、有返回jsx的函数组件

也可以直接调用函数,实现函数组件引用。

函数组件里可以返回一个字符串:

但是没有返回值就会报错:

组件之间写内容不会展示出来:

组件身上写className没用:

渲染的结果如下:没有组件中的内容,也没有class类名

独立写在js里的函数组件:

必须引入React才能使用、导出函数本身。代码如下

组件传参:

传入 - 属性传参

<HotList listData={ data } testData={ data2 }></HotList>

接收 - 参数接收
function HotList(props){
  console.log(props)
}

传入1个参数时,props打印

传入2个参数时,props打印

可见传入的所有参数都集合在函数的props参数中,解构出来即可引用。

引用 - 解构或直接引用

直接使用
console.log(props)
console.log(props.testData)

解构使用:

函数组件的缺点:

无状态组件
函数组件只能实现非常简单的渲染功能。只是进行页面的展示和数据的渲染。没有逻辑的处理。也就是组件的内部是没有自己的数据和状态的。它是无状态组件。
无状态组件的使用时机是当且仅当数据展示、不需要逻辑处理的时候来使用。

没有this
打印内部的this。得到undefined。
function HotList(props){
  console.log("打印函数组件内部的this:",this)
}

没有生命周期
函数组件内部也没有生命周期。

总结:

函数组件只有当展示视图的时候才用。做复杂的数据处理、需要有自己的状态的时候,需要用类组件。

React - 组件:函数组件的更多相关文章

  1. React 函数组件

    React 函数组件 1.定义方式 React 函数组件是指使用函数方法定义的组件. 定义方式:与函数的定义方式相同,需要将内容 return 出来,需要注意的是最外层只有一个标签或者使用<&g ...

  2. 好客租房21-react组件的两种创建方式(函数组件)

    1使用函数创建组件 函数组件:使用js的函数或者箭头函数创建的组件 约定1:函数组件名称必须以 开头 约定2:函数组件必须有返回值 表示该组件的结构 如果返回值为null 表示不渲染任何内容 2.1使 ...

  3. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  4. react hooks 如何自定义组件(react函数组件的封装)

    前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...

  5. React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路

    React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...

  6. React数据流和组件间的沟通总结

    今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...

  7. React Native的组件ListView

    React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...

  8. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  9. React——高阶组件

    1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...

随机推荐

  1. sentry之二:sentry配置钉钉和email

    springboot+springcloud后台项目配置日志采集 gradle: compile 'com.getsentry.raven:raven-logback:8.0.2' compile ' ...

  2. C#异步的世界【下】(转)

    接上篇:<C#异步的世界[上]> 上篇主要分析了async\await之前的一些异步模式,今天说异步的主要是指C#5的async\await异步.在此为了方便的表述,我们称async\aw ...

  3. Python: 截屏

    最近项目中想实现截屏功能,使用的笔记本是高清屏,实际屏幕设置成了150%,所以在截屏的时候遇到个各种问题. 最开始使用PIL ImageGrab来截取屏幕,如果本来是100%的设置没有问题,能截取到全 ...

  4. jquery点击放大图片

    参考地址:https://blog.csdn.net/qq_42249896/article/details/86569636 一.应用场景:点击图片可以对图片进行放大显示. 二.实现代码: 说明:我 ...

  5. python--线程和进程的初识

    一.进程与线程之间的关系 1.线程是属于进程的,线程运行在进程空间内,同一进程所产生的线程共享同一内存空间,当进程退出时该进程所产生的线程都会被强制退出并清除. 2.线程可与属于同一进程的其它线程共享 ...

  6. PAT 1026程序运行时间

    PAT 1026程序运行时间 要获得一个 C 语言程序的运行时间,常用的方法是调用头文件 time.h,其中提供了 clock() 函数,可以捕捉从程序开始运行到 clock() 被调用时所耗费的时间 ...

  7. English--音标拼读

    English|音标拼读 音标拼读主要内容是,如何使用音标进行单词的拼读,并且会有相应的语音现象,最关键的还是自己多加练习,多听~ 前言 目前所有的文章思想格式都是:知识+情感. 知识:对于所有的知识 ...

  8. iOS7向开发者开放的新功能汇总

    转自:http://www.25pp.com/news/news_28002.html iOS7才放出第二个测试版本,我们已经看到了不少的新功能和新改变.最近,科技博客9to5Mac将iOS7中向开发 ...

  9. 本机安装mysql步骤

    原文:https://www.cnblogs.com/dukeShi/p/6546024.html 本机安装mysql服务,步骤教程(另附SQLyog和Navicat工具) 因为这段时间不是装系统就是 ...

  10. C++ OpenSSL 之四:CER转换为PEM

    1.等同于使用: openssl  x509 -in "cer_path" -inform DER -out "save_path" -outform PEM ...