【React非全解 5】React 内置 Hooks 各个击破

Hooks 各个击破 大纲链接§ [toc] React 内置的 Hooks 主要有以下几个: useState 组件状态 useEffect 副作用 useLayoutEffect useContext 上下文 useMemo 缓存 useCallback 回调 useReducer 统一状态管理(替代Redux) useRef 引用 useImperativeHandle useDebugValue 自定义 1. useState

【React非全解 4】Hooks 之 UseState 原理解析

Hooks 之 useState 原理解析 大纲链接§ [toc] 逐步分析 useState 基本原理和源码近似实现 1. 最简单的 useState 实现 ⇧ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function App() { console.log('App 运行了') const [n, setN] = useState(0)

【React非全解 3】函数组件

函数组件 大纲链接§ [toc] 函数组件比 class 组件简单 1. 函数组件创建方式 ⇧ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 // Arrow Function Component const Hello = (props) => { return ( <div> {props.message} </div> ) } // 简写

【React非全解 2】Class 组件详解

Class 组件详解 大纲链接§ [toc] Class 组件虽然是已淘汰的繁杂用法,没有函数组件那样的简洁清晰的语法,“能效比”低,新项目基本不用,只是使用 Class 组件必须有更扎

【React非全解 1】React 类组件和函数组件

React 类组件和函数组件 大纲链接§ [toc] 1. 元素 v.s. 组件 ⇧ Element v.s. Component 元素与组件 这是一个 React 元素(d小写):const div = React.createEkement('div', ...) 这是一个 React 组件(D大写):const

【React非全解 0】React起手式

React起手式 大纲链接 § [toc] 如何入门 React 写一个 Hello World,写一个 +1,写一个 ToDo 把文档过一遍 组件 父子组件通信 组件生命周期 使用Hooks API模