react中form可以嵌套一个form吗_React Hooks在SD-WAN项目中实践

前言

React Hooks是React16新出的基于函数式组件的一组新的api，其不同于之前class组件的内层嵌套方式，利用hooks进行钩子方式的对数据进行了组件间的流向组织，sdwan项目中都是基于函数式组件的封装，本文为sdwan项目中的react hooks的应用实践

目录

• 添加警告规则弹窗组件实践
• React Hooks源码解读
• React Fiber数据结构分析

探索案例

添加警告规则弹窗组件实践

[组件目录]

• components
  • addRule.jsx
  • RuleList.jsx
• index.jsx
• index.less

[目录描述] addRule是点击弹窗后弹出的主体组件

[源码分析] addRule是添加规则的弹窗，其中在告警规则一栏中，需要对列表中的行进行加减操作，这里最先想到的就是利用useState进行数据的管理，但其实useState是useReducer的语法糖，后续源码中会分析，我们看到使用了useState后可以将所有状态抽离到顶部，后续凡是需要使用trNum或setTrNum的便可以直接使用，这样就省去了在setState中的设置以及对相应this的绑定问题，使得数据的操作更加纯粹而且明晰

const AddRule = (props) => { const { children, title } = props; ...... const [trNum, setTrNum] = useState(1); const trLoop = (n) => { let arr = []; for(let i=0; i< n; i++) { arr.push( <tr> <td> <Select placeholder='请选择' defaultValue='0' style={ {width:'120px'}} > {options.params.map((d) => ( <Select.Option value={d.status} key={d.status}> {d.text} </Select.Option> ))} </Select> </td> <td> <Select placeholder='请选择' defaultValue='0' > {options.compare.map((d) => ( <Select.Option value={d.status} key={d.status}> {d.text} </Select.Option> ))} </Select> </td> <td> <Select placeholder='请选择' defaultValue={currentType} onChange={val => setTypeValue(val)} > {options.type.map((d) => ( <Select.Option value={d.status} key={d.status}> {d.text} </Select.Option> ))} </Select> </td> <td> { typeValue == options.type[1].status ? <span style={ {display: 'inline-flex', verticalAlign: 'middle', lineHeight: '32px', width: '120px'}}> <Input placeholder=""/>dBm </span> : <Select placeholder='请选择' defaultValue='0' style={ {width:'120px'}} > {options.params.map((d) => ( <Select.Option value={d.status} key={d.status}> {d.text} </Select.Option> ))} </Select> } </td> <td> <PlusOutlined style={ {color: '#1890ff'}} onClick={()=>setTrNum(trNum + 1)}/> </td> <td> <CloseOutlined style={ {color: '#ff4d4f'}} onClick={()=> trNum>1 && setTrNum(trNum - 1)}/> </td> </tr> ) }; return arr; }; ...... return ( <> <span onClick={showModelHandler}>{children}</span> <Modal title={title} visible={visible} onCancel={hideModelHandler} onOk={handleOk} ma