React - 组件：函数组件 - Powered by Discuz! Archiver

沙头粉都是初生养的 發表於 2019-11-24 15:50:00

React - 组件：函数组件

目录：
<div class="cnblogs_code">
<pre> 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返回结果【见类组件的必须要求】</pre>
</div>
<h2>js文件中的函数组件：</h2>
首字母大写、有返回jsx的函数组件
<img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154433592-1242860915.png" alt="" width="461" height="174">
 
也可以直接调用函数，实现函数组件引用。
<img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154438857-1065917946.png" alt="" width="522" height="185">
 
函数组件里可以返回一个字符串：
<img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154452215-1693117346.png" alt="" width="424" height="165">
 
但是没有返回值就会报错：
<img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154501041-662561588.png" alt="" width="642" height="54">
 
组件之间写内容不会展示出来：
<img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154512991-1648604673.png" alt="" width="363" height="66">
 
组件身上写className没用：
<img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154520622-1815708683.png" alt="" width="469" height="31">
 
渲染的结果如下：没有组件中的内容，也没有class类名
 <img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154541481-870376461.png" alt="" width="350" height="43">
 
 
<h2>独立写在js里的函数组件：</h2>
必须引入React才能使用、导出函数本身。代码如下
<img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154642209-707328778.png" alt="" width="569" height="571">
 
 
<h2>组件传参：</h2>
传入 - 属性传参
<img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154627715-1675003273.png" alt="" width="278" height="26">
<HotList listData={ data } testData={ data2 }></HotList>
 
接收 - 参数接收 function HotList(props){ 　　console.log(props) }
 
传入1个参数时，props打印
<img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154642734-1336971438.png" alt="" width="492" height="57">
传入2个参数时，props打印
<img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154706425-1412155183.png" alt="" width="490" height="70">
 
可见传入的所有参数都集合在函数的props参数中，解构出来即可引用。
 
引用 - 解构或直接引用
直接使用 console.log(props) console.log(props.testData)
<img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154717910-1286494525.png" alt="" width="323" height="103">
 
解构使用：
<img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154757834-2019467335.png" alt="" width="450" height="487">
 
 
<h2>函数组件的缺点：</h2>
无状态组件 函数组件只能实现非常简单的渲染功能。只是进行页面的展示和数据的渲染。没有逻辑的处理。也就是组件的内部是没有自己的数据和状态的。它是无状态组件。 无状态组件的使用时机是当且仅当数据展示、不需要逻辑处理的时候来使用。
没有this 打印内部的this。得到undefined。 function HotList(props){ 　　console.log("打印函数组件内部的this：",this) }
<img src="https://img2018.cnblogs.com/blog/956663/201911/956663-20191124154749405-471765723.png" alt="" width="266" height="26">
没有生命周期 函数组件内部也没有生命周期。
 
<h2>总结：</h2>
函数组件只有当展示视图的时候才用。做复杂的数据处理、需要有自己的状态的时候，需要用类组件。
 

</div>
<div id="MySignature" role="contentinfo">
越努力，越幸运；阿门。 
来源：https://www.cnblogs.com/padding1015/p/11922713.html

頁: [1]

琼殿技术论坛's Archiver

React - 组件：函数组件