React学习笔记（一）

• 函数组件：一个接受输入，并输出JSX的函数。
  
• 类组件：使用class定义，并继承React.Component的类，必须包含一个render()方法。
  

• 受控组件：表单数据由React组件管理的组件。表单元素（input、textarea等）的值由state控制，并通过onChange事件来更新。
  
• 非受控组件：表单数据由DOM本身进行管理，可以使用ref从DOM节点中获取表单值。
  

• 组件内部管理的数据，状态改变会触发组件的重新渲染。
  
• 如何更新：
  
  
  
  • 类组件：使用this.setState()
    
  • 函数组件：使用useState Hook 返回更新函数
    
  • 状态的更新是异步的，React会对同一个事件处理函数中的多个状态更新进行批处理
    
  • 状态不可变，每次状态更新都会产生新的状态对象，直接修改状态不会重渲染
    
  
  

• 从组件外部传入的数据，类似函数的参数，只读，不能修改。
  
• 实现父组件向子组件通信（传递数据、回调函数等）
  

• 作用：在函数组件中添加内部状态
  
• 语法：const [state,setState] = useState(初始值)
  
• 关键点：初始值可以是一个值，也可以是一个函数。调用setState会替换状态对象
  

• 作用：在函数组件中执行副作用操作（数据获取，订阅，手动修改DOM等一些异步操作）
  
• 执行时机：默认情况下，在每次渲染后（包括首次渲染）都会执行。
  
• 依赖数组（第二个参数）的控制：
  
  
  
  • 不提供依赖数组（null）：每次渲染后都执行
    
  • 依赖数组为空（[]）：仅在组件挂载后执行一次（类似于componentDidMount）
    
  • 依赖数组有值（[dep1,dep2]）：在组件挂载后以及dep1或dep2发生改变时执行
    
  
  
• 清除效应：如果useEffect的回调函数返回一个函数，这个函数会在组件卸载前和执行下一个副作用之前被调用，可以用于清理（取消订阅、清除定时器等)
  

• 作用：接受一个Context对象（由React.createContext()创建）并返回该Context的当前值
  
• 实现与后代组件单向通信
  

• useCallback：缓存函数本身，用于优化性能。
  
  
  
  • 在进行重新渲染时，
    
    
    
    • 如果依赖项没有发生变化，返回的是相同的函数，从而跳过重新渲染。
      
    • 当依赖项改变时，会更新函数，并重新渲染。
      
    
    
  
  
• useMemo：缓存计算结果，用于优化性能
  
  
  
  • 避免每次重新渲染时都进行高开销的计算任务
    
  • 仅在依赖项改变时重新计算。
    
  
  

在JS中每次运行function(){}和()=>{}都会生成新的函数对象。
父组件中定义了一个回调函数，子组件中调用了这个函数。当父组件状态改变时，会重渲染父组件，父组件中子组件也会重渲染，其中父组件重新生成了一个新的函数对象（虽然它的功能不变，但函数的引用变了，是一个新的对象），传入子组件的回调函数变了，所以子组件也要重新生成。
如果使用useCallback缓存该回调函数，只要依赖数组中的元素不变，当父组件重渲染时，它会返回缓存好的函数对象，而不是生成一个新的函数对象，传入子组件的回调函数不变，子组件跳过重新渲染。

• 访问DOM元素
  
• 存储一个可变的值
  
  
  
  • ref的current属性可以在组件的整个生命周期内持久存在，而且改变它不会触发组件重新渲染，可以用来存储定时器ID，上一次属性或状态等。
    
  
  

• componentDidMount：组件挂载后回调
  
  
  
  • 使用 useEffect 并提供一个空依赖数组 []。
    
  
  
• componentDidUpdate：组件状态更新时回调
  
  
  
  • 使用 useEffect 并不提供依赖数组或提供一个非空的依赖数组
    
    
    
    • 使用 useRef 来保存一个在组件生命周期内持久存在的值（isMounted），它不会触发重渲染。
      
    • 首次渲染时，isMounted.current 为 false，将其设为 true 但不执行更新逻辑。
      
    • 后续渲染时，isMounted.current 为 true，执行更新逻辑。
      
    
    
  
  
• componentWillUnmount ：组件卸载之前回调
  
  
  
  • 在 useEffect 中返回一个清理函数并提供一个空依赖数组。
    
  
  

• 工作流程：
  
  
  
  • 当状态改变时，会创建一个新的虚拟DOM树。
    
  • 使用Diffing算法比较新旧两个虚拟DOM树，找出需要更新的最小部分
    
  • 将计算出来的差异批量地应用到真实DOM上
    
  
  
• 减少对真实DOM树的操作，极大提高性能。开发者无需关心如何高效地更新UI，只需要关心数据状态。