00:01
嗯,下面呢,我们来去实现哪个呢,实现我们的这个。我们这里面会有图形图表,有用到一下的三三个图形柱状图啊,折线图以及什么呢饼图。啊,我们用的例子有几个,大家看一下。就是一里面它会有一个文档教程对吧,它教程一上来就给了我一个例子。能听到吧,就给一个例子,这里面有相关的数据,最终显示的A是这个。当然很迅速的就能变成什么呢?折线图现在是不是柱状图啊?啊,非常轻松就能变成折线图,这是一个,还有一个就是我们的一,嗯,For。这里面是不是在说我需要去写一个react这样一个组件标签?
01:01
传入options,传入option这个配置是不是就可以了。能听到吧,好,来,那我们准备来去写,嗯,先写的第一个找到我们的。来啊,看到没找到我们的那个组件的位置。我们是恰是组件对吧。啊,现在呢,我们先写第一个就是这个800可以吧。可以好了,来看一下最终我们要显示的啊。结构。这么慢。那这样说的话,这一个这一个我得把它把它停一下,这个没用。把它提一下,因为启动太多了,所以它稍微有点慢一点,好来了。把它放到这这边来。把它关了。
02:00
来啊,我登录一下。能不能看到啊,就是这个,那这里面看一下我们的整体整个结构啊,啊这个啊,这个这个整个结构是一个什么。是他的吧,是他的好了,那他的这是他的那个什么标题能看到吧。再一个是它的内容的区域,是它内容的区域。啊,这个这里面这里面实际上是这个是一个卡。我这个上面又写了一个头部的部分啊,里面一个标题,因为看到这里这个头部跟它底部中间有一个什么呢。横线重点我们其实是要写它吧。能听懂,不这样啊,我就不再去写外面的这些组件结构了,这写起来有点浪费时间,因为咱已经写了无数遍了,咱重点现在是先出它是吧,好,这样啊。
03:04
我把这个拿过来,我把相关的东西呢,给它删除掉啊,我把相关东西给它删除掉。好哪些东西呢?啊,我要把这个。这个就删掉啊好。那现在呢,现在我们来看一下啊,看一下我们现在啊,要去做的事情是要在这个里面啊是不是去。显示一个图形图表,柱状图,是不是需要用到一个组件叫什么?是不是他,所以我是不是需要通过他来引入。这能听懂吧,啊,上面也来看有个更新啊,这个是它有一个标题。啊,它是隔开的好,那下面呢,再来一个这个。挪过来了吧,挪过来是不是要显显示我的这个图形图表对不对,那关键是关键靠谁,是不是靠这个有一个方法来专门去提供风险。
04:10
Options啊,那我现在应该怎么做?定义一个方法来,去给他返回那个整个配置对象就能听懂,这是用来去返回我图形的配对象,返回我的柱状图,记住我们现在是改什么。柱状图的配配线要返回,这个也不用你自己写。来,那我去找得找一个例子来去说啊对不对,来瑞特多少呢,看一下。来在一他的那个。教材里面一上来是不是有这样一个例子?那我需要干嘛呢?把它。
05:00
他应该是个对象嘛,我看刚才我是只是复制了属性。这什么呢?好,来看到来这个时候我们先来看一下,看看是个什么效果,再来分析它是个什么情况,是不是来。这个这个应该是我们的吧。能不能看到,是不是很轻松就能实现一个形状图啊,而且它开始检测的时候是一个动画的过程,大家注意观察一下。能看到吧,啊这样啊,这个其实在说一个什么事,再说一个我们一些商品的一个什么。销量的一个问题看到了吧,啊,一个销量的一个统计的一个图表,对不对啊,放在上面就能看到我的衬衫卖了多少件了。舞剑。能看到吧,好,而这些所有相关的都是通过各种各样的配置来实现的吧,那你说老师我咋知道这个配置用来干嘛呢?
06:03
这单词我有些不认识啊,那咋办呢?文档。来注意观察,这里面有API,这是提供了一些语法,接着它的关键不是API,是这里面的什么呢?配置项N多,这个这个文档设计很好。因为它的配置呢,是从外层往里层发展的,听懂不,它是先把外层的配置选项名称先列出来,就告诉你指是什么类型,就是打开就能看到内部的属性怎么配。有人说我的个天哪,你这配这个抬头这么多,让我学到猴年马月去。你需要什么就看什么,是不是。而且我可以说你要实现一些基本的效果,需要去把所有的配置都用上吗?不需要。而且你一般是会找到相应的类似的例子来在技术上去改。
07:00
能懂不?那这个时候我们就形成了一个。啊,柱状图。这个通道里面,这是上面的那个什么。那个标题啊,有的应该是有的,说实话你不看,可能比如说这个你不看文档,你可能看不太懂,但这个没关系啊。你看不懂的话,你是不是马上可以去过去看他的说明了。这能听懂吧,因为有的名字还不是个母姓名之意是不是,那比如说这个你大概应该知道他在说什么事情,你看他决定了我们这一边是不是有一个销量的演示,去显示销量相关的一个数据。对不,而销量对应的数据哪来的呢?看到这里。这个就是所有要显示数据的一个速度。啊,它一次可以显示多少,你看啊,我现在显示的跟这个不太一样,我来改造一下,你看它一共显示了几套啊。
08:01
几个徒弟。它是两个图例组成的,听到不这个一个叫一个图例,可以把某个隐藏。还是挺酷的是不是啊,那我怎么整出两个库呢?一个销量一个库存怎么办呢?那非常简单,再加一个。啊,再加一个整个什么呢?库存是吧,那这个地方是不是对应一个销量相关的数据,它是不是显示的是个八呀来。那再搞一个,你说这个对应什么,不能随便瞎写,应该是对应的名字库存这个也当前显示800,那这个数据一定是这几个数据吗?不就是那这样就说了,来,我把这个数据是不是可以改改啊,随便改一下啊,有变大的有有变小的都行。嗯,二十六二十五吧,接着20。嗯,接着15,嗯接着十可以吧,有没有看到,那这样的话就应该能显示两个。
09:09
So easy。对吧,啊。好,还有一个事情啊,还有一个事情啊,我这里面呢,首先一步一个一个强调了啊,还有一个是。那我现在要做一个更新,也就是说我想卖出去,一卖出去那个产品,那库存是不是减小。那个销量是不是增加。我每次呢,可以增加一个一,这个减少一个一可以吧,那这个怎么做呢?这时候就要说这个数据应该是我的什么状态数据。是不是这意思来把这个数据放在我们的什么state里面来,听懂了不?能听懂吧,一个是销量。哎,比如说这个应该销量,销量这个。销量数据这个又是什么名字?
10:02
就是说CL主席吗,各位。可以吧,那库存呢?啊多可以吗?可以吗?可以啊,差不多能懂这意思,而且你可以稍微呃写点注释,是不是就可以很明确了,对不对,比如说这个是所有销量的数字,对吧,这能听懂吧?啊而下面这个是不库存的速度。这能懂不能懂,那这样就要说我们这一边,我们这边是不是读取这两个数据进行显示,从哪个里面读,状态里面读,那读出来是就这两个呗。啊,还有一个store。
11:01
能不听懂,那接着我这个显示的时候大家注意诶。就是这还有这是好像深圳办的一个同学。就是他今天在哪工作,呃,现在没办法跟他聊啊。好,来说一下。看一下,看一下我们这一边,我这里面,我这里面是不是要去获取那个光弦子,是不是要根据我的这个去获取啊。那所以说我的这个应该怎么做的呢,应该是。很残是吧?这里面接收什么参数,接着呢。再一个是sales。对吧,这个是不是多。能听到吧,能听到那这样的话啊,这话大家看一下。好了,我们接着,我们一旦去on click。
12:03
我们就要去干嘛去是不是更新数据。更新状态数据吧,就这了吧,啊更新状态数据好,那这个怎么更新呢?啊这个怎么更新来说一下。啊,我们准备啊,把这些把这个里面数据每个都加一可以吧,把这个里面数据每个都是什么去减一,OK不OK,那这个时候应该用什么语法。啊,应该啊,应该是用对象语法还是用函数语法。这里面不可以传对象或者传函数吗?用什么语法?函数为什么用函数?因为我基于原来数据,在原来数据基础上进行改变,是不是这能听懂吗?哪一个啊,State箭头是不返回一个对象,我们要改的是不是两个属性。
13:07
啊,一个是它,我先写一个啊,再一个是它对不对,好了,那这个时候就要说了,我的这个数据怎么个改法呀,是不是要去在原来计算生成一个新的数组,然后这个值。每个月增加一。这个怎么做啊?A state sales。接着了。用reduce吗?不行,是统计一个结果。啊,Reduce也行,其实reduce也行,你统计一个结果可以产生一个新数度嘛,其实也是可以,对不对,Ma可以,Ma是可以的,我们简单点用map啊,就是也是可以的啊来现在说一下,那每一个是不都是一个笑对吧。那返回的什么呢?是cell什么加一。听懂了吧?来,我们用一下这60,看怎么用。
14:05
叫什么可用的的话来看一下,还真不好整的话。因为陪着啊,来试一下,试一下初始的只应该是个数主吧的吧,初应该接着说数字没方东西好来试试啊,每一个都是一个啊,每一个都是一个十度。嗯,只是这么写起来稍微费劲一点。啊,最终我们肯定要把pre返回对不对,但是在返回之前需要往里面push一个数据对不对,Push的数据是在原有的数据的计算什么减一。Ma是不是稍微简单一些,比如说那这样说的话,那以后就ma再也不用用是当前场景ma简单。
15:04
能听懂吧,好,没问题啊。来我们来看一下啊,最后啊,最后我们就需要来看一下,因为我现在已经更新状态了,那我这个是不是会重新渲染了。来试一试。乖啊,点一下。可不可以?可以了吧,可以的,这样就能看的出来,当然我们没有去限制它的这个数量是不为零是不是。能听懂不啊,这个我们主要是要是这个事情啊,是可以做更新的吧。能不能看到。来啊。这个说实话。相对于这个效果,我们写的代码已经很少了。是这意思吧,你要不说要做一个交互了,你就自己画一个这个界面,你怎怎么着写个几百行代码。
16:00
啊,你关键你画不了这么漂亮,主要是啊好这是这个啊。
我来说两句