最快让你上手ReactiveCocoa之基础篇

前言

很多blog都说ReactiveCocoa好用,然后各种秀自己如何灵活运用ReactiveCocoa,但是感觉真正缺少的是一篇如何学习ReactiveCocoa的文章,小编看了很多篇都没看出怎么使用ReactiveCocoa,于是决定自己写一遍关于学习ReactiveCocoa的文章,本文主要针对如何从零开始学习ReactiveCocoa,这里非常感谢3个人(支点的雷纯锋,camera360的宋潘,以及我的小学弟何宗柱(我爱科技)),在我研究ReactiveCocoa对我的帮助。
如果喜欢我的文章,可以关注我,微博:袁峥Seemygo,也可以来小码哥,了解下我们的iOS培训课程。之后还会更新《最快让你上手ReactiveCocoa之进阶篇》

1.ReactiveCocoa简介

ReactiveCocoa(简称为RAC),是由Github开源的一个应用于iOS和OS开发的新框架,Cocoa是苹果整套框架的简称,因此很多苹果框架喜欢以Cocoa结尾。

2.ReactiveCocoa作用

  • 在我们iOS开发过程中,当某些事件响应的时候,需要处理某些业务逻辑,这些事件都用不同的方式来处理。
  • 比如按钮的点击使用action,ScrollView滚动使用delegate,属性值改变使用KVO等系统提供的方式。
  • 其实这些事件,都可以通过RAC处理
  • ReactiveCocoa为事件提供了很多处理方法,而且利用RAC处理事件很方便,可以把要处理的事情,和监听的事情的代码放在一起,这样非常方便我们管理,就不需要跳到对应的方法里。非常符合我们开发中高聚合,低耦合的思想。

3.编程思想

在开发中我们也不能太依赖于某个框架,否则这个框架不更新了,导致项目后期没办法维护,比如之前Facebook提供的Three20框架,在当时也是神器,但是后来不更新了,也就没什么人用了。因此我感觉学习一个框架,还是有必要了解它的编程思想

先简单介绍下目前咱们已知的 3.1面向过程:处理事情以过程为核心,一步一步的实现。

3.2面向对象:万物皆对象

3.3链式编程思想:是将多个操作(多行代码)通过点号(.)链接在一起成为一句代码,使代码可读性好。a(1).b(2).c(3)

  • 链式编程特点方法的返回值是block,block必须有返回值(本身对象),block参数(需要操作的值)

  • 代表:masonry框架。

  • 模仿masonry,写一个加法计算器,练习链式编程思想。


Snip20150925_2.png
Snip20151225_4.png
Snip20150925_1.png
Snip20151225_5.png
Paste_Image.png


3.4响应式编程思想:不需要考虑调用顺序,只需要知道考虑结果,类似于蝴蝶效应,产生一个事件,会影响很多东西,这些事件像流一样的传播出去,然后影响结果,借用面向对象的一句话,万物皆是流。

  • 代表:KVO运用。

3.5函数式编程思想:是把操作尽量写成一系列嵌套的函数或者方法调用

    函数式编程特点:每个方法必须有返回值(本身对象),把函数或者Block当做参数,block参数(需要操作的值)block返回值(操作结果)

  • 代表:ReactiveCocoa。

  • 函数式编程实现,写一个加法计算器,并且加法计算器自带判断是否等于某个值.

Paste_Image.png
Paste_Image.png

4.ReactiveCocoa编程思想

ReactiveCocoa结合了几种编程风格:

函数式编程(Functional Programming)

响应式编程(Reactive Programming)

所以,你可能听说过ReactiveCocoa被描述为函数响应式编程(FRP)框架。

以后使用RAC解决问题,就不需要考虑调用顺序,直接考虑结果,把每一次操作都写成一系列嵌套的方法中,使代码高聚合,方便管理。

5.如何导入ReactiveCocoa框架

通常都会使用CocoaPods(用于管理第三方框架的插件)帮助我们导入。

PS:CocoaPods教程

注意:

Snip20150926_2.png
Snip20150926_3.png

6.ReactiveCocoa常见类。

学习框架首要之处:个人认为先要搞清楚框架中常用的类,在RAC中最核心的类RACSiganl,搞定这个类就能用ReactiveCocoa开发了。

6.1RACSiganl:信号类,一般表示将来有数据传递,只要有数据改变,信号内部接收到数据,就会马上发出数据。

  • 信号类(RACSiganl),只是表示当数据改变时,信号内部会发出数据,它本身不具备发送信号的能力,而是交给内部一个订阅者去发出。

  • 一个信号都是冷信号,也就是值改变了,也不会触发,只有订阅了这个信号,这个信号才会变为热信号,值改变了才会触发。

  • 如何订阅信号:调用信号RACSignal的subscribeNext就能订阅

  • RACSiganl简单使用:

  • // RACSignal使用步骤:
        // 1.创建信号 + (RACSignal *)createSignal:(RACdisposable * (^)(id<RACSubscriber> subscriber))didSubscribe
        // 2.订阅信号,才会激活信号. - (RACdisposable *)subscribeNext:(void (^)(id x))nextBlock
        // 3.发送信号 - (void)sendNext:(id)value
    
    
        // RACSignal底层实现:
        // 1.创建信号,首先把didSubscribe保存到信号中,还不会触发。
        // 2.当信号被订阅,也就是调用signal的subscribeNext:nextBlock
        // 2.2 subscribeNext内部会创建订阅者subscriber,并且把nextBlock保存到subscriber中。
        // 2.1 subscribeNext内部会调用siganl的didSubscribe
        // 3.siganl的didSubscribe中调用[subscriber sendNext:@1];
        // 3.1 sendNext底层其实就是执行subscriber的nextBlock
    
        // 1.创建信号
        RACSignal *siganl = [RACSignal createSignal:^RACdisposable *(id<RACSubscriber> subscriber) {
    
            // block调用时刻:每当有订阅订阅信号,就会调用block。
    
            // 2.发送信号
            [subscriber sendNext:@1];
    
            // 如果不在发送数据,最好发送信号完成,内部会自动调用[RACdisposable disposable]取消订阅信号。
            [subscriber sendCompleted];
    
            return [RACdisposable disposableWithBlock:^{
    
                // block调用时刻:当信号发送完成或者发送错误,就会自动执行这个block,取消订阅信号。
    
                // 执行完Block后,当前信号就不在被订阅了。
    
                NSLog(@"信号被销毁");
    
            }];
        }];
    
        // 3.订阅信号,才会激活信号.
        [siganl subscribeNext:^(id x) {
            // block调用时刻:每当有信号发出数据,就会调用block.
            NSLog(@"接收到数据:%@",x);
        }];

    6.2RACSubscriber:表示订阅者的意思,用于发送信号,这是一个协议,不是一个类,只要遵守这个协议,并且实现方法才能成为订阅者。通过create创建的信号,都有一个订阅者,帮助他发送数据。

    6.3RACdisposable:用于取消订阅或者清理资源,当信号发送完成或者发送错误的时候,就会自动触发它。

    6.4RACSubject:RACSubject:信号提供者,自己可以充当信号,又能发送信号。

    RACReplaySubject:重复提供信号类,RACSubject的子类。

    // RACSubject使用步骤
        // 1.创建信号 [RACSubject subject],跟RACSiganl不一样,创建信号时没有block。
        // 2.订阅信号 - (RACdisposable *)subscribeNext:(void (^)(id x))nextBlock
        // 3.发送信号 sendNext:(id)value
    
        // RACSubject:底层实现和RACSignal不一样。
        // 1.调用subscribeNext订阅信号,只是把订阅者保存起来,并且订阅者的nextBlock已经赋值了。
        // 2.调用sendNext发送信号,遍历刚刚保存的所有订阅者,一个一个调用订阅者的nextBlock。
    
        // 1.创建信号
        RACSubject *subject = [RACSubject subject];
    
        // 2.订阅信号
        [subject subscribeNext:^(id x) {
            // block调用时刻:当信号发出新值,就会调用.
            NSLog(@"第一个订阅者%@",x);
        }];
        [subject subscribeNext:^(@"第二个订阅者%@",x);
        }];
    
        // 3.发送信号
        [subject sendNext:@"1"];
    
    
        // RACReplaySubject使用步骤:
        // 2.可以先订阅信号,也可以先发送信号。
        // 2.1 订阅信号 - (RACdisposable *)subscribeNext:(void (^)(id x))nextBlock
        // 2.2 发送信号 sendNext:(id)value
    
        // RACReplaySubject:底层实现和RACSubject不一样。
        // 1.调用sendNext发送信号,把值保存起来,然后遍历刚刚保存的所有订阅者,一个一个调用订阅者的nextBlock。
        // 2.调用subscribeNext订阅信号,遍历保存的所有值,一个一个调用订阅者的nextBlock
    
        // 如果想当一个信号被订阅,就重复播放之前所有值,需要先发送信号,在订阅信号。
        // 也就是先保存值,在订阅值。
    
        // 1.创建信号
        RACReplaySubject *replaySubject = [RACReplaySubject subject];
    
        // 2.发送信号
        [replaySubject sendNext:@1];
        [replaySubject sendNext:@2];
    
        // 3.订阅信号
        [replaySubject subscribeNext:^(id x) {
    
            @"第一个订阅者接收到的数据%@",161)">// 订阅信号
        [replaySubject subscribeNext:^(@"第二个订阅者接收到的数据%@",x);
        }];
    // 需求:
        // 1.给当前控制器添加一个按钮,modal到另一个控制器界面
        // 2.另一个控制器view中有个按钮,点击按钮,通知当前控制器
    
    步骤一:在第二个控制器.h,添加一个RACSubject代替代理。
    @interface TwoViewController : UIViewController
    
    @property (nonatomic,strong) RACSubject *delegateSignal;
    
    @end
    
    步骤二:监听第二个控制器按钮点击
    @implementation TwoViewController
    - (IBAction)notice:(id)sender {
        // 通知一个控制器,告诉它,按钮被点了
    
         // 通知代理
         // 判断代理信号是否有值
        if (self.delegateSignal) {
            // 有值,才需要通知
            [self.delegateSignal sendNext:nil];
        }
    }
    @end
    
    步骤三:在第一个控制器中,监听跳转按钮,给第二个控制器的代理信号赋值,并且监听.
    OneViewController 
    - (IBAction)btnClick:(id)sender {
    
        // 创建第二个控制器
        TwoViewController *twoVc = [[TwoViewController alloc] init];
    
        // 设置代理信号
        twoVc.delegateSignal = [RACSubject subject];
    
        // 订阅代理信号
        [twoVc.delegateSignal subscribeNext:^(@"点击了通知按钮");
        }];
    
        // 跳转到第二个控制器
        [self presentViewController:twoVc animated:YES completion:nil];
    
    }
    @end

    6.6RACTuple:元组类,类似NSArray,用来包装值.

    6.7RACSequence:RAC中的集合类,用于代替NSArray,NSDictionary,可以使用它来快速遍历数组和字典。

    使用场景:1.字典转模型

    RACSequence和RACTuple简单使用

    // 1.遍历数组
        NSArray *numbers = @[@1,@2,152)">3,152)">4];
    
        // 这里其实是三步
        // 第一步: 把数组转换成集合RACSequence numbers.rac_sequence
        // 第二步: 把集合RACSequence转换RACSignal信号类,numbers.rac_sequence.signal
        // 第三步: 订阅信号,激活信号,会自动把集合中的所有值,遍历出来。
        [numbers.rac_sequence.signal subscribeNext:^(@"%@",x);
        }];
    
    
        // 2.遍历字典,遍历出来的键值对会包装成RACTuple(元组对象)
        NSDictionary *dict = @{@"name":@"xmg",@"age":@18};
        [dict.rac_sequence.signal subscribeNext:^(RACTuple *x) {
    
            // 解包元组,会把元组的值,按顺序给参数里面的变量赋值
            RACTupleUnpack(Nsstring *key,Nsstring *value) = x;
    
            // 相当于以下写法
    // Nsstring *key = x[0];
    // Nsstring *value = x[1];
    
            @"%@ %@",key,value);
    
        }];
    
    
        // 3.字典转模型
        // 3.1 OC写法
        Nsstring *filePath = [[NSBundle mainBundle] pathForResource:@"flags.plist" ofType:nil];
    
        NSArray *dictArr = [NSArray arrayWithContentsOfFile:filePath];
    
        NSMutableArray *items = [NSMutableArray array];
    
        for (NSDictionary *dict in dictArr) {
            FlagItem *item = [FlagItem flagWithDict:dict];
            [items addobject:item];
        }
    
        // 3.2 RAC写法
        NSMutableArray *flags = [NSMutableArray array];
    
        _flags = flags;
    
        // rac_sequence注意点:调用subscribeNext,并不会马上执行nextBlock,而是会等一会。
        [dictArr.rac_sequence.signal subscribeNext:^(// 运用RAC遍历字典,x:字典
    
            FlagItem *item = [FlagItem flagWithDict:x];
    
            [flags addobject:item];
    
        }];
    
        NsstringFromCGRect([UIScreen mainScreen].bounds));
    
    
        // 3.3 RAC高级写法:
        NSArray arrayWithContentsOfFile:filePath];
        // map:映射的意思,目的:把原始值value映射成一个新值
        // array: 把集合转换成数组
        // 底层实现:当信号被订阅,会遍历集合中的原始值,映射成新值,并且保存到新的数组里。
        NSArray *flags = [[dictArr.rac_sequence map:^id(id value) {
    
            return [FlagItem flagWithDict:value];
    
        }] array];

    6.8RACCommand:RAC中用于处理事件的类,可以把事件如何处理,事件中的数据如何传递,包装到这个类中,他可以很方便的监控事件的执行过程。

    使用场景:监听按钮点击,网络请求

    RACCommand简单使用

    // 一、RACCommand使用步骤:
        // 1.创建命令 initWithSignalBlock:(RACSignal * (^)(id input))signalBlock
        // 2.在signalBlock中,创建RACSignal,并且作为signalBlock的返回值
        // 3.执行命令 - (RACSignal *)execute:(id)input
    
        // 二、RACCommand使用注意:
        // 1.signalBlock必须要返回一个信号,不能传nil.
        // 2.如果不想要传递信号,直接创建空的信号[RACSignal empty];
        // 3.RACCommand中信号如果数据传递完,必须调用[subscriber sendCompleted],这时命令才会执行完毕,否则永远处于执行中。
        // 4.RACCommand需要被强引用,否则接收不到RACCommand中的信号,因此RACCommand中的信号是延迟发送的。
    
        // 三、RACCommand设计思想:内部signalBlock为什么要返回一个信号,这个信号有什么用。
        // 1.在RAC开发中,通常会把网络请求封装到RACCommand,直接执行某个RACCommand就能发送请求。
        // 2.当RACCommand内部请求到数据的时候,需要把请求的数据传递给外界,这时候就需要通过signalBlock返回的信号传递了。
    
        // 四、如何拿到RACCommand中返回信号发出的数据。
        // 1.RACCommand有个执行信号源executionSignals,这个是signal of signals(信号的信号),意思是信号发出的数据是信号,不是普通的类型。
        // 2.订阅executionSignals就能拿到RACCommand中返回的信号,然后订阅signalBlock返回的信号,就能获取发出的值。
    
        // 五、监听当前命令是否正在执行executing
    
        // 六、使用场景,监听按钮点击,网络请求
    
    
        // 1.创建命令
        RACCommand *command = [[RACCommand alloc] initWithSignalBlock:^RACSignal *(id input) {
    
    
            @"执行命令");
    
            // 创建空信号,必须返回信号
            // return [RACSignal empty];
    
            // 2.创建信号,用来传递数据
            return [RACSignal createSignal:^RACdisposable *(id<RACSubscriber> subscriber) {
    
                [subscriber sendNext:@"请求数据"];
    
                // 注意:数据传递完,最好调用sendCompleted,这时命令才执行完毕。
                [subscriber sendCompleted];
    
                return nil;
            }];
    
        }];
    
        // 强引用命令,不要被销毁,否则接收不到数据
        _conmmand = command;
    
    
    
        // 3.订阅RACCommand中的信号
        [command.executionSignals subscribeNext:^(id x) {
    
            [x subscribeNext:^(id x) {
    
                // RAC高级用法
        // switchToLatest:用于signal of signals,获取signal of signals发出的最新信号,也就是可以直接拿到RACCommand中的信号
        [command.executionSignals.switchToLatest subscribeNext:^(// 4.监听命令是否执行完毕,认会来一次,可以直接跳过,skip表示跳过第一次信号。
        [[command.executing skip:1] subscribeNext:^(id x) {
    
            if ([x boolValue] == YES) {
                // 正在执行
                @"正在执行");
    
            }else{
                // 执行完成
                @"执行完成");
            }
    
        }];
       // 5.执行命令
        [self.conmmand execute:@1];

    6.9RACMulticastConnection:用于当一个信号,被多次订阅时,为了保证创建信号时,避免多次调用创建信号中的block,造成副作用,可以使用这个类处理。

    使用注意:RACMulticastConnection通过RACSignal的-publish或者-muticast:方法创建.

    RACMulticastConnection简单使用:

    // RACMulticastConnection使用步骤:
        // 2.创建连接 RACMulticastConnection *connect = [signal publish];
        订阅的不在是之前的信号,而是连接的信号。 [connect.signal subscribeNext:nextBlock]
        // 4.连接 [connect connect]
    
        // RACMulticastConnection底层原理:
        // 1.创建connect,connect.sourceSignal -> RACSignal(原始信号) connect.signal -> RACSubject
        // 2.订阅connect.signal,会调用RACSubject的subscribeNext,创建订阅者,而且把订阅者保存起来,不会执行block。
        // 3.[connect connect]内部会订阅RACSignal(原始信号),并且订阅者是RACSubject
        // 3.1.订阅原始信号,就会调用原始信号中的didSubscribe
        // 3.2 didSubscribe,拿到订阅调用sendNext,其实是调用RACSubject的sendNext
        // 4.RACSubject的sendNext,会遍历RACSubject所有订阅者发送信号。
        // 4.1 因为刚刚第二步,都是在订阅RACSubject,因此会拿到第二步所有的订阅者,调用他们的nextBlock
    
    
        // 需求:假设在一个信号中发送请求,每次订阅一次都会发送请求,这样就会导致多次请求。
        // 解决:使用RACMulticastConnection就能解决.
    
        // 1.创建请求信号
       RACSignal *signal = [RACSignal createSignal:^RACdisposable *(id<RACSubscriber> subscriber) {
    
    
            @"发送请求");
    
            return nil;
        }];
        // 2.订阅信号
        [signal subscribeNext:^(@"接收数据");
    
        }];
        @"接收数据");
    
        }];
    
        // 3.运行结果,会执行两遍发送请求,也就是每次订阅都会发送一次请求
    
    
        // RACMulticastConnection:解决重复请求问题
        // 1.创建信号
        RACSignal *signal = [RACSignal createSignal:^RACdisposable *(@"发送请求");
            [subscriber sendNext:@1];
    
            return nil;
        }];
    
        // 2.创建连接
        RACMulticastConnection *connect = [signal publish];
    
        // 3.订阅信号,
        // 注意:订阅信号,也不能激活信号,只是保存订阅者到数组,必须通过连接,当调用连接,就会一次性调用所有订阅者的sendNext:
        [connect.signal subscribeNext:^(@"订阅者一信号");
    
        }];
    
        [connect.signal subscribeNext:^(@"订阅者二信号");
    
        }];
    
        // 4.连接,激活信号
        [connect connect];

    6.10RACScheduler:RAC中的队列,用GCD封装的。

    6.11RACUnit:表⽰stream不包含有意义的值,也就是看到这个,可以直接理解为nil.

    6.12RACEvent: 把数据包装成信号事件(signal event)。它主要通过RACSignal的-materialize来使用,然并卵。

    7.ReactiveCocoa开发中常见用法

    7.1 代替代理:

    7.2 代替KVO :

    7.3 监听事件:

    7.4 代替通知:

    7.5 监听文本框文字改变:

    7.6 处理当界面有多次请求时,需要都获取到数据时,才能展示界面

    7.7 代码演示

    // 1.代替代理
        // 需求:自定义redView,监听红色view中按钮点击
        // 之前都是需要通过代理监听,给红色View添加一个代理属性,点击按钮的时候,通知代理做事情
        // rac_signalForSelector:把调用某个对象的方法的信息转换成信号,就要调用这个方法,就会发送信号。
        // 这里表示只要redV调用btnClick:,就会发出信号,订阅就好了。
        [[redV rac_signalForSelector:@selector(btnClick:)] subscribeNext:^(id x) {
            @"点击红色按钮");
        }];
    
        // 2.KVO
        // 把监听redV的center属性改变转换成信号,只要值改变就会发送信号
        // observer:可以传入nil
        [[redV rac_valuesAndChangesForKeyPath:@"center" options:NSkeyvalueObservingOptionNew observer:nil] subscribeNext:^(// 3.监听事件
        // 把按钮点击事件转换为信号,点击按钮,就会发送信号
        [[self.btn rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(@"按钮被点击了");
        }];
    
        // 4.代替通知
        // 把监听到的通知转换信号
        [[[NSNotificationCenter defaultCenter] rac_addobserverForName:UIKeyboardWillShowNotification object:nil] subscribeNext:^(@"键盘弹出");
        }];
    
        // 5.监听文本框的文字改变
       [_textField.rac_textSignal subscribeNext:^(id x) {
    
           @"文字改变了%@",x);
       }];
    
       // 6.处理多个请求,都返回结果的时候,统一做处理.
        RACSignal *request1 = [RACSignal createSignal:^RACdisposable *(id<RACSubscriber> subscriber) {
    
            // 发送请求1
            [subscriber sendNext:@"发送请求1"];
            return nil;
        }];
    
        RACSignal *request2 = [RACSignal createSignal:^RACdisposable *(id<RACSubscriber> subscriber) {
            // 发送请求2
            [subscriber sendNext:@"发送请求2"];
            // 使用注意:几个信号,参数一的方法就几个参数,每个参数对应信号发出的数据。
        [self rac_liftSelector:@selector(updateUIWithR1:r2:) withSignalsFromArray:@[request1,request2]];
    
    
    }
    // 更新UI
    - (void)updateUIWithR1:(id)data r2:(id)data1
    {
        @"更新UI%@ %@",data,data1);
    }

    8.ReactiveCocoa常见宏。

    8.1RAC(TARGET,[KEYPATH,[NIL_VALUE]]):用于给某个对象的某个属性绑定。

    // 只要文本框文字改变,就会修改label文字     RAC(self.labelView,text) = _textField.rac_textSignal;

    8.2RACObserve(self,name):监听某个对象的某个属性,返回的是信号。

    [RACObserve(self.view,center) subscribeNext:^(id x) {
    
            NSLog(@"%@",x);
        }];

    8.3@weakify(Obj)和@strongify(Obj),一般两个都是配套使用,在主头文件(ReactiveCocoa.h)中并没有导入,需要自己手动导入,RACEXTScope.h才可以使用。但是每次导入都非常麻烦,只需要在主头文件自己导入就好了。

    8.4RACTuplePack:把数据包装成RACTuple(元组类)

    // 把参数中的数据包装成元组
        RACTuple *tuple = RACTuplePack(@10,152)">20);

    8.5RACTupleUnpack:把RACTuple(元组类)解包成对应的数据。

    // 把参数中的数据包装成元组
        RACTuple *tuple = RACTuplePack(20);
    
        // 解包元组,会把元组的值,按顺序给参数里面的变量赋值
        // name = @"xmg" age = @20
        RACTupleUnpack(Nsstring *name,210)">NSNumber *age) = tuple;

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐


    react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
    我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
    我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
    react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
    mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
    我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
    本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
    上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
    上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
    我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
    在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
    楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
    我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
    前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
    我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
    上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
    开源不易,感谢你的支持,❤ star me if you like concent ^_^
    hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
    本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
    ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom