@babelform/babel-form v1.1.2

babel-form

表单拖拽渲染平台

技术栈

react + hooks(自定义 + umi hooks) + ts + immer

开发注意事项

babel-form

• 优先实现 babelform 渲染部分逻辑，拖拽生成 schema 平台后续实现。
• babelform 渲染逻辑在 src/BabelForm 中编写，方便后续单独抽包发布

react

• 使用 useMemo 时，注意依赖的警告提示。
• 所有 props 使用 PropTypes 定义类型
• 自定义 hook 返回数组的场景是，该 hook 在一个组件内会被多次调用。返回的是数组。可以解构赋值 多个变量（使用对象则需要对返回的再次赋值）。详见 useModal

css 相关

• 多个样式相同在 assets/styles/mixins 中编写
• 高度、宽度、padding、margin、position 互相影响，在 assets/styles/variabvles 中定义变量
• z-index 统一在 assets/styles/zIndex 中编写（方便维护）
• assets/images/icons 下图片会生成精灵图，自定生成的变量在 assets/styles/sprite.styl 中读取。
  • 使用前先@import '~assets/styles/sprite.styl'
  • sprite(图片在 sprite.styl 中的变量)

hooks

• 共用自定义 hooks 放到 src/hooks 文件夹中

性能相关

• 使用 use-immer 的 useImmer 代替 useState,useImmerReducer 代替 useRecer。创建不可变数据。
• 每个函数式组件 export 之前使用 React.memo 包裹，浅比较 props 来更新包裹的组件
• 函数式组件中的常量建议使用 useRef,避免每次 render 重新生成。
• 函数式组件中声明的函数使用 useCallback
• useReducer 来替代一个组件有许多 state 需要维护的情况
• useReducer+dispatch+context api 传递 dispatch(react 保证 dispatch 不变)，避免向下传递回调函数
• useMemo 缓存（看情况使用：涉及组件一般都可以使用 React.memo 代替）
• 多组件有类似逻辑，使用自定义 hooks 抽离到 src/hooks 中
• 尽量合并相关的 state，不要使用多个 useState。

• 事件函数不要用箭头函数直接赋值。（参考：如何从 useCallback 读取一个经常变化的值？)

  原因：因为每次都会生成新的。影响子组件 props 浅比较优化以及子组件中使用 useCallback 来缓存的性能

  • 错误示范

    <div onClick={()=>{}}>

  • 正确示范
    • 方法 1

      import {useEventCallback} from 'hooks/index'
      const MyComponent = ()=> {
          const onClick = useEventCallback(()=>{
              click事件
          },[])
          return <div onClick={onClick}>
      }

    • 方法 2

      import {useRefProp} from 'hooks/index'
      const MyComponent = ()=> {
        const ref = useRefProp()
        const onClick = useRefProp(()=>{ const {a,b,c,d}=ref.current click事件 },[])
        return <div onClick={onClick}>
      }

      问题： 注意当 useCallback 依赖太多时,不建议直接使用 const onClick = useCallback(()=>{...},a,b,c,d,e,f,g),因为每次依赖更新都会重新生成一个 onClick 函数

• 由于 useEffect 和 useCallback 以及 useMemo 的依赖会导致函数重新生成或者组件重新渲染，所以错误的使用可能会导致页面存在内存泄露问题

• 当同时出现 class component 和 function component 时，会出现 ui 不一致性的问题。主要是因为 function component 具有 capture value（快照的特性）（详情参考：为什么我会在我的函数中看到陈旧的 props 和 state ？)

  解决：尽可能一个组件中不要既有 class component 和 function componet。如果出现（比如：使用 babel-ui 一些组件），避免传递对 ui 造成影响的的 prop

• 当错误的依赖导致函数性能问题时，有可能会导致页面的内存泄露 原因：由于 useEffect 和 useCallback 以及 useMemo 的依赖会导致函数重新生成或者组件重新渲染

  解决：保证正确的依赖（eslint 已经使用 plugin:react-hooks/recommended 来提示）