前端-陈旭辉-20230713

一、学习内容

1.组件通讯

• 组件是独立封闭的单元
• 一个完整的页面通常是由多个组件组合而成的
• 组件之间经常需要共享一些数据，所以就需要组件之间能够通讯
  
  

2.props

props 用于接收外界向组件中传递的数据

实现方法：

• 调用组件时，在组件标签中使用自定义属性向组件内部传递数据
• 组件内部可以使用 props 来接收自定义属性传递的数据
  
  
  • 函数组件： props   （函数组件形参）
  • 类组件： this.props   （类组件构造方法中）
    
    

注意事项：

• 除了字符串之外，其他类型的数据都需要使用 {}
• props 是只读属性，不能修改里面的数据
• 使用类组件时，如果写了构造函数，则需要将 props 传递给 super()，否则在 constructor 中无法使用props （其他方法可以使用）
  
  

3.父向子传值

实现办法：

• 父组件渲染子组件时，将 state 中的数据添加到子组件的自定义属性中
• 关键点：  自定义属性
  
  

实现要点：

• 父组件要有state，保存数据 （某些数据准备传给子组件）
• 父组件调用子组件时，为子组件添加自定义属性，将 state 中的数据设置为属性的值
• 子组件中使用props接收父组件数据
  
  

4.子向父传值

核心： 利用回调函数

• 父组件
  1) 父组件中创建一个接收子组件数据的函数
  2) 父组件调用子组件时，将函数作为参数传给子组件
• 子组件 （==子组件已经将父组件函数保存在 props 中==）
  1) 子组件中使用 state 定义要传递给父组件的数据
  2) 子组件利用事件调用父组件传递的函数，并将数组作为参数传入
  
  

5.兄弟组件传值

思路： 子向父传值 、 父向子传值 两步的结合

• App 组件调用 MyCom1 和 MyCom2 组件
• 子组件（MyCom2） 通过调用父组件（App）的函数将数据传递给父组件 （子向父传值）
• 父组件（App）再通过子组件（MyCom1）属性向子组件传值 （父向子传值）
  
  

核心名词： 状态提升

状态提升：将数据统一放在父组件中进行保存，父组件既要提供state保存数据，也要提供方法，让子组件能向父组件进行传值

6.Context

• 传统方式缺陷明显，一层一层传递太过麻烦
• 解决方案： 使用 Context 可以实现跨组件传值
• 实现步骤：
  
  
  • 调用 React.createContext() 方法创建 Provider (提供数据) 和 Consumer (消费数据)
    1) Provider 组件用来提供数据，将要传递的数据写入 Provider 的属性中
        注意：==传递数据时属性必须是 value==
    2) Consumer 组件内部可以使用回调函数的形式使用 Provider 提供的数据
  • 使用 Provider 组件包裹最外层的父组件，并使用 value属性传递数据
  • 使用 Consumer 接收数据
    
    

7.props其他属性


7.1 children属性

• render 方法在渲染组件标签时可以使用双标签
• 组件使用双标签时，内部可以填入子节点，例如：文本子节点、标签子节点、JSX子节点、函数子节点
• props.children 中以数组形式保存这些子节点
  
  

7.2 props效验

• props用来接收外来数据，这些数据可以在组件中被使用
• 但是组件的调用者可能会传入一些不符合规则的数据
• 当组件调用者传入不符合规则的数据时，用该进行错误提示
  
  

==props校验的目标： 让组件的调用者清楚的知道，调用组件时产生错误的原因==

解决方案： 使用 prop-types 第三方包

使用步骤：

1) 安装 prop-types： npm i prop-types

2) 导入 prop-types 包

3) 为组件添加 propTypes 验证

7.2.1 常见校验规则

• 常见数据类型：array、bool、func、number、object、string
  
  
  • PropTypes.array | PropTypes.number | ...
    
    
• 必填项： isRequired
• 多选一： oneOfType
  
  
  • age: PropTypes.oneOfType( [PropTypes.number, PropTypes.string] )
  • 数字类型 或者 字符串类型均可
    
    
• 特定结构： shape({})
  
  

8.组件生命周期

8.1 挂载阶段

挂载阶段执行三个钩子函数：  (从上向下顺序执行)

• ==constructor== 首先执行，用来初始化 state、props 或者使用 bind 改变方法指向
• ==render== 第二个执行，用来渲染页面
• ==componentDidMount== 在页面渲染完毕后执行，在该方法中可以开启定时器、发送网络请求、执行DOM操作等
  
  

8.2更新阶段

• 更新阶段有三个钩子函数：  
  
  
  • ==shouldComponentUpdate== 判断是否需要进行组件更新操作，该函数必须返回一个布尔值
    
    
    • 不写该函数时，默认返回 true，执行组件更新操作
    • 书写该函数时，如果 return true，则执行组件更新；如果 return false，则终止更新
      
      
  • ==render== 渲染数据更新后的组件
  • ==componentDidUpdate== 当组件更新完成时，执行该钩子函数
    
    
  
  

• 有三种情况会更新组件：
  
  
  • setState()： 调用了setState 方法更新数据，该方式会经过 shouldComponentUpdate
  • forceUpdate()： 调用 forceUpdate() 强制进行更新，该方法不会经过 shouldComponentUpdate
  • new props： props 的值发生改变时
    
    

8.3卸载阶段

从页面上删除就是卸载