本书通过一个奇幻故事的外壳讲解 React 开发必备的核心思维模型,即如何用 React 的独特方式思考和解决问题。故事主角用“脑机”进入“Web 宇宙”,登陆“React星”。通过体验各种离奇见闻,由浅入深地介绍 React 开发的核心知识点,例如声明式和响应式编程、不可变约定、单向数据流、组件组合的运用、组件渲染特性、Hook 的基本原理和常见模式、组件构架设计和 State管理,等等。“让读者在娱乐中学习”,这是作者的初衷。为了帮助读者理解和记忆,本书为每一个思维模型都配备了生动有趣的故事桥段和漫画插图。本书强调揭示各个概念的本质,不光展示“如何做”,更注重解释“为什么”,并辅以实例操作,旨在打开一扇门——鼓励读者深挖基础知识,增强自行推演结论、进一步学习实战知识的能力。 本书主要适合对 HTML、CSS、JavaScript、DOM有一定了解的前端开发者、设计师和高校学生等阅读。
代码中的表情符印刷时缺失,应为如下内容:
function App() {
let who = '🧐'
return <div>💪{who}👊</div>
}
function App() {
let who = '🧐'
return (
<div>
<div>💪{who}👊</div>
<button
onClick={function () {
// TODO 将 who 设置为👨
}}
>
艾伦
</button>
</div>
)
}
括号内文字内容应为:“(覆盖 useMemo、useCallback、useState、useReducer 和 useRef)”
此页的代码应为如下内容:
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()
}
}
两处代码的 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="查询条件" />,
}
}