React学习（二），2025/5/10，笔记记录

1、useReducer()的使用,(和useState一样用于状态管理)

import { useReducer } from "react";

function reducer (state, action){
  switch(action.type){
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    case 'SET':
      return action.payload  
    default:
      return state
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <div className="App">
      <button onClick={() => dispatch({ type: 'INC' })}>+++</button>
      ------{state}
      <button onClick={() => dispatch({ type: 'DEC' })}>---</button>
      <button onClick={() => dispatch({ type: 'SET',payload: 100 })}>updata</button>
    </div>
  );
}

export default App;

2、useMemo在组件每次重新渲染时缓存计算的结果，类似useEffect

因为useState状态在调用改变时，会使得整个组件进行重新渲染

    useMemo(() => {
        //根据count1返回计算结果，只有count1依赖项发生变化时才重新计算
    }, [count1])

3、React.memo基本使用，（防止子组件重复渲染）

• useState状态在调用改变时，会使得整个组件进行重新渲染
• props（属性）是父组件传递给子组件的数据。
• context 是 React 提供的一种跨组件层级传递数据的机制，不需要显式地通过 props 逐层传递。

import { memo, useState } from "react" 

const MemoSon = memo(function Son () {
  console.log('我是子组件，我重新渲染了')
  return <div>this is son</div>
}) 

function App () {
  const [count, setCount] = useState(0)
  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>+{count}</button> 
      <MemoSon />
    </div>
  )
}

export default App

4、React.memo的props比较机制，当发送变化时返回false

// React.memo props比较机制

// 1. 传递一个简单类型的prop   prop变化时组件重新渲染

// 2. 传递一个引用类型的prop   比较的是新值和旧值的引用是否相等  当父组件的函数重新执行时，实际上形成的是新的数组引用

// 3. 保证引用稳定 -> useMemo 组件渲染的过程中缓存一个值

import { memo, useMemo, useState } from 'react'

const MemoSon = memo(function Son({ list }) {
  console.log('子组件重新渲染了')
  return <div>this is Son {list}</div>
})


function App() {
  const [count, setCount] = useState(0)

  // const num = 100

  const list = useMemo(() => {
    return [1, 2, 3]
  }, [])

  return (
    <div className="App">
      <MemoSon list={list} />
      <button onClick={() => setCount(count + 1)}>change Count</button>
    </div>
  )
}

export default App

5、useCallback缓存函数，防止子组件多次渲染（类似useMemo）

// useCallback

import { memo, useCallback, useState } from "react"


const Input = memo(function Input ({ onChange }) {
  console.log('子组件重新渲染了')
  return <input type="text" onChange={(e) => onChange(e.target.value)} />
})

function App () {
  // 传给子组件的函数
  const changeHandler = useCallback((value) => console.log(value), [])
  // 触发父组件重新渲染的函数
  const [count, setCount] = useState(0)
  return (
    <div className="App">
      {/* 把函数作为prop传给子组件 */}
      <Input onChange={changeHandler} />
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  )
}

export default App

6、forwardRef在父组件控制子组件的元素

import { forwardRef, useRef } from "react"

// 子组件
// function Son () {
//   return <input type="text" />
// }

const Son = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />
})


// 父组件
function App() {
  const sonRef = useRef(null)
  const showRef = () => {
    console.log(sonRef)
    sonRef.current.focus()
  }
  return (
    <>
      <Son ref={sonRef} />
      <button onClick={showRef}>focus</button>
    </>
  )
}

export default App

7、useImperativeHandle暴露子元素中的方法

import { forwardRef, useImperativeHandle, useRef } from "react"

// 子组件

const Son = forwardRef((props, ref) => {
  // 实现聚焦逻辑
  const inputRef = useRef(null)
  const focusHandler = () => {
    inputRef.current.focus()
  }

  // 把聚焦方法暴露出去
  useImperativeHandle(ref, () => {
    return {
      // 暴露的方法
      focusHandler
    }
  })
  return <input type="text" ref={inputRef} />
})


// 父组件
function App () {
  const sonRef = useRef(null)
  const focusHandler = () => {
    console.log(sonRef.current)
    sonRef.current.focusHandler()
  }
  return (
    <>
      <Son ref={sonRef} />
      <button onClick={focusHandler}>focus</button>
    </>
  )
}

export default App

8、class类组件基础结构

只是编写组件的一种方式，了解即可

9、zustand状态管理工具

zustand (React) | ZUSTAND文档

10、vite创建react-ts项目

npm create vite@latest my-react-ts-app -- --template react-ts

11、ts泛型，useState可以自动推断初始值，useState传递泛型函数

<user | null> 可以设置初始值为null

12、props和ts的联合使用