React小记
React 小记
2023-09-14 08:58:55 时间
1、React Component 一定要大写开头
在JSX中,小写标签名称被认为是HTML标签。但是,带小点(属性访问器)的小写标签名不是。
<component />
编译为React.createElement('component')
(html标签)<Component />
编译React.createElement(Component)
<obj.component />
编译React.createElement(obj.component)
2、type
type someType = string;
上面的含义是:someType与string等价,string类型有了另一个名字,那么定义以后怎么用呢?
let a: someType = 'Tim';
3、便捷的枚举类型写法
const arr = ['a', 'b', 'c'] as const; type ABC = typeof arr[number]; // 等价于 type ABC = 'a' | 'b' | 'c'
4、需要规定对象每个value都是同一个类型时
const keys = ['zhang', 'a', 'mie'] as const; type keysType = typeof keys[number]; interface Item { name: string; price: number; } const itemMap: {[key in keysType]: Item} = { zhang: { name: 'aaaa', price: 123 } }
相关文章
- [React Typescript] Discriminated unions in components props
- [React] Use react styled system with styled components
- [React] Using react-styleguidist for Component demo
- [React] Preload React Components with the useEffect Hook
- [React] Override webpack config for create-react-app without ejection
- [React Intl] Install and Configure the Entry Point of react-intl
- [React Fundamentals] Component Lifecycle - Mounting Usage
- [React] React Fundamentals: Accessing Child Properties
- react native 使用typescript
- [React Testing] Test your Custom Hook Module with react-hooks-testing-library
- [React Testing] Mock react-transition-group in React Component Tests with jest.mock
- [React] Use Prop Collections with Render Props
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React Intl] Render Content with Placeholders using react-intl FormattedMessage
- Vite+React+TypeScript手撸TodoList
- React的source code init时会自动检测Chrome dev tool的react extension装了没
- React应用渲染界面的入口
- React的source code init时会自动检测Chrome dev tool的react extension装了没
- react源码分析:深度理解React.Context
- React中的路由懒加载是什么?原理是什么?