055_尚硅谷_react教程_组件化编码流程

好了各位啊，脚手架里这些文件呢，怎么玩咱们也知道了啊，这插件呢，咱也安装完了，那接下来呢，咱得写点案例了，对吧？那写案例之前啊，同学我有两种做法，第一种就是把src里的东西全都右键删除好了，同学啊，刚才那讲完了这堆东西老师删了，那等你最后学完了之后你发现。我所剩下的代码啊，就是最后一个案例的代码，我想把每一个案例的代码都留下来，所以说接下来呢，我这样做，同学，Public里的东西吧，它都是固定的，偏爱图标咋的，写一个案例换一个不用吧，Index atml里的东西你觉不觉得也是固定的呀，我这只要准备好一个容器就行了吧，所以说呀，同学们，Public里的东西呢，我不在这个复制一份了，Public就这样，我把src呢，我给你复制一份，你看刚才我写了一个零一脚手架自带文件，那么接下来我把src呢复制一份，然后给它改名叫零二_src_hello_react我这么写啥意思，大家得会看啊，你比如说零一脚手架自带文件，我就编了个号，脚手架自带，你打开这个，里边有脚手架自带的public和src，对吗？但是你看二这个文件夹啊，我明确的说了叫02S RC hello react，那就证明。

名这个里边放的东西都是我在写hello react的那个案例的时候，Src文件夹里的东西，那如果说接下来我在写别的，那这些东西我可就都要删了，就从这到这儿白白喽，都删掉了，然后我再重新写好吧，写一个给大家存一个，你比如说同学，我现在这个里边写了乱七八糟的很多东西啊，但等你回头学这个react的时候，老师我就想运行一下你那个s rrc hello react，那怎么办呀，你可以这样，你把现在的src啊，给它改个名叫做SRC00000，然后你把这个名字给它重新改回src，因为脚手架不找SRC00000，它只找src，好了，是不是改回来了，改回来之后呢，你再重新执行n PM start，你就能运行现在src里边这些组件啊，所产生的那些效果了啊，你打开稍等。

等会他编译一下，哎，你看效果是不是出来了，哎，那等你看完了呢，你可以把它的名字呢，再给他改回去啊，这样做只有一个目的，想把每一个案例的代码都给大家留下，好吧，诶粘过来还叫零二，但是有的时候你发现它不让你改，为什么呢？因为你这边启动着呢，你正在用这个文件，它不让你改，就说你停掉，你看一下子就改过来了，OK，好了，那这呢也别叫SRC00000了，嗯，那给这个呢，给它删掉，好说老师，那接下来这里边咱写什么呢？同学，不管你写什么案例，有几个人好像必须要有的，对吗？首先第一个有个文件夹叫做components，对吧，组件什么的都往这里放，那还得建立一个文件叫做app.js，你叫JS叉也行啊，那就JS叉，那当然不是文件啊。

啊，不是文件夹啊，是文件点JS叉好了，那还得有一个入口文件是吧？哎，index.js来吧，同学，我最后呢，给大家写一遍这个index.js以后这个index.js呢，我就不一遍一遍的写了啊，再来一遍啊走，引入react核心库，其实再写一遍的目的啊，就是说希望大家把这东西呢给它记住好吧，引入react from，从react这个库里边还得引入，诶，改过来啊，引入react DOM import react DOM fromm react DOM还得引用谁呢？Import APP当前路径下的app.js叉可以不写，直接省略最后一步渲染。

的do render APP did不叫test了，叫root是吧，这就是入口文件的固定写法啊，当然了，后期我们讲到一些别的技术呢，可能在这里边做出一些微微的改动啊，微微的改动关掉，那么APP毕竟是个组件吧，来快速的用咱刚才那个代码模板rcc走你叫APP这儿了，哎，就写一个APP写什么我还不知道是吧？嗯，APP好写完了吧，这时我是组件里边你还不知道你写什么呢，所以说先空着OK啊来，那我重新呢，运行一下n PM start。关于运行的时候怎么停啊同学是按一下你键盘上的CTRL加C是吧？啊，因为可能之前有些同学一点命令行也没接触过，就是在这儿，这不运行着的吗？怎么让它停下来呀，不是说给它关掉，关掉它也没停，你得按一下CTRLC，对，就是你复制粘贴那个快捷键啊，复制的那个快捷键好来那再运行一下走。

稍等。以后啊，咱不用每一次的写完东西都停再启动，可以一直让它启动着，你比如说同学啊，因为它有实时刷新的效果吗？我在这比如说想把APP包在一个HR里，你就直接写，诶回到页面看效果就直接有效果了，哎，你想说老师我给他改一下这个样式style啊，你改背景色呀，还有这个什么字体大小都可以在这来，比如说style走啊字体是吧，Fo size，你比如说叫做啊40PX啊，那你回头看效果是不是大了呀，哎，所以说不用一遍一遍的重启，就有的时候如果他要卡了呀，咱就重一下，OK好了，同学，那这一小节主要跟大家讲什么呢？来说说这么一个事儿，回到课件当中，这些文件和文件夹我们已经看完了，同学说一个重要的事儿就是功能界面组件化编码的流程。

哎，这个呢是特别重要的，首先第一步呢，你得拆分组件，这个怎么理解呢？我们往上划，在第一章的时候再讲一点，四里边有这么一个东西叫组件，画的时候同学你还记得这个图吗？我给大家放大一下。如果说人家设计师设计完了，说要实现这个页面，那你首先第一件事儿，你得分析一下页面里边能分为几个组件，你比如说我觉得蓝色的就是left menu左侧菜单的这么一个组件，那这个hier呢，就是头部的组件，那这个all k呢，就是所有分类的哎，这么一个组件，对吧？首先第一步自己心里边必须得明白啊，我这东西呢，得拆成几个组件，说老师拆组件是不是可简单了呀？呃，怎么讲呢？如果要是简单的应用挺简单的，要是复杂的应用吧，可能就稍微麻烦一点啊，你就比如说同学啊，你如果要这么划分组件，那就有点不太对了，怎么划分呢？说老师我想让我给你换个颜色，粉色的啊，走，老师我想让粉色的东西作为一个组件。

那你说它叫叫什么名呢？啊同学，你说这粉色组件它叫什么名呢？如果说红色的吧，它确实是头部的hi点，这确实是整个分类，这确实是左侧菜单，你非得把它们画到一起，你说叫什么名吧。是不是觉得没法命名了呀？同学说一下，如果你拆完的组件，哎让你哎抓耳挠腮的不知道怎么命名了，多半意味着您这组件拆的不合理。你觉不觉得同学这部分区域就不应该跟这一部分区域放到一起，对不对，哎，好，那我们再往下看啊，走第一步呢，就是你得清醒，你得知道拆成几个组件，然后呢，同学你注意就得拆分里边的这些结构文件了啊，你比如说atml啊，CSS啊，然后你把它定义出来一个一个的组件，然后第二步呢，就是实现静态组件。

你拆是拆完了，只是你心里明白了，你得去实现，你写了，你真正去写了一个这个东西来打开。这是吧，哎，应该是在哪儿呢？是在这儿啊，在这个组件画这一块是吧，哎，1.4，也就是说你心里边明白了啊，这是头部组件，这是左侧导航，这是所有分类，这只是第一步，你心里边想好了，你拆，接下来呢，你得付出行动，你得去写代码，你得写出hier这个组件的静态，啥叫静态？不要考虑这个搜索框，没有搜索这功能，就直接先把搜索框写好，没有任何的交互，就是一个静态的页面，那也就是我们所说的第几步呢，打开，也就是我们所说的来到这儿，是这个离面往上，我们所说的第一步静态组件啊，拆分组件，然后再实现静态组件，静态组件实现完了，同学你再琢磨琢磨，得让它动态，那怎么动态呢？里边还分为呢两大步，先看3.1，就是你得先让页面的那个初始化展示的数据啊，它得是动态加载进来的。

哎，也就是说你不能说一上来就做交互页面里的东西，你得是动态展示数据吧，那你想动态的展示数据，同学，那我问你，你想展示是不是状态中的数据驱动的页面展示啊，那你就得琢磨琢磨了，那个状态放在哪儿。对吧？哎，你得琢磨一下，你比如说同学举这么一个例子吧，啊，现在可简单了，页面上呢，就想展示诶一堆学生的列表，在上方呢，有输入学生姓名，年龄啊，还有这个所在年级的这些信息，然后在后边呢，有这么一个按钮叫添加，然后在中间呢，展示了一些学生的信息，同学你说这个是不是就可以分为两个组件。那么第一个组件就是粉色区域啊，叫做hier区域，头部区域，那还可以再划分一个，就是橙色的这个区域，就是中间的展示学生的列表，那个列表区对不对，也就是说这个组件可以叫做list啊，那这个粉色的头部组件呢，我就可以叫做ter，对吗？那同学你想第一步是不是完成了拆分组件，那第二步呢，实现静态组件，去把hi写好，去把list写好，让它运行的时候能有一个效果，那么第三步是不是实现动态组件呀？那同学你想一上来这得展示一些学生的信息吧，你首先得让这些学生的信息呢是动态的，你不能是写死的，你写死了四个Li是吧，就是四个学生，那不行是吧，还得让他动态的，那你想展示数据就得琢磨，同学，你说学生之所以能展示到页面上，是不是你把学生的信息放到了状态里，它才能展示到页面上啊？那么问题是状态保存一堆学生，你得用什么数据类型呢？你比如说一堆学生，我。

这用数组啊，我还是用对象啊，对吧？得想好这个问题，还有就是名称你得选好，但是我觉得啊，大家起名应该不是什么费劲儿的事儿，你比如说一堆学生的信息students呗，是吧？哎，然后再考虑一下这个状态保存在哪个组件呀，是吧？哎，你状态得是放在某一个组件里的状态吗？你不能说状态直接放在那儿啊，谁也不是不行，然后呢，进入第三步里的，诶最后一大步就是加交互，你比如说获取输入的学生的姓名啊，年龄，所在年级啊，然后呢，再加上这个点击按钮的交互，你点击添加不，这就多了一个学生，对吧？哎，这是整体的这么一个流程，也就是说是组件化编码的流程，同学，这个呀，是一个通用性的东西，嗯，你在什么时候都可以用这种形式去，哎捋把你的东西就写出来，那当然作为初学者来说呢，我希望大家啊，按照这个顺序。

来，但如果说呀，你学着学着自己这个段位啊，不断的高了，那你就可以完全打破这个顺序，就说白了什么拆组件没这环节一看页面是吧，直接就知道几个组件了，什么实现静态组件呢？实现静态组件的同时，我就把状态定义好了，同时交互我也加好了，你当然可以这么玩，就有点像咱们学车的时候，同学，如果你是一个初学者，那肯定得按照教练的来，对不对，哎，上车啊，松手刹，挂挡，松离合，给油，车走了是吧？那如果说啊，你以后特别熟的同学，那就简单说，那你就直接三档起步对不对，你直接漂移起步是不是也行？哎，所以说希望大家呢，在学基础的时候，还是尽量按照这个逻辑去走好吗？那光说不练呢，肯定不行是吧，不能告诉大家把这记咨，然后也没有实际操作呀，所以说呢，在接下来的这一小节呢，我去给大家呢，写一个案例好吧，但是不是在这个小节里边写这个小节只是跟大家说了一下，对吧，叫做组件化的编码。

流程啊，其实啊，同学，嗯，这个东西呢，你正常思考的流程是不是也是这样的呀？同学你说你在写静态组件的时候，就要考虑交互，然后就要考虑状态放在哪儿，你不觉得压力太大了吗？是吧？好了，那这一小节呢，我们停一下，下一小节我们直接开始写案例。