一 ，需要避免的几种情况

关联的state

两个state具有关联性，定义成对象即可

矛盾的state

const isSending = status === 'sending' 
const isSent = status === 'sent'

• 联想：success or fail和 popover icon 是不相关的 CCL 的Feedback中的edit状态和interface success/fail是不相关的

冗余的state

• 在渲染期间，一直可以通过 ....计算出来
• 镜像state

const [count, setCount] = useState(**countProp**)

• 联想: copy one state , use it in useEffect

重复的state

在方法 a 和 b 中都能对某一个state进行更改，比如 Select 的 Option 绑定一个String 类型，而不是 Object 类型
bad case
good case

深度嵌套的state

The state should be flat (also known as "normalized")

二， Immer

通过use-immer库撰写更加简洁的代码，类似于ahooks的useReactive可以简化下面这段代码

setPerson({
  ...person, // Copy other fields
  artwork: { // but replace the artwork
    ...person.artwork, // with the same one
    city: 'New Delhi' // but in New Delhi!
  }
});

三，xxxList

• Table maxHeight

• ahooks的useSize

• page&size state( many states -> reducer)

• propsWithChildren & HTMLAttributes<HTMLElement>

• 四，xxx.config.js

  • code consistency
  • import/require method