react中的state详解 react真的好用吗?

[更新]
·
·
分类:互联网
2842 阅读

react中的state详解

react真的好用吗?

react真的好用吗?

作为实际使用React TypeScript几年,多种项目从开发到生产发布经验的过来人,我来解答一下使用体验。我的结论是:有前端编程基础、学习和熟悉react相关技术栈后,使用react会觉得如鱼得水,生命周期状态保持、函数式编程、单项数据流、丰富的周边社区,让你能够很好地实现所需的前端业务系统,会感觉非常好用。
生命周期单项数据流,组件化开发react领先的引入了前端生命周期的概念,且模式为单项数据流,给每个组件有自己的状态state,以及接收参数props,每个组件形成了有机整体。从传入props,到生命周期中事件处理,状态state的改变,最后重新渲染组件以及离开后的。所有的组件遵照同样的方式,使得react可以进行组件化开发,每个组件都是类似的结构和方式。
方便开发业务搭配hook钩子的函数式组件react的函数组件可以单独编写业务,再结合前段时间出来的hook钩子方式,很好的解耦和编写状态。
这一点是非常亮点的功能。比如官网的例子:实现用户是否在线,传统的方式很难友好的组织业务代码开发。但react的hook来说,传入的props包含好友id,然后编写代码处理状态的改变,最后返回状态。对外部来说只需要知道结果,内部来说可以单独对状态处理。而这一切并没有页面UI层面的内容,纯业务js的状态处理。
结尾react熟悉使用后会觉得非常好用,能够满足当下的业务所需。虽然有一定的门槛要求,但只要入门和掌握和熟悉使用后,会发现对业务的处理得心应手,比起原来难以维护的业务代码,以及较大的系统都能够很好的拆分,组件化开发,搭配周边的插件辅助业务开发,最终实现所需的业务功能。

使用react开发过几个项目。于我而言,react真的好用。react设计思想及其独特,性能也很出众,但是代码逻辑却很简单。
一般的小项目使用create-react-app来搭建脚手架就可以了,及其的方便。调试简单,chrome 有专门的react插件方便开发者进行调试。
在这里推荐蚂蚁金服的,一套比较完善的设计UI。与react非常契合,支付宝啥的都在用,使用很方便,组件很多。

React组件设计思路是怎样的?

我是一名前端,用了2年的react,我来回答一下这个问题!
首先,创建React组件有三种方式:
函数式无状态组件
采用
(不推荐)
类继承
下面分别说一下三种方式
第一种:
表现形式上只是一个函数,函数参数是传入的属性props,没有生命周期中的各个钩子函数,也不会被实例化,在函数中不能使用this关键字,组件的数据来源于props,没有自身状态的组件可以采用这种方式,优点是性能好。
第二种:基本被放弃
第三种:
以es6 class的方式定义,并且继承自React的Component,生命周期中的各个钩子函数都挂在了实例上,在整个生命周期中可以通过state 和 props控制组件的状态,state是控制组件自身的状态。
高阶组件
所谓高阶组件其实就是把一个组件传入一个函数中返回一个新的组件,实现方式:
1、定义一个函数,参数是react组件,返回另外一个组件
2、采用es6的decorator
简单的说就是再对组件包装一层,包装的方式有:
1、把参数当做子组件使用
2、直接把参数当做父类继承
注:高阶组件的作用是复用相同的组件逻辑,所以难点在于如何去抽离这些组件的公共逻辑并且能够供多人使用,我想应该需要维护一个公共组件库!
组件的划分
我们以上面这个页面为例来说明组件的划分,这个页面分为两大块,虚线框里面的是筛选项包括输入框、选择项、搜索按钮,下方是搜索结果,那么你遇到这样的页面怎么去划分组件呢?
我想有两种方式:
1、输入框、选择项、搜索按钮、搜索结果、列表各是一个组件(通常的思维)
2、整个页面是一个组件
第一种划分方式:
功能划分的细致,灵活,维护性强,可配置性强,可通过不同的组合渲染出不同的页面,但是在开发页面时需要一个个拼接组件,可能还需要开发一些另外的逻辑
第二种方式:
灵活度差,逻辑复杂,维护性差,但是如果你开发的页面都长得大致如此,那就很适合这么干,配合脚手架,出活嗖嗖的
所以组件的划分还是依赖于业务!
喜欢我的回答就关注我吧,有问题可以发表评论,我们一起学习,共同成长!