目录
什么是Hooks?
Hook 是
React 16.8的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性。
为什么要使用React Hooks?
传统组件类的几个缺点:
- 大型组件很难拆分和重构，也很难测试。
- 业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。
- 组件类引入了复杂的编程模式，比如
render props和高阶组件。
详见
Hooks的优势
- 能优化类组件的三大问题
- 能将组件中相互关联的部分拆分成更小的函数
- 能在无需修改组件结构的情况下复用状态逻辑
Hooks的缺点
响应式的useEffect不能被清除 心智成本增加, 依赖的不可控性 解决方式: 依赖划分, 单一职责划分
Hooks不擅长异步的代码(旧引用的问题) 利用闭包的方式 hack或者useRef
custom hooks 严重依赖参数的不可变性
建议使用官方推荐的插件 eslint-plugin-react-hooks。
使用注意事项
- ✅ 钩子一律使用
use前缀命名，便于识别。你要使用xxx功能，钩子就命名为usexxx - ✅ 只在最顶层使用
Hooks，不要在循环，条件或嵌套函数中调用Hooks - ✅ 只在
React函数中调用Hooks, 不要在普通的JavaScript函数中调用Hooks - ✅ Hooks 警告
常用的Hooks
更多详见Hooks索引
Hooks 生命周期对应 Class 组件类
函数组件与类组件的区别
tip
函数式组件捕获了渲染所用的值，通过闭包缓存到了上一次执行的值。（Function components capture the rendered values.） 类组件会在更新时，会更新整个 this 实例 https://overreacted.io/zh-hans/how-are-function-components-different-from-classes/
语法
class 需要继承Component，然后 render 返回组件 function直接返回
调用方式
class 需要实例化，然后调用 render function直接调用
- 无法使用setState
useState VS setState
setState({}) / setState({}, () => {}) / setState((state, props) => {}, () => {}); useState只能在函数中使用
setState会合并参数，useState不会
state = {
name: 'Rain120'
age: 20
}
setState({
age: 18
})
// => state = { name: 'Rain120', age: 18 }
const [, setProfile] = useState({
name: 'Rain120'
age: 20
})
setProfile(prev => ({
...prev,
age: 18
}))
setState可以通过第二个函数得到最新的值，useState需要通过 useEffect
参考资料
When to useMemo and useCallback