本系列文章不适合前端新手，如果你学过一定的Vue/React，我希望我的文章对你能有一定的帮助，本系列文章为主播经历了一段时间的 Next.js 开发后，沉淀出来的一些内容，希望能对你有一些帮助，仅供参考

保持组件纯粹

通常来讲，我们在使用编写很多很多个组件来组成我们的程序时候，通常希望每个组件各司其职，也就是我们希望一个组件的渲染应该是高度可预测的。
React组件的设计和拆分就是围绕这一概念设计而成的，在进行React组件设计时候，我们遵从如下的设计范式：

typescript
UI = f(state)

React假设你编写的所有组件都是纯函数，也就是说对于相同的输入，你的组件总是返回相同的jsx。

副作用隔离

接下来就是设计组件中的不纯粹部分，我们通常需要对他们进行抽离解耦，下面是一个错误的示范

tsx
function Component() {
    state = state + 1 // 组件在内部自行发生了变化
    return <div>{state}</div>
}

————这会导致一定的渲染不可预测，渲染结果如下图所示

tsx
function Component() {
    state = state + 1 // 组件在内部自行发生了变化
    return <div>{state}</div>
}

export default function App() {
    return (
        <div>
            <Component />
            <Component />
            <Component />
        </div>
    )
}

这时候的渲染结果是这样子的：（有待补图，可以自行拿着代码跑一下）

隔离副作用

未完待续...