React 新官网上的细微之处

前言

React 新官网已发布了一段时间，继合并官网 PR 之后，仔细研读该官网内容，发现了些细微之处，值得深思。

井字棋教程 Tutorial: Tic-Tac-Toe

在 Tutorial: Tic-Tac-Toe 中 Declaring a winner 段落为定义一个方法calculateWinner用于判定井字棋游戏的胜者，有以下内容：

Note

It does not matter whether you define calculateWinner before or after the Board. Let’s put it at the end so that you don’t have to scroll past it every time you edit your components.

calculateWinner作为一个公共方法放置在任何位置都可以，决定放置在最后这样在编写组件时不会因为它放置在上面每次都需要滚动跨过它。

从Vue2切换到Vue3的过程中，发现除了新增的 setup最明显之外，sfc模板文件结构是有变化的，Vue2的结构从上到下依次是 template，script和style，现在Vue3的结构是 script标签放置在最上面。

React 哲学 Thinking in React

在 Thinking in React 中将页面实现分为了五步：

• Step 1: Break the UI into a component hierarchy 将 UI 界面拆分为组件
• Step 2: Build a static version in React 构建静态页面
• Step 3: Find the minimal but complete representation of UI state 寻找最少但能完整表示 UI 状态
• Step 4: Identify where your state should live 明确状态位置（所在组件）
• Step 5: Add inverse data flow 实现反向数据流

在步骤二开始位置有如下一段话：

Now that you have your component hierarchy, it’s time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity… yet! It’s often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.

构建静态页面过程中，一定不要去添加交互，这是下一步做的事情。编写静态页面需要无脑编码，但是添加交互则需要非常多的思考。

回到Vue3最新单页面组件文件结构上，先完成静态结构template和style后，将其放置在底部，在添加交互时就不用频繁进行页面滚动。