写出易于维护的React代码

1 组件即功能，一个组件不要做太多的功能。

js 复制代码

// Bad
function SomeSelector() {
    const [data, setData] = useState(null);
    useEffect(() => {
        fetchData().then(setData);
    }, []);
    return <div>{data?.length}</div>;
}


// Better
function useOptions() {
    const [data, setData] = useState(null);
    useEffect(() => {
        fetchData().then(setData);
    }, []);
    return data;
}
function SomeSelector() {
    const options = useOptions();
    return <div>{options?.length}</div>;
}

像是上面这个例子，一个要做尽可能少的事情，像这种可以抽象的 Hooks 逻辑要尽量的抽象出来，可以使主要的功能流程都比较清晰。达到关注点分离的效果

2 Hooks 只是一个函数

自定义钩子是 React 的一个非常强大的功能，而他的本质只是一个函数，非常的简单，我们上面的例子就是通过自定义的 Hoos 把代码弄整洁的。

如果你不写自定义Hoos 代码就会变成一坨屎。

我发现过一大推直接在组件里面写 3个 useEffect 获取下拉数据，然后渲染下拉框的

3 状态提升

状态应该只在他需要提升的时候提升，会达到事半功倍的效果，如果什么都不管就提升，那就是事倍功半了，其他情况下状态应该只在使用他的地方出现。

4 组合比配置好

在组件抽象封装中，通过抽象多个不同的参数，比传一大推配置参数，然后只抽象一个组件要好。

一大推参数会带来维护与扩展的困难。且每个参数都需要考虑其必要性

注意：并不是说每个组件不能有太多的参数，如果每个参数都不可或缺，那就应该让它存在并且好好的为此工作。

jsx 复制代码

<FirstComponent>
    <SencondComponent></SencondComponent>
</FirstComponent>

5 RenderProps 依然是非常强大的功能，不要因为出现了 Hooks 就不使用它

js 复制代码

function MouseTracker({ render }) {
    const [pos, setPos] = useState({ x: 0, y: 0 });
    useEffect(() => {
      const handleMouseMove = (e) => setPos({ x: e.clientX, y: e.clientY });
      window.addEventListener("mousemove", handleMouseMove);
      return () => window.removeEventListener("mousemove", handleMouseMove);
    }, []);
    return render(pos);
  }
  
  <MouseTracker render={({ x, y }) => <p>Mouse at {x}, {y}</p>} />

6 不要滥用 Context

Context 可以深层的传递一个 state ，所以千万不要遇上个需要改变的 state 就使用它，否则你就准备接受性能的惩罚吧。。。

应该只用在配置或设置这种不常改变的 state 上

更多的请使用 state 加 props 传递

7 useReduce 管理复杂的状态交互

useReduce 可以使复杂且多的状态管理看起来一目了然，所有相关的 state 都可以被统一管理，它们有统一的数据流，看起来简直是赏心悦目

最后，做到这些，只是为了未来的你在维护这样的代码时，显得更有效率且更有信心。还会有心情听音乐，喝咖啡。

至少能让自己轻松一点~

这两年一直在重构 React 相关的内容，后面要尝试突破一下写点别的。