如何设计一个React组件

基本原则

编写React组件应该遵循通用的设计准则(SOLID)，确保代码的高内聚，低耦合

职责单一

多个组件协同完成一件，而不是一个组件替其他组件完成本该它自己完成的事情

API概念清晰

Props属性尽量和已知的概念保持一致，而不是起个新属性名，例如：

• 受控组件尽量使用value和onChange属性分别表示controllerValue和trigger event
• 使用className和style属性传入对应的类名和样式

避免状态冗余

如果某一个state可以由其它一个或多个state计算生成，那么就应该避免使用useState声明一个新的state:

const Filter = () => {
  const [inputVal, setInputVal] = useState("");
  // 提交按钮的disabled属性可以由inputVal是否有值决定
  const submitButtnDisabled = !inputVal;

  return (
    <form>
      <input type="text" value={inputVal} onChange={e => setInputVal(e.target.value)} />
      <button type="submit" disabled={submitButtnDisabled}>Submit</button>
    </form>
  )
  
}

避免不必要的React Hook调用

• 将useEffect作为副作用函数而不是监听函数
• 如无必要，尽量不使用useCallback和useMemo

props和hooks使用原则

• props中的属性应在函数最顶层进行解构调用，而不是在组件内通过属性访问符进行调用
• 设计props属性时，尽量使用optional prop + 默认值的方式，而不是required prop
• 所有hooks在调用时应尽量放在组件顶部