一. 组件化开发

• 组件化开发的思想

1. 分而治之的思想

• 人面对复杂问题的处理方式:
• • 任何一个人处理信息的逻辑能力都是有限的

• • 所以, 当面对一个非常复杂的问题是, 我们不太可能一次性搞定一大堆的内容.

    
    image.png

image.png

2. 什么事组件化开发呢?

• 组件化也是类似的思想:
• • 如果我们讲一个页面中所有的处理逻辑全部放在一起, 处理起来就会变得非常复杂, 而且不利于后续的管理以及扩展.
• • 但是如果, 我们将一个页面拆分成一个个小的功能块, 每个功能块完成属于自己这部分独立的功能, 那么之后整个页面的管理和维护就变得非常容易了.
• 封装的组件还可以复用, 抽出来公共的组件, 在不同的地方展示不同的内容.

例子🌰.png
组件化.png

3. React的组件化

• 组件化是React的核心思想, 也是我们后续课程的重点, 前面我们封装的App本身就是一个组件:

  
  image.png

• 组件化思想的应用:

  
  image.png

• 数字的划分, 奇数和偶数, 组件化的类型

• 函数式组件、类组件、无状态组件、有状态组件、展示型组件、容器型组件

  
  组件化.png

• 概念有重叠, 主要关注数据逻辑和UI展示的分离

  
  image.png

• 当然还有很多组件的其他概念: 异步组件、高阶组件

4. 类组件

• 类组件的定义有如下要求:

• • 组件的名称是大写字符开头(无论类组件还是函数组件)
• • 类组件需要继承自React.Component
• • 标签的名称不能大写, HTML里面标签是不区分大小写的, 正常显示
• • 在jsx中严格的区分大小写, <DIV>我是div元素</DIV>, 什么都不显示

• • DIV大写开头就会当做一个组件, 小写当做普通的div元素

    
    image.png
• • 类组件必须实现render函数

• 在ES6之前, 可以通过create-react-class模块来定义类组件, 但是目前官方建议我们使用ES6的class类定义.

• 使用class定义一个组件:

• • constructor是可选的, 我们通常在constructor中初始化一些数据;

    
    image.png

补充:

1. 接下来的代码通过脚手架创建, 脚手架的弊端, 每讲一个知识点就需要多创建一个项目, 浪费很多的时间, node_modules还需要重新下载一份. 包依赖存在的问题, 重新下载. 创建过程慢, 分享的时候node_modules删掉, 跑起来还需要重新安装.

2. 一天的课创建三个文件夹, 需要安装3次. 如何优化? 之前讲小程序的时候, 一个处理方式的参考, 只创建一个项目, 讲很多的知识点, 让知识点之间没有混乱, 首先将项目环境搭好, 第一个知识点打上一个git tag, git回退到初始化目录, 在初始化目录中讲第二个知识点, 切换tag找到对应的知识点.

   
   image.png

小程序参考.png

3. 存在的一个问题, git不熟悉, 有一定的门槛, 另一个办法, 每讲一个新的知识点, 创建一个项目, 三四次课讲得都是组件化的东西, src中创建一个文件夹, 标上标记, 中文起的名字的文件夹, 看的有点别扭, 学习过渡, 项目练习不会这么做.

二. 如何定义React组件

• class App extends Component 自动导入react库
• 删掉, 通过ES6进行导入import React, { Component } from 'react';
• {}缩进自动前提, 代码格式化快捷键 Alt+Shift+F
• 函数式组件, 首字母大写

export default function App () {
  return (
    <div>
      <span>我是function组件</span>
      <h2> Hello World</h2>
    </div>
  )
}

• 函数式组件的特点:

1. 没有this对象, this的绑定是React中非常麻烦的东西
2. 没有内部的状态, 不能保存counter<h2>{counter}</h2> => hooks, 其中有一个改变就是给函数式组件加了状态
   函数式组件.png

1. 函数式组件return, 是固定的

• 不可以return对象, 官方有说可以return什么东西

• 当render被调用是, 他会检查this.props和this.state的变化并返回以下类型之一:

• React元素:

• • 通常通过JSX创建.

    
    image.png

• 字符串或数值类型: 他们在DOM终会被渲染为文本节点

• 布尔类型或null: 什么都不渲染.

• 定义一个代码块/VSCode插件, 开发React效率更高, 已经定义了很多代码块, ES7 React/Redux/... react class componentrcc react function component rfc
  

  插件.png

• 返回一个数组, 数组里面放多个元素","分隔

2. 函数组件

image.png

3. 认识生命周期

• 很多的事物都有从创建到销毁的整个过程, 这个过程称之为是生命周期;
• React组件也有自己的生命周期, 了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能;
• 生命周期和生命周期函数的关系:
• • 比如挂载阶段(Mount), 组件第一次在DOM树种被渲染的过程;
• • 比如更新过程(Update), 徐建状态发生变化, 重新更新渲染的过程;
• • 卸载过程(Unmount), 组件从DOM树种被移除的过程.

• React内部为了告诉我们当前处于哪些阶段, 会对我们组件内部实现的某些函数进行回调, 这些函数就是生命周期函数:

  
  生命周期.png
• 主要谈类的生命周期

4. 生命周期解析

• 官方图讲解, 大致分成三个阶段
• 挂载阶段, 挂载到DOM树,
• 更新阶段,

• 从DOM树移除, 卸载阶段

  
  生命周期解析.png
  挂载阶段.png

卸载.png

• Constructor
• 如果不初始化state或不进行方法绑定, 则不需要为React组件实现构造函数.
• constructor中通常制作两件事情:
• • 通过给this.state赋值对象来初始化内部的state

• • 为事件绑定实例( this)

    
    constructor.png

• componentDidMount做的事

  
  image.png

componentDisUpdate.png
image.png componentWillUnmount.png
操作.png

• npx先别着急用
• react也是异步更新, 某些情况下是同步的
• 对比学习, 抓主干
• 不常用的生命周期方法, 官方网站
  image.png

生命周期复杂版.png

• SCU的优化

不常用的生命周期

• 过期的生命周期方法, 官方不推荐使用了

  
  不常用的生命周期.png

5. 认识组件的嵌套

• 三个知识点, 定义方式、生命周期、组件的数据传递
• 组件之间存在嵌套关系:
• • 在之前的案例中, 我们只是创建了一个组件App;
• • 如果我们一个应用程序将所有的逻辑都放在一个组件中, 那么这个徐建就会变成非常的臃肿和难以维护;
• • 所以组件化的核心思想应该是对组件进行拆分, 拆分成一个个小的组件;

• 再将这些组件组合嵌套在一起, 最终形成我们的应用程序;

  
  子组件和父组件.png

6. 组件间的通信

• vue通过自定义事件, 监听

  
  组件间的通信.png

父组件传递子组件- 类组件和函数组件

父子组件传递.png

• 组件内部需要跟一些东西, 可以使用双标签<ChildCpn>123</ChildCpn>
• 补充一些原理性东西, 不实现也能正常运行

• 父类真的会帮你保存属性, 源码

  
  image.png
• js里面有很多高级的语法

• 在自己里面, 没有在父类里面, 有点复杂, 有时间最好研究一下, 抓大放小

  
  ES6转ES5.png
• 不保存也能显示? 下课验证一下, 猜测自动调用了父类的构造器?

函数组件

• 函数式组件比类组件简单方便很多
• hooks, 函数式组件也有自己的状态
• 参数/属性来做一个验证

• 双引号字符串传递, 希望是Number类型, 表达式要在{}里面写

  
  会报错.png

报错信息.png

参数propTypes

• 对于传递给子组件的数据, 有时候我们可能希望进行验证, 特别是对大型项目来说;
• • 当然, 如果你的项目中默认继承了Flow或者TS, 那么直接就可以进行类型验证;

• • 但是, 即使我们没有继承Flow或TS, 也可以通过prop-types库来进行参数验证;

    
    image.png

ChildCpn.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  height: PropTypes.number,
  names: PropTypes.array
}

image.png
image.png

• 没有传name的时候, 报警告, 原因, JS太灵活了, 里面有很多的细节, undefined返回的是一个NaN

  
  报警告.png

再补充一个知识点

• 假如没有传递任何数据, 希望有一个默认值
• 什么都没有传, 相当于传默认值

ChildCpn.defaultProps = {
  name: "why",
  ...
}

• 这是函数式组件, 类组件也一样, 另外一种写法

// es6中class fields写法
class ChildCpn2 extends Component {
  static propTypes = {
    
  }
  static defaultProps = {
    
  }
}

ChildCpn.propTypes = {
  name: PropTypes.string.isRequired,
  age:...
  ...
}

coderwhy的React核心技术与开发实战课程链接

少年~来做同学呀~.png