React常见写法

贴出一份Github上star数较多的教程，react的TS写法教程。

React内置的一些类型

react本身已经有完善的TS声明文件了，所以里面有些可以拿来就用，不需要自己定义，这里说一些常见的。

  • React.FC<Props>，定义函数组件用。
  • React.Component<Props, State>，定义类组件用。
  • React.ReactNode，用来定义各种 react 节点，比如<div />, <MyComp />, this is a just a text, null, 0…
  • React.CSSProperties，用来定义内联style的。
  • React.HTMLProps<HTMLXXXELEMENT>，获取内建 html 元素的属性。
  • React.PropsWithChildren，如果需要显示使用 children，使用该类型创建 props，如：React.PropsWithChildren<{a: string}>。
  • React.ReactEventHandler<HTMLXXXELEMENT>，用来描述元素的事件处理函数。可以自行推导出适合的事件函数描述。
  • React.ChangeEventHandler<HTMLXXXELEMENT>，最常见的如 input 的 change 事件函数描述，人为的判定类型。区别于上面的，这里的 event 可用 event.target.value，上面的是 event.currentTarget.value。类似还有MouseEventHandler, MouseEventHandler等。

React的常见写法

组件写法

类写法

  1. interface IProps {
  2.   name: string;
  3. }
  4. interface IState {
  5.   age: number;
  6. }
  7. // 这里接收2个类型参数，分别限定组件的props和state
  8. class ClsComp extends React.Component<IProps, IState> {
  9.   state = {
  10.     age: 18
  11.   }
  12. }

函数写法

  1. // 函数组件无自己的状态，因此只需要props
  2. const FcComp: React.FC<{ prop1: string }> = ({ prop1 }) => {
  3.   return <div>{prop1}</div>
  4. }

默认props写法

组件的props我们经常会写一些默认值，省去一些体力活。

类组件形式写法

  1. interface IProps extends defaultProps {
  2.   age: number;
  3. }
  5. // 使用typeof获取到类组件的默认参数类型。这里就是{name: string}
  6. type defaultProps = typeof DefaultPropsComp.defaultProps
  8. class DefaultPropsComp extends React.Component<IProps> {
  9.   static defaultProps = {
  10.     name: 'jack'
  11.   }
  13.   echoProps = () => {
  14.     // 这里也可以获得TS提示
  15.     const { age, name } = this.props
  16.   }
  18.   render() {
  19.     return <p>this is how to set default props of class component</p>
  20.   }
  21. }

函数组件形式写法

  1. const defaultProps = {
  2.   work: 'doctor'
  3. }
  4. interface IProps extends defaultPropsType {
  5.   age: number;
  6. }
  7. type defaultPropsType = typeof defaultProps
  9. function DefaultPropsFC(props: IProps) {
  10.   // 这里可以获得提示
  11.   const { work, age } = props
  13.   return <p>{`The ${work} is ${age}`}</p>
  14. }
  16. // 注意：一定要挂载默认属性，否则调用组件的地方默认值也需要传入
  17. DefaultPropsFC.defaultProps = defaultProps

常见的如style等写法

  1. /* 组件的定义 */
  3. interface IProps extends DefaultProps {
  4.   descText: string // 基本的类型
  5.   style?: React.CSSProperties // 可以在调用组件的地方，获得style的完美提示。
  6.   additionDom?: React.ReactNode // 接收任何类型的React节点
  7.   renderReactNode?: () => React.ReactNode // 接收一个以函数方式返回的React节点
  8.   onChange: React.FormEventHandler<HTMLInputElement> // 优先推荐这种写法，让TS自己推断。下面的方法定义同样可以。
  9.   // onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
  10.   buttonSize: 'small' | 'middle' | 'big' // 可选参数
  11. }
  13. type DefaultProps = typeof UsefulReactProp.defaultProps
  14. interface IState {
  15.   value: string
  16. }
  18. export default class UsefulReactProp extends React.Component<IProps, IState> {
  19.   static defaultProps = {
  20.     initVal: '输入内容'
  21.   }
  23.   // 定义一个dom引用。使用如下定义方式
  24.   static aDom = React.createRef<HTMLDivElement>()
  26.   // 定义一个类属性，可以在需要时在赋值使用
  27.   static classProp?: string
  29.   // 定义一个类属性，在定义时即复制
  30.   static classProp2 = 'hello'
  32.   state = {
  33.     value: this.props.initVal
  34.   }
  36.   defaultOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  37.     const { onChange } = this.props
  38.     this.setState({
  39.       value: e.target.value
  40.     })
  41.     this.classProp = 'hello world'
  42.     onChange(e)
  43.   }
  45.   render() {
  46.     const { onChange, style, additionDom, renderReactNode } = this.props
  47.     const { value } = this.state
  48.     // 如下代码提示只有3种上述定义过的值。
  49.     const btnSize =
  50.       this.props.buttonSize === 'big'
  51.         ? '100px'
  52.         : this.props.buttonSize === 'small'
  53.         ? '60px'
  54.         : '80px;'
  55.     return (
  56.       <div>
  57.         <input type="text" value={value} onChange={this.defaultOnChange} />
  58.         <p className="desc" style={style}>
  59.           这是个带样式的提醒
  60.         </p>
  61.         <div className="additional">{additionDom}</div>
  62.         <div className="by-func-rcnode">
  63.           {renderReactNode ? renderReactNode() : null}
  64.         </div>
  65.         <button style={{ width: btnSize }}>按钮尺寸：联合类型提示</button>
  66.       </div>
  67.     )
  68.   }
  69. }
  71. /* 组件的调用 */
  73. // 书写可以获得提示。
  74. <UsefulReactProp
  75.   descText="一个简单的描述"
  76.   onChange={e => {
  77.     console.log(e.currentTarget.value)
  78.   }}
  79.   style={{ fontSize: 14, fontWeight: 'bold' }}
  80.   additionDom={<p>this is additional tag</p>}
  81.   renderReactNode={() => {
  82.     return <p>这是通过函数返回的ReactNode</p>
  83.   }}
  84.   buttonSize="big"
  85. />

React中断言

断言，即认定，确定，以及肯定。当一个值可能是多种类型，不同类型又有不同方法时，我们调用时就会出现方法不存在另外类型上，报错，这个时候就需要断言，认定一个值是我需要的类型，按照认定的类型来使用。React中的断言用 as 语法，而不是 <string>a 语法，因为尖括号语法跟JSX语法有冲突。

  1. type UserA = {
  2.   name: string,
  3.   age: number
  4. }
  6. type UserB = {
  7.   name: string,
  8.   sex: string
  9. }
  11. type IProps = {
  12.   user: UserA | UserB
  13. }
  15. class AssertComp extends React.Component<IProps, {}> {
  16.   render() {
  17.     // 这里如果不做类型断言，会提示UserA上没有sex属性
  18.     // const user = this.props.user
  19.     const userB = this.props.user as UserB
  20.     const userA = this.props.user as UserA
  21.     return <div>
  22.       <p>this is a user: {userA.age}</p>
  23.       <p>this is a user: {userB.sex}</p>
  24.     </div>
  25.   }
  26. }

Context写法

Context是React的一个特性，可以避免在嵌套组件中一层层传递props。常用的Redux库中的 Provider 组件就是利用了Context特性。
这里使用 React.createContext 类型实现。

  1. /* 
  2.     ctx.tsx
  3.     该文件，定义了我们需要的context对象
  4. */
  5. export type Theme = React.CSSProperties
  7. type Themes = {
  8.   dark: Theme
  9.   light: Theme
  10. }
  12. export const themes: Themes = {
  13.   dark: {
  14.     color: 'black',
  15.     backgroundColor: 'white'
  16.   },
  17.   light: {
  18.     color: 'white',
  19.     backgroundColor: 'black'
  20.   }
  21. }
  22. // 这里定义Context的签名
  23. export type ThemeContextProps = { theme: Theme; toggleTheme?: () => void }
  25. // createContext<T>需要一个类型，把定义好的Context签名传递进去
  26. const ThemeContext = React.createContext<ThemeContextProps>({
  27.   theme: themes.light
  28. })
  30. /* 
  31.     themeButton.tsx 
  32.   最终的消费组件（消费上面定义的context对象）
  33. */
  34. import ThemeContext from './ctx'
  36. // contextType v16.6+支持
  37. export default class ToggleThemeButton extends React.Component<{}> {
  38.   static contextType = ThemeContext
  40.   // 后面需要通过this.context访问到上下文，所以定义一个类属性
  41.   // 这里使用!明确告诉TS，该参数一定有。
  42.   // 这里不能使用？，因为context是必选项
  43.   context!: React.ContextType<typeof ThemeContext>
  45.   render() {
  46.     // 前面context必须这么写，这里才能获取TS提示
  47.     const { theme, toggleTheme } = this.context
  48.     return (
  49.       <button style={theme} onClick={toggleTheme} {...this.props}>
  50.         button
  51.       </button>
  52.     )
  53.   }
  54. }
  56. /* 
  57.     provider组件
  58.   context对象的提供组件，相对于消费组件来说的。
  59. */
  60. import ThemeContext, { Theme, themes } from './ctx'
  61. import ThemeButton from './themeButton'
  63. export default class ThemeProvider extends React.Component<{}, State> {
  64.   state: State = {
  65.     theme: themes.light
  66.   }
  68.   toggleTheme = () => {
  69.     this.setState(state => ({
  70.       theme: state.theme === themes.light ? themes.dark : themes.light
  71.     }))
  72.   }
  74.   render() {
  75.     const { theme } = this.state
  76.     const { toggleTheme } = this
  77.     return (
  78.       <ThemeContext.Provider value={{ theme, toggleTheme }}>
  79.         <ThemeButton />
  80.       </ThemeContext.Provider>
  81.     )
  82.   }
  83. }

高阶组件HOC

先理解高阶函数，一个接收函数P作为参数，并且返回一个新的函数N的函数F，这个F即叫做高阶函数。同理，高阶组件，一个接收组件P作为参数，并且返回一个新的组件N的组件F，这个F叫做高阶组件。常见的如React-Redux库中的 connect 方法

这里写一个例子，一个 withState 函数，接收一个没有 count 状态的组件，包装后，返回一个带有 count 状态的组件。

  1. /* withState.tsx */
  2. export interface InjectedProps {
  3.   count: number,
  4.   onIncrement: () => void
  5. }
  7. export const withState = <IProp extends InjectedProps>(WrappedComp: React.ComponentType<IProp>) => {
  8.   // 使用Omit结合keyof，实现排除掉IProp和InjectedProps交集的部分(count, onIncrement)
  9.   type HocProps = Omit<IProp, keyof InjectedProps> & {
  10.     // 这里可以做HOC的Props的扩展。
  11.     initialCount?: number
  12.   }
  13.   type HocState = { readonly count: number }
  15.   return class Hoc extends React.Component<HocProps, HocState> {
  16.     // 组件的名字，方便调试
  17.     static displayName = `withState(${WrappedComp.name})`
  19.     state: HocState = {
  20.       count: Number(this.props.initialCount) || 0
  21.     }
  23.     handleInc = () => {
  24.       this.setState({
  25.         count: this.state.count + 1
  26.       })
  27.     }
  29.     render() {
  30.       const { ...restProps } = this.props
  31.       const { count } = this.state
  32.       return (
  33.         <WrappedComp
  34.           count={count}
  35.           onIncrement={this.handleInc}
  36.           // HOC组件，应该透传与HOC无关的Prop给被包裹的组件。这里的写法是因为TS本身的BUG，如果不断言，则类型报错。
  37.           {...(restProps as IProp)}
  38.         ></WrappedComp>
  39.       )
  40.     }
  41.   }
  42. }
  44. /* 
  45.     FcCounter.tsx
  46.     暴露一个函数组件，函数组件没有自己的状态。  
  47. */
  48. export const FcCounter: React.FC<Props> = props => {
  49.   const { label, count, onIncrement } = props
  50.   const handleIncrement = () => {
  51.     onIncrement()
  52.   }
  53.   return (
  54.     <div>
  55.       <span>
  56.         {label}:{count}
  57.       </span>
  58.       <button type="button" onClick={handleIncrement}>{`Increment`}</button>
  59.     </div>
  60.   )
  61. }
  63. /* 调用组件 */
  64. import { FcCounter } from './FcCounter'
  65. import { withState } from './withState'
  67. const HocCounterWithState = withState(FcCounter)
  69. <HocCounterWithState initialCount={10} label="HocCounterWithState" />

通用组件写法

通用组件复用性较高，如 <List> 这种类型的，只是个列表容器，具体的列表每一项自定义。主要思想就是利用泛型。

  1. // 组件定义
  2. interface IProps<T> {
  3.   lists: T[]
  4.   renderItem: (item: T) => React.ReactNode // 最好都用ReactNode，而不是JSX.Element。
  5. }
  6. class List<T> extends React.Component<IProps<T>, {}> {
  7.   render() {
  8.     const {lists, renderItem} = this.props
  9.     return (
  10.       <>
  11.         <ul>{lists.map(renderItem)}</ul>
  12.       </>
  13.     )
  14.   }
  15. }
  17. // 调用组件。注意：这里List传入了一个类型number，限制了泛型T的类型。
  18. <List<number> lists={[1, 2, 3]} renderItem={item => <li key={item}>{item}</li>}/>

useRef+useImperativeHandle+forwardRef写法

函数组件没有实例，如何在父组件拿到函数子组件的方法呢？

  1. // 父组件
  2. import { useRef } from 'react';
  3. import Filter from './components/Filter';
  5. type FilterHandle = React.ElementRef<typeof Filter> // *
  7. function Parent() {
  8.   const FilterRef = useRef<FilterHandle>(null) // *
  10.     return <Filter ref={FilterRef} /> // *
  11. }
  14. // 子组件
  15. import { useImperativeHandle, forwardRef } from 'react';
  16. import {Form} from 'antd'
  18. // 自定义返回的函数组件方法
  19. type FilterHandle = {
  20.   getFieldsValue: () => {[key: string]: any}
  21. }
  23. type FilterProps = {}
  25. // TS定义下是一个ForwardRef组件
  26. const Filter: React.ForwardRefRenderFunction<FilterHandle, FilterProps> = (props, ref) => {
  27.   const [form] = Form.useForm();
  29.   // 生成返回给父组件的自定义实例值
  30.   useImperativeHandle(ref, () => ({
  31.     getFieldsValue() {
  32.       // 可以暴露出form的一些方法
  33.       return form.getFieldsValue()
  34.     }
  35.   }));
  37.   return (
  38.     <Form className={styles.wrap} form={form}>
  39.       <Row gutter={12}>
  40.         <Col span={6}>
  41.           <Form.Item label="账号名称" name="name">
  42.             <Input placeholder="请输入账号名称" />
  43.           </Form.Item>
  44.         </Col>
  45.         <Col span={18} style={{ textAlign: 'right' }}>
  46.           <Form.Item>
  47.             <Space size={16}>
  48.               <Button>重置</Button>
  49.               <Button type="primary">查询</Button>
  50.             </Space>
  51.           </Form.Item>
  52.         </Col>
  53.       </Row>
  54.     </Form>
  55.   );
  56. }
  58. export default forwardRef(Filter);