前端-陈旭辉-20230717

一、学习内容

1.组件业务逻辑复用

• 组件复用就是将组件中相同的业务逻辑抽取出来进行封装
• 复用两种东西：  state 和 操作 state 的方法
• 实现复用有两种方式： render props 模式  和 高阶组件（HOC）
• 组件复用没有新的API，是由 React 自身特点（编码技巧）演化而来的固定模式
  
  

1.1 render props方法

render props 的核心逻辑：

① 子组件进行数据运算

② 父组件通过回调函数得到子组件的数据 （子向父传值）

③ 父组件在回调函数中渲染页面

④ 因为向子组件传递回调函数时，属性名通常都用 render ，所以得名 render props 默认

1.2 children代替render props

• return this.props.render(this.state) 中的 render 并不是固定的名称，使用什么都行
• render props 核心思想还是利用子向父传值时候的回调函数。父组件向子组件传递一个函数，自组件执行该函数时将子组件中的state作为实参传入。
• children 是一个更好的选择，因为组件如果写成双标签形式，标签内部会被自动认为是 children
  
  

2. hooks
2.1 hooks概述

1) 什么是 hooks ？

• Hooks 是 react 16.8 提供的一个新特性
• Hooks(钩子)，能够为函数组件提供类组件的特征，例如： state 、 生命周期等
• 16.8 之前只有类组件有状态（state），函数组件是没有状态的
• 16.8 及以后，函数组件能够通过Hooks使用状态了，所以16.8之后不能再叫函数组件为无状态组件了
• 函数组件更符合 react 的理念，UI = func(data)，即不同的参数产生不同的 UI
  
  

2) hooks 解决了什么问题

• 组件状态逻辑复用   --->  高阶组件（HOC）、 render-props
• 类自身的问题   --->  类过于庞大，概念太多，this指向混乱等
  
  

2.2 useState函数


2.2.1 useState基本使用

• useState 是 react 提供的方法，所以可以从 react 中解构出来
• 使用 useState 时又可以以==数组==形式解构出状态和操作该状态的函数
• 状态一般命名为 xxx， 对应的函数命名为 setXxx （默认约定）
• ==解构出的变量和方法能够在组件中使用，并且发生改变时能够引起组件重新渲染==
  
  

2.2.2 首次渲染和更新渲染

1）首次渲染

• 组件内部代码会被执行一次
• useState 为变量赋值的操作，只在首次渲染时生效
  
  

2）更新渲染

• 只要变量发生变化，组件就会被重新渲染
• 重新渲染时，useState不会再执行，变量会沿用之前的值
  
  

3.useEffect执行时机

• useEffect 执行要依赖于参数2（==依赖项==）
• 无依赖项（默认）
  • 首次渲染时执行一次，每次状态发生改变时执行一次
    
    
• 设置参数2为空数组时
  • 首次渲染时执行一次，之后不再执行
    
    
• 添加特定的依赖项
  • 依赖项就是从 useState 中解构出来的状态
  • 首次渲染时执行一次，依赖项发生改变时执行
    
    
• 注意事项：
  
  
  • 只要状态出现在 useEffect 中，该状态就应该出现在参数2的数组列表中，否则可能会产生bug
    
    

4.useRef

• ref 属性用来标记组件或者标签
• useRef 可以从 React 中解构出来
• useRef 可以创建对象，该对象设置在哪个组件（标签）上，该对象的current属性中就保存这个组件（标签）
• 注意事项： 函数组件不能设置 ref