React 学习笔记

需要组件在渲染前执行操作，可使用 componentDidMount() 生命周期函数
在 react 的标签中设置类名应该使用 className 而非 class

函数式组件的“生命周期”钩子

// 相当于类组件中的 componentDidMount
useEffect(() => {
	// 函数
}, [])

// 相当于类组件中的 componentDidUpdate
useEffect(() => {
	// 函数
})

Action Creators 指的是要借什么书的那句话

Store 管理员

Reducers 记录手册

store 是唯一的
只有 store 可以改变自己的内容
Reducer 必须是纯函数

s
├── actionCreators.js
├── actionTypes.js
├── index.js
└── reducer.js

toBe：判断是否完全一致，如果是对象还需要判断内存地址

toEqual：只判断内容是否一致

toBeTruthy & toBeFalsy

数字相关：toBeGreaterThan & toBeLessThan

浮点数：toBeCloseTo（解决 0.1 + 0.2 的问题）

异常：toThrow

Jest 中的 describe 可以理解为分组，且 describe 可以多层嵌套

React Unit Test:

React.js + Tailwind.css + Material UI + (Jest、Testing Library)

Nest.js

Redis + Mysql

Docker + GitHub Actions

useRef 与 useState 的区别在于引用该变量的 DOM 不会更新，以免造成无限循环的情况：

const [renderCount,setRenderCount] = useState(0)

useEffect(() =>{
	setRenderCount(prevRenderCount => prevRenderCount + 1)
})

return(
<div>I rendered {renderCount} times</div></>
)

使用 useRef 可以改写为：

const renderCount = useRef(0)
                                                               
useEffect(() =>{
	renderCount.current = renderCount.current + 1
})
          
return (
<div>I rendered {renderCount.current} times</div></>
)

还有一处主流的应用场景，存储 previous 的值：

export default function App() {
const [name,setName] = usestate('')
const prevName = useRef(' ')

// 如果这里不使用 useRef 而是使用 useState 创建一个带有 {currentName: string, preName: string} 的对象来存储 name; 当需要更新 name 值的时候，会将 currentName 的值先赋予 preName，可是这个操作又会触发 useEffect 对 name 的监控，导致无限循环下去
useEffect(() =>{
	prevName.current = name
}，[name])

return (
    <>
        <input value={name} onChange={e => setName(e.target.value)}/>
        <div>My name is {name} and it used to be {prevName.current}</div>
    </>
)}

还有一种场景是使用 useRef 获取子组件：

export default function App() {
const [name,setName]= usestate('')
const inputRef = useRef()

function focus() {
	inputRef.current.focus()
}
    
return (
    <input ref={inputRef} value={name} onChange={e => setName(e.target.value)}/>
    <div>My name is {name}</div>
    <button onclick={focus}>Focus</button></>
)}

FEATURED TAGS

FRIENDS