反应成分几种形式的详细说明

时间：2021-08-29 来源：互联网编辑：宝哥软件园浏览：次

前言

最近项目基本都用React。今天，我们总结并分享几种常见形式的反应组件。如果您在编写React时经常不知道如何拆分代码，本文可能会对您有所帮助。

反应。组件是一个抽象基类。这意味着直接引用react是没有意义的。您可以实现它的一个子类，并定义至少一个render()方法来使用。

为了完全理解React，首先要理解JSX通常写的是什么。初学的时候很迷茫。这是一门新语言吗？大多数人是通过浏览文档开始发展的。通过巴别塔-预设-反应处理，我们可以看到JSX只是语法糖，JS最终在浏览器中运行。reactomponent最终是通过React.createElement创建的.总之，写React其实就是写JS。

无状态功能组件

React可以使用Function创建Component，Component没有生命周期，内部不维护状态，只要传入的道具发生变化就重新渲染。

函数Welcome(道具){return h1Hello，{ props . name }/h1；}用箭头功能书写更简洁。

const Welcome=props=h1Hello，{ props . name }/h1；以上两种形式生成的es5代码是相同的。

var Welcome=函数Welcome(props){ return _ react 2 . default . createelement(' h1 '，null，' Hello '，props . name)；};SFC的特点是只做渲染，代码短，没有其他条件分支，编译的代码量比Component类少。

不好意思，React 16.7 react钩子出来后，SFC这个名字就模棱两可了，因为使用useState，SFC也可以有局部状态，也可以有生命周期。再叫无状态组件就尴尬了，改名叫FC？

高阶组件

高级组件对于Vue开发人员来说应该是一个很奇怪的概念(不知道，我在使用Vue的时候还没有看到类似的用法)。从代码的角度来看，高阶组件是传入一个组件并返回另一个组件的方法。

函数logProps(WrappedComponent){ return类扩展了React。组件{ component willereceiveprops(next props){ console . log(' Current prop 3360 '，this . props)；console . log(' Next prop 3360 '，Next props)；} render(){ return WrappedComponent }.this . props }/；}}}最常见的高级组件是react-redux中的connect方法，它通过传入组件和map*ToProps方法将组件与存储区连接起来。连接后的值可以直接通过组件内部的道具获得。

exprot默认连接(mapStateToProps，mapDispatchToProps，)(组件)；高级组件适合扩展功能，将这些功能从业务组件中拉出，需要的时候放上，不需要的时候去掉，这对于包装好的组件来说是非常侵入性的。

动态组件

在某些业务场景中，执行时需要确定具体的标签或组件是什么。在React的世界中，大写字母将作为动态组件加载，而小写字母将被视为HTML DOM标记。

//heading . js render(){ const { Tag : Tag，children }=this.propsReturn Tag{ children }/Tag}根据一切都是JS的理论，只要引入不同的标签标签，就会呈现出不同的标题标签。

我们经常使用这种方法在后端配置组件和数据，在前端读取配置后呈现相应的内容。

功能作为子组件

反应子也可以是函数类型。如果直接调用会说什么？

例如，如果一个loading组件被打包，它将为子组件提供loading参数，然后业务组件将根据Loading判断需要呈现什么。

类LoadArea扩展组件{ state={ loading: true，}；componentDidMount() {asyncFunc()。然后(()={ this . setstate({ load : false，})})。catch(()={ this . setstate({ load : false，})} } render(){ return(React)。片段{ this . props . children({ 0.这个.道具，this.state，})}/React。片段)；}}用法

render(){ LoadingArea({ loading })={ loading？wating/: Main/}/装货区}同样的，最终执行时都是JS，没有什么好奇怪的。

反应16。* 新版本的联系。消费者就是采用了这种写法。

render(){ 0主题上下文。提供程序值={this.state.theme}.主题上下文。消费者{({主题})=(按钮样式={ {背景色：主题。背景} }切换主题/按钮)}/主题上下文。消费者./主题上下文.提供商}再以最近开发的例子，分享组件拆分的好处。

需求：开发倒计时组件，运营配置倒计时结束时间，倒计时初始化时间从服务端获取，结束之前显示倒计时，倒计时结束之后做对应的操作，比如切换倒计时为其他组件。

组件拆分：

一个业务层容器组件，负责统筹，处理业务逻辑。一个通用'倒计时'的组件，向服务端轮询系统时间，计算当前剩余时间，FaCC的形式提供给儿童。一个倒计时用户界面组件，对剩余时间格式化以及用户界面展示。伪代码：

//countdowcontainer。js render(){ const { end time，renderSomethingAfterCountDown，}=this . propsreturn(TimeLeftProvider结束时间={ end time } { seconds=(秒0?倒计时.这个。props } remainingSeconds={ seconds }/:下载后渲染某物())}/TimeLeftProvider)；}//TimeLeftProvider.jsexport默认类TimeLeftProvider扩展了pure component { static PrOptypes={ children : PrOptypes。func，endTime: PropTypes.number，}//.componentDidMount(){ this。poll()；} poll(){ query server time()；这个。轮询计时器=setInterval(()={ query server time()；}，轮询间隔* 1000)；}倒计时(){ setInterval(()={ this。setstate(prev state=({ remainingseconds 3360 prev state。remainingseconds-1，})；}, 1000);} render(){ const { remainingSeconds，可靠}=this.state返回这个.道具.孩子(剩余秒，可靠);}}//倒计时。jsfunction倒计时（道具){const {remainingSeconds，}=道具；const numbers=格式秒(remainingSeconds)；const输入=['天'，'小时'，'分钟'，'秒']；return(div style name={ cls } { inputs。map(key=({ label : key，number: numbers[key]，}).地图(//.)}/div)；}最终得到的结果是：