准则一：多使用组件，让内容一目了然

在编写组件UI代码的时候，对比以下的两种代码，哪个更好理解呢？

例一：我一眼就能看出这是个多栏结构，然后里面有侧边栏、笔记列表、笔记编辑器。

<HelmetProvider>
  <TempStateProvider>
    <div className={determineAppClass(darkTheme, sidebarVisible, activeFolder)}>
      <DragDropContext onDragEnd={onDragEnd}>
        <SplitPane split="vertical" minSize={150} maxSize={500} defaultSize={240}>
          <AppSidebar />
          <SplitPane split="vertical" {...getNoteBarConf(activeFolder)}>
            <NoteList />
            <NoteEditor />
          </SplitPane>
        </SplitPane>
      </DragDropContext>
      <KeyboardShortcuts />
      <SettingsModal />
    </div>
  </TempStateProvider>
</HelmetProvider>

例二：充斥着原生的 html 元素，如 div、span 等等，勉强能通过 class 来区分里面的内容。

<TempStateProvider>
  <div className={determineAppClass(darkTheme, sidebarVisible, activeFolder)}>
    <DragDropContext onDragEnd={onDragEnd}>
      <div className="splitPane" split="vertical" minSize={150} maxSize={500} defaultSize={240}>
        <div className="appSideBar">
          {/* blablabla */}
        </div>
        <div className="splitPane" split="vertical" {...getNoteBarConf(activeFolder)}>
          <div className="NoteList"></div>
          <div className="NoteEditor"></div>
        </div>
      </div>
    </DragDropContext>
    <KeyboardShortcuts />
    <SettingsModal />
  </div>
</TempStateProvider>

例二还是在我提供了合适的 class 名称还有省略了大量内容的情况下，假设你碰到个“靠谱”的同事，结果可想而知。

所以很明显多使用组件不仅能让代码结构简单，更能隐藏组件之间的耦合。

请记住：

不要让一个组件的代码超过600行

gnosis23 commented 2 years ago

准则二：多使用Hooks，让代码更内聚

老生常谈了，不要总把组件内部所有的状态都列在一起，配上一堆 useEffect ，看上去就是下面的效果

function SomeShitComponent() {
  const [state1, setState1] = useState(1);
  const [state2, setState2] = useState(1);
  const [state3, setState3] = useState(1);
  const [state4, setState4] = useState(1);
  const [state5, setState5] = useState(1);

  useEffect(() => { /* some logic */ }, []);
  useEffect(() => { /* some logic */ }, []);
  useEffect(() => { /* some logic */ }, []);
  useEffect(() => { /* some logic */ }, []);

  return <div className="someBigShit">...</div>
}

首先鬼知道这几个 state 和 useEffect 之间有什么关系，当页面复杂了以后，找都要找半天。

请记住：

将每个 state 的作用域限定到最小的范围
将相关联的 state 和 useEffect 组合起来，用一个有意义的 hook 来暴露给使用者

上面的代码经过改造后是这么个效果：用户只需要知道我有什么 state 和 callback，至于里面有什么 state 和什么时候更新，都是内部实现。

function SomeShitComponent() {
  const { shit } = useWC();
  const magic = useMagicTool(shit);

  return <div className="someBigShit">...</div>
}

gnosis23 / hello-world-blog

易于维护的React代码编写准则 #103

准则一：多使用组件，让内容一目了然

准则二：多使用Hooks，让代码更内聚