034_尚硅谷react教程_受控组件

好了，各位说完了非受控组件之后呢，我们再说说受控组件，我能猜得到啊，有一些小伙伴呢，可能到现在呢，说老师我有点似懂非懂，你刚才说的那个点呢，我能get到，就是点击登录，然后就会触发表单的on submit，然后就来到了这个回调里边，然后发现呢，我要读取那两个input框的数据，我就先获取这两个节点，然后再节点点value，节点点value，说老师你管这种形式呢叫现用现取，但是我怎么总觉得老师现用现取是一个再正常不过的逻辑呢，我需要的时候我把你叫出来，然后你把你的点value值给我，这多正常呀，那按照你这么说始终理解不好，那受控组件得怎么写呢？别急嘛，接下来我们就要写了，好吧，同学，一会儿我写完受控，我再把非受控也摆在你面前，你一下子就懂了，哎，所以说慢慢来，别急，在这基础上CTRLCCTRLV，右键改个名。二把非字删掉，叫受控组件好来吧，既然是受控组件了，那不能现用现取了，所以说这ref也就没有必要给它再打在这儿了，那这也不需要再打这个ref了，那你这就不能再这么取了呀，那你这也就不能再这么提示了呀。

那说老师那现在这个案例，那这个案例就没有任何的效果，嗯，那你看吧，输入123用户名密码456，点击登录也不会触发表单提交的跳转，也不会提示任何的数据，对吗？那接下来咱们就看看这个受控组件，它到底是受到了谁的控制呢？同学，原声里边有一个事件，我不知道你还记不记得了，叫做CH，哎，输入类的盗目都可以绑定这个onch change，你比如说一个勾选的，哎，这么一个勾选框由未勾选变成勾选，是不是一种改变呢？你只要改变我就调on change所指定的回调。哎，如果说这是一个input框，原来没有值，那刚刚呢，你输入了一个值，它由空变成你刚才输入了一个一，是不是一种改变呢？那只要改变了就调on change所指定的回调原声里边，哎，它也有这个on change，那react里边，而这C我是不是得大写呀？啊来等于随便写一个吧，比如说this.demo那你不能光说呀，你得有这个DEMO对不对啊，回车我在这儿呢，也敲个回车，复制语句加箭头函数的形式，我在这儿呢，Comelo输出一个艾符，那也就意味着接下来你在输入用户名的时候，你输入一点，那用户名就算一次改变，只要一改变它就输出这个对吗？我们看看是不是这效果呢？打开控制台。

好了，刷新输入123，输入456，你注意刚才我在输入123的时候，同学是不是它输出艾特符了，你注意看啊，由没有东西变成一一种改变，你只要改变我就输出艾特符，你再输入就还是改变，随着你的输入，同学你输入了1234567，它就调用了七次，对吗？啊来我们把这改一下啊同学这还叫做非受控的不太合适了，嗯，咱把它改一下，这呢把非字给它删掉，叫受控组件是二，好回头那改了是吧？哎，所以说同学你看随着你的输入啊，这东西好像哎就不断的被调用，那我能不能随着输入就拿到值呢？其实是可以的。

同学分析一波，给谁绑定的on change啊，Input想拿到谁的值啊input诶那你就可以直接借助咱们之前的写法了，就是点它给它点value对吗？写着点它给它点value，注意观察啊回到这，我输入一，它就一，我输入一，二就12123，诶同学发现随着你的输入，我能够实时的拿到一个最新的值对吗？说老师那你拿到之后你怎么办呀，我放在状态里，哎，状态还记得吗？

啊，放在状态里，那所以说我可以这么做，this.set state，我把谁存在状态里啊，是不是用户名啊，所以说是username，那username的值是多少啊，E点它给它点value是不是写在这啊。OK，那这个时候就有意思了，随着你的输入你的用户名就维护到了状态里，我把这行呢先注掉，那回到案例当中，我怎么知道他有没有维护到状态里呢？别忘了呀，开发者工具对吗？打开，那么点击你的login组件往这儿看，同学，诶，它咋没有初始化的状态呢？因为你没有进行状态的初始化，说老师，那我输入一下我试试吧，你输入一个一，这个时候你注意观察，诶，State状态是不是出来了，Username里边存的是不是一啊同学，你这么写就违背了一个小原则。你说你的状态里边以后是不是非诚肯定的说得存储这个用户名吧，那你说最好就得让用户名怎么办，初始化一下，也就是说你尽量不要这样做，状态连初始化都没有进行，然后就直接往里边放东西，不太好啊，违背了它的原则，那所以说最好呢，咱们写一下来state，这得干嘛呢？初始化状态，状态里以后都存什么呀，是不是内幕啊，有的内幕那是空吧，还有什么呢？是不是密码啊，那初始值也让它是空，所以说我们管这一步叫什么来着，叫初始化状态，哎，你就想好以后你要把什么东西存进去，那写好注释，这是什么呢？用户名啊，那再走，这叫什么呢？密码，好，那同学来吧，这个无用的输出我们给它删掉，这函数叫DEMO不太好吧，那你说叫什么呢？你这DEMO完成了什么功能呢？是不是把用户名存到了状态里啊，所以说我就叫这。

这个名字喽，C username，当然了，小驼峰命名U是不是得大写呀？OK，哎，C username。

啊，那你说同理，同学你可以给密码再绑定一个onchang事件，这回呢，不叫做username了，叫password，把它复制往这一粘，P呢，给它改成大写的，那你不能光说呀，你得去做呀，首先你得把这个改成save username，那在这儿呢，再来一套，那这写上叫做save什么呢？Password也拿event吧，也set state吧，只也是event，点他给他点value吧，那只不过呢，同学你这儿呢，不能再存用户名了，而是password，诶，好，那这块写好注释，这叫做保存用户名到状态中，那当然这个也是同理的保存。密码到状态中，嗯，那这是表单提交的回调，来给它写，好好，同学们，你说你这么写啊就好了，你回头看啊，一上来呢，用户名和密码呢，都是空的，随着你的输入123，随着你的输入456，东西是不是就都存进去了，当然了，我说了这块儿的最新版这个开发者工具啊，可能有点小慢啊，你等一下它就可以，同学，那你说是不是随着我的输入就把我所输入的值已经提前拿好了，而且存到哪了呢？状态里边，那你说等你回头去提示信息的时候，你告诉我这username和password得从哪取啊，自身肯定是没有了，你得点state对吗？同学，那我想问你this.state你拿到了username吧，你拿到了password吧，你拿到的是什么呀？你拿到这两个是什么呀？是节点呀，还是说真正的值啊，是不是真正的值啊。

那所以说你在弹窗的时候，同学你觉不觉得就别点Y6了呀，你要再点Y6可就不行喽，你看着123456值都已经存进去了，你还要再拿123的点VALUE6，那弹的都是安find的，所以说同学你怎么取决定你放在哪儿了，取出来的东西是什么决定你怎么放的？

是吧？哎，取决于你怎么放的，应该这么说是吧？哎，好了点，Battle呢得删掉，那这呢也得给它删掉，所以说同学对于ref的这三种写法，以及state里边的这个东西如何取，取出来的是什么，你必须特别清晰啊，那这回呢，我们再试一下，呃，来到这儿刷新一下啊，走123，然后输入456，点击登录，OK，看用户名123密码456OK了没？同学像这种就属于受控组件，怎么就受控了呀？受到谁的控制了呀？一句话总结受控组件页面中所有输入类的倒目，你比如说input的框就是一种输入类的道目，这种输入类的盗目随着你的输入，人家就能把东西维护到状态里边去，等需要用的时候直接从状态里边取出来，这就是属于受控组件。其实如果你之前接触过view的小伙伴，你这马上就想到了一个东西，老师。

这不就是view里的双向数据绑定吗？那react里边没有实现双向的绑定啊，那所以说呢，在这你得自己用on change去写啊，那如果说没有接触过view的小伙伴呢，也不用想那么多，你就简单记，现用现取就是非受控啊，随着你的输入维护状态就是受控，老师，那以后我咋写呢？我是写非受控啊还是写受控啊，如果非得让他俩一决高下呢？其实还是建议大家呀，写受控式组件，为什么呢？同学发没发现受控式组件里边我一个ref都没有。而非受控组件里边你有几个输入项，你就得写几个ref，对吧？说老师那就写呗，我多写点ref能怎么的呢？还记不记得react的官网里边说过一句话，找到高级指引，找到ris与盗墓，一上来人就告诉过你这个事儿，请勿过度使用ref。

你别觉得说，哎，我就一直在用ref，我遇到一个输入框，我就写一个也没什么问题，其实写多了呢，还是有一些效率上的问题啊，既然官网已经明确说了过度使用，那需要你做的就是能够不写的时候呢，你尽量就给他不写，说老师我就写，也不会引发什么太大的问题，OK，所以说受控组件的优势就在于能够省略掉ref是吧？好，那这一小节呢，我们停一下。