上节课我们学习了如何实现模块组件化，其实这个也就是给大家提一下，不不是多重要，因为我们在实际开发中一般都用Less或者Sass这样的话基本上是可以避免所谓的样式冲突的问题。这节课我们来讲一下组件化编码的流程。

回顾

在开始讲组件化编码流程之前，我们先对上节课内容做一个简单的回顾。

  • 样式模块化可以避免样式冲突
  • 样式模块化要在样式文件中加上module标识
  • 样式模块化后引入样式要用一个对象来接收
  • 样式模块化后className要用对象属性而不是字符串

以上便是上节课样式模块化的主要内容。接下来我们来开始这节课的内容。

创建新项目

新项目创建我就不多说了，我们开始一个新的项目自然要用脚手架创建一个新项目。我们依然还是把多余文件删了，只保留三大块public，src和package*.json。

我们来回忆一下，我们之前是不是说public中就放静态资源和index容器页面啊？而且这些也都是固定的，所以说public中我们不需要去动。而package为的是别人拿到我们的代码能通过package快速知道我们的项目的依赖以及如何去启动，也不需要我们自己去改动。

那么好，就只剩src了，src中我们是不是也是固定的结构？components目录，App组件和index.js入口文件。我们之前也是说过我们所有自己写得组件都集合在App组件中作为子组件，然后在index.js这个入口文件中直接渲染App这一个组件就好，那么index.js是不是也是固定的？那好，我们来把index.js来写好

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App/>, document.getElementById('root'));

我们看一下代码，基本上我们已经很熟悉了，导入React和ReactDOM，然后再导入App组件，最后渲染到页面容器上。但是我们的App组件是不是还没写？因为新创建时候自带的App组件我们肯定是不会拿来用的，我们都会删掉里面的内容重新写。但是实际上App组件中是不是根本就没有什么实际内容？只是一个用来装其他组件的壳子而已。那么好，我们来把App的固定结构先写出来：

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>

      </div>
    )
  }
}

我们来看这段代码，我们导入了React和Component，好像和我们上节课的不一样我们上节课只导入了Component，通常我们会把React和Component一起引入，就和ReactDOM类似。

组件化编码流程

那么到了上面那一步，我们就算把我们新的项目的一个整体框架搭好了，接下来我们来说我们所谓的组件化编码流程：

第一步，拆分组件，什么叫拆分组件呢？我们们每一个页面上有很多功能，我们要把这个页面拆分成一个个的小功能点，每个小功能点来作为一个组件。

第二步，我们优先去实现我们的静态组件，什么意思？还记不记得我们之前写案例的时候？我们每一个案例都说，我们先来把最初的页面展示先实现了，这就叫先实现静态组件，我们先把最初的展示实现出来，没有任何交互，等我们把我们最初的视觉效果实现之后我们再去加交互。

第三步，实现动态组件，那么好，我们实现了静态组件都没用问题了，那么是不是就该实现效果了？这就是要来实现动态组件了。但是实现动态组件也是要分两步的，第一步我们要先保证数据是动态加载的，然后第二步才是来加交互。

总结

  • 新项目三大必要模块package.json，public，src
  • 组件化编码流程分三步
  • 拆分组件
  • 实现静态组件
  • 实现动态组件
    • 动态加载数据
    • 加交互

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/component_code/