React组件化开发(一)

安装npm

yarn和npm命令对比

Npm	Yarn
npm install	yarn install
npm install [package]	yarn add [package]
npm install --save [package]	yarn add [package]
npm install --save-dev [package]	yarn add [package] [-dev/-D]
npm rebuild	yarn install --force
npm uninstall [package]	yarn remove [package]
npm uninstall --save [package]	yarn remove [package]
npm uninstall --save-dev [package]	yarn remove [package]
npm uninstall --optional [package]	yarn remove [package]
npm clean cache	yarn remove [package]
rm -rf node_modules && npm install	yarn upgrade

利用脚手架创建React项目

安装create-react-app命令

npm install -g create-react-app

创建react项目

create_react_app 02_learn_scaffold

启动react项目

cd 目录
yarn start

目录结构分析

React组件化

分而治之的思想

• 人面对复杂问题的处理方式：
  • 任何一个人处理信息的逻辑能力都是有限的
  • 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。
  • 但是，我们人有一种天生的能力，就是将问题进行拆解。
  • 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解
• 其实上面的思想就是分而治之的思想：
  • 分而治之是软件工程的重要思想，是复杂系统开发和维护的基石；
  • 而前端目前的模块化和组件化都是基于分而治之的思想；

什么是组件化开发

• 组件化也是类似的思想：
  • 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
  • 但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。
• 我们需要通过组件化的思想来思考整个应用程
  序：
  • 我们将一个完整的页面分成很多个组件；
  • 每个组件都用于实现页面的一个功能块；
  • 而每一个组件又可以进行细分；
  • 而组件本身又可以在多个地方进行复用；

React的组件化

• 组件化是React的核心思想，也是我们后续课程的重点，前面我们封装的App本身就是一个组件：
  • 组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
  • 任何的应用都会被抽象成一颗组件树。
• React的组件相对于Vue更加的灵活和多样，按照不同的方式可以分成很多类组件：
  • 根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)；
  • 根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)；
  • 根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)；
• 这些概念有很多重叠，但是他们最主要是关注数据逻辑和UI展示的分离：
  • 函数组件、无状态组件、展示型组件主要关注UI的展示；
  • 类组件、有状态组件、容器型组件主要关注数据逻辑；

类组件

• 定义类组件的要求：
  • 组件的名称的首字母必须是大写的（无论是类组件还是函数组件）
  • 类组件需要继承自React.Component;
  • 类组件必须实现render函数

函数式组件

• 没有this对象；
• 没有内部状态（hooks）；
• 没有生命周期，也会被更新并挂载，但是没有生命周期函数；

render函数的返回值

当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

• React元素：
  • 通常通过 JSX 创建；
  • 例如 div 会被 React 渲染为 DOM 节点， 会被 React 渲染为自定义组件；
• 数组或 fragments：使得 render 方法可以返回多个元素。
• Portals：可以渲染子节点到不同的 DOM 子树中。
• 字符串或数值类型：它们在 DOM 中会被渲染为文本节点
• 布尔类型或 null：什么都不渲染。