坐标 React 星

React 开发核心思维模型

本书通过一个奇幻故事的外壳讲解 React 开发必备的核心思维模型，即如何用 React 的独特方式思考和解决问题。故事主角用“脑机”进入“Web 宇宙”，登陆“React星”。通过体验各种离奇见闻，由浅入深地介绍 React 开发的核心知识点，例如声明式和响应式编程、不可变约定、单向数据流、组件组合的运用、组件渲染特性、Hook 的基本原理和常见模式、组件构架设计和 State管理，等等。“让读者在娱乐中学习”，这是作者的初衷。为了帮助读者理解和记忆，本书为每一个思维模型都配备了生动有趣的故事桥段和漫画插图。本书强调揭示各个概念的本质，不光展示“如何做”，更注重解释“为什么”，并辅以实例操作，旨在打开一扇门——鼓励读者深挖基础知识，增强自行推演结论、进一步学习实战知识的能力。本书主要适合对 HTML、CSS、JavaScript、DOM有一定了解的前端开发者、设计师和高校学生等阅读。

书中代码

第 1 章

重返 React 星

第 2 章

摩组城

第 3 章

瑞海惊魂

第 4 章

灵缘幻境

↑
其中的分支包含了该项目的构建步骤
最终结果位于 use-react-query 分支

勘误

第 7 页

代码中的表情符印刷时缺失，应为如下内容：

function App() {
  let who = '🧐'
  return <div>💪{who}👊</div>
}

function App() {
  let who = '🧐'
  return (
    <div>
      <div>💪{who}👊</div>
      <button
        onClick={function () {
          // TODO 将 who 设置为👨
        }}
      >
        艾伦
      </button>
    </div>
  )
}

第 3 章章首页

括号内文字内容应为：“（覆盖 useMemo、useCallback、useState、useReducer 和 useRef）”

第 120 页

此页的代码应为如下内容：

function latitudeReducer(state, action) {
  switch (action.type) {
    case '朝南航行':
      return {...state, latitude: state.latitude - action.step }
    case '朝北航行':
      return {...state, latitude: state.latitude + action.step }
    ...
    default:
      throw new Error()
  }
}

第 135 页

两处代码的 input 都应该包含 placeholder 属性：

function App() {
  let [query, setQuery] = useState(query)
  useEffect(() => {
    document.title = `查询条件：${query}`
    fetch(`http://some-api.com/search=${query}`).then(doSomething)
  }, [query])
  return <input value={query} placeholder="查询条件" />
}

function App({ title }) {
  let [query, setQuery] = useState(query)
  // 幻想中的声明式副作用 API
  return {
    effects: {
      'document.title': `查询条件：${query}`,
      fetchData: `https://someapi.com/search=${query}`,
    },
    dom: <input value={query} placeholder="查询条件" />,
  }
}