react中的无状态函数式组件

无状态函数式组件，顾名思义，无状态，也就是你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件，接收Props，渲染DOM，而不关注其他逻辑。

其实无状态函数式组件也是官方比较推荐的一种方式，尽量让底层的组件变成无状态函数式组件，也即组件尽量只用来显示数据，把数据操作的逻辑都放在顶层，然后从顶层把数据传到底层

嗯，看个例子，使用类组件和无状态函数式组件两种方法进行对比

顶层关键代码：

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import Bottom from './component/props'ReactDOM.render(<div><Bottom name="donna"/></div>,
document.getElementById('root')
)

底层代码，使用无状态函数式组件实现

import React,{Component} from 'react';
export default  function Bottom(props){let{name} = propsconst sayHi = () => {console.log(`Hi ${name}`);}return (<div><h1>Hello, {name}</h1><button onClick ={sayHi}>Say Hi</button></div>)
}

然后看类式组件的实现方法

import React,{Component} from 'react';export default  class Bottom extends Component{constructor(props){super(props);this.sayHi = this.sayHi.bind(this)//记得绑定this，否则this指向可能会出错}sayHi(){let {name} = this.propsconsole.log(`Hi ${name}`);}render(){let {name} = this.propslet{sayHi} =this;return(<div><h1>{`Hello, ${name}`}</h1><button onClick ={sayHi}>Say Hi</button></div>)}}

对比下来，确实无状态函数组件代码量少（轻量），最重要的是，函数式组件简单啊，类式组件一不小心就出错了。

函数式组件更容易理解。当你看到一个函数组件时，你就知道它的功能只是接收属性，渲染页面，它不执行与UI无关的逻辑处理，它只是一个纯函数。而不用在意它返回的DOM结构有多复杂。

不需要声明类，可以避免大量的譬如extends或者constructor这样的代码

不需要显示声明this关键字，在ES6的类声明中往往需要将函数的this关键字绑定到当前作用域，而因为函数式声明的特性，我们不需要再强制绑定

无状态组件不支持 "ref"
有一点遗憾的是无状态组件不支持 "ref"。原理很简单，因为在 React 调用到无状态组件的方法之前，是没有一个实例化的过程的，因此也就没有所谓的 "ref"。

react中的无状态函数式组件相关推荐

Blazor中的无状态组件
声明:本文将RenderFragment称之为组件DOM树或者是组件DOM节点,将*.razor称之为组件. 1. 什么是无状态组件如果了解React,那就应该清楚,React中存在着一种组件,它只 ...
class根据状态 vue_搞懂并学会运用 Vue 中的无状态组件
啥是应用程序状态,为什么咱们需要它? 状态管理通常在较小的项目并不需要,但是当涉及到更大的范围时,如企业级的应用大部分需要它了.简单的说,状态是一个包含应用程序使用的最新值的对象.但是,如果咱们从结构 ...
React 中动态的加载组件 ---loadable-components
loadable-components 用于在react 中动态的加载组件安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助
[react] 说说你对“在react中，一切都是组件”的理解
[react] 说说你对"在react中,一切都是组件"的理解 React采用组件化的思想,最小的组件单位就是原生HTML元素,采用JSX的语法声明组件的调用 React的虚拟DO ...
分布式系统中的“无状态”和“有状态”详解
「数据一致性」和「高可用」其实本质是一个通过提升复杂度让整体更完善的方式. 本文主要讲一些让系统更简单,更容易维护的东西--「易伸缩」,首当其冲的主题就是「stateless」,也叫「无状态」. 服务 ...
PHP无状态对象,（PHP）基于Token的身份验证中对无状态的理解
假设我们设计的Token储存的信息为: 用户名.发行时间.过期时间.签名在用户登录成功后,我们获取到用户的用户名.此时的时间戳,并将它们和我们设置的过期时间拼接在一起,组成一个字符串,假设为: $i ...
如何在 Kubernetes 中对无状态应用进行分批发布
在 Kubernetes 中针对各种工作负载,提供了多种控制器,其中 Deployment 为官方推荐,被用于管理无状态应用的 API 对象.本文将结合 Deployment 的特性,与常见的发布策略 ...
在react中使用css modules解决组件之间样式覆盖问题
今天在写react项目的时候发现两个组件之间相同类名之间样式会发生覆盖的问题,上网查了一下,大佬们都推荐使用css IN JS 简单介绍一下自己的使用:come on baby 介绍:css in j ...
HTTP中的无状态、无连接是什么意思呢？超详细
以前http.https.IP.TCP.UDP.TCP/IP都是靠背的,特别是http中的各种无连接无状态都是死记硬背的,过阵子又忘了,直到看到这篇文章,直接拍手叫好,转载给大家一起看原为地址:ht ...

react中的无状态函数式组件

react中的无状态函数式组件相关推荐

最新文章

热门文章