forwardRef 定义的组件添加静态属性 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 import React, { ReactNode, RefAttributes, ForwardRefExoticComponent } from 'react'; interface ModalProps { title: ReactNode; } interface ModalStaticProps { show(): void; hide(): void; } const STATIC_PROPS:
ForwardRef 🔗forwardRef 🔗ref 🔗 Ref挂载到DOM元素上时,就是对DOM元素本身的使用 Ref挂载到Class组件的时候,就是class组件
React Hooks Functional对应class Component生命周期写法 🔗componentDidMount 🔗 1 2 3 useEffect(() => { // Your code here }, []); componentDidUpdate 🔗 1 2 3
useRef vs createRef 🔗 组件每次渲染都会执行createRef生成一个ref对象 useRef在第一次渲染后创建一个ref对象, 重新渲染后如果发现已经创建就不
1.test添加代码覆盖率 🔗命令修改为 1 react-scripts test --coverage --watchAll=false package.json 1 2 3 4 5 6 7 8 9 10 11 12 "jest": { "collectCoverageFrom": [ "src/**/*.{js,jsx,ts,tsx}", "!<rootDir>/node_modules/" ], "coverageThreshold": { "global": { "lines": 90, "statements": 90 } } }
react rerender原理 🔗react中组件重绘是一个不可避免的问题,因为react中组件的更新方式就是旧组件销毁,新组件替代旧组件的形式。而且