react组件开发实践

6 种类型分别为结构型组件、样式型组件、组合型组件、配置型组件、受控型组件、非受控组件

1. 结构性组件和样式性组件

   /** 样式性组件**/
   interface ModalProps {
     tilte: string;
     content: string;
   }
   <Model title="title" content="content" />
   
   /** 结构性组件 **/
   interface ModalProps {
     title: React.ReactNode;
     content: React.ReactNode;
   }
   <Modal title={<h2>Title</h2>} content={<input type="text" />}>

2. 组合型组件和配置型组件

   /** 组合型组件 **/
   <Select defaultValue="luck">
     <Seclect.Option value="jack">jack</Seclect.Option>
     <Seclect.Option value="lucy">lucy</Seclect.Option>
   </Select>
   
   /** 配置型组件 **/
   <Select defaultValue="lucy" options={['lucy', 'jack']} />

3. 受控型组件和非受控性组件

   interface Controlled {
     value: string;
     onChange: Function
   }
   
   interface UnControlled {
     defaultValue?:String;
   }
   
   type inputProps =  Controlled | UnControlled;
   
   /** 受控性组件 **/
   <Input value={value} onChange={onChange}/>
   /** 非受控性组件 **/
   <Input defaultValue={value} />;
   <Input />;