React - 组件：函数组件

目录：

    1. 组件名字首字母一定是大写的
    2. 返回一个jsx
    3. jsx依赖React，所以组件内部需要引入React
    4. 组件传参
        a. 传递. <Component list={ arrData }><Component>
        b. 接收. function Component( props ){...}
        c. 使用. const { list } = props，list就是参数数据
    5. 缺点：【无状态组件】只能实现很简单的视图展示功能，没有自己的内容数据、没有状态，没有逻辑处理，【没有this】，【没有生命周期】。
    6. 16.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)
}

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

 

总结：

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