这篇文章主要介绍 React 新特性 Hooks 以及应用场景.
React Hooks 是 React 的一个新特性, 在 React v16.8.0-alpha.0 上开始支持, 主要是在一些函数组件上可以使用例如 state 等特性, 原来必须在定义一个 Class 组件才可以使用.
为什么需要 Hooks ?
原来 React 推荐一些 Functional component, 内部不管理状态, 通过父组件传入不同的 Props, 渲染不同的功能或者样式, 也叫木偶组件.
但是纯粹的木偶组件没有状态管理机制和 life-cycles, 还是会有很多不方便. 打个比方, 组件计数器 count 如果还要父组件传入并改变 Props 来实现, 那就有些不合理. 于是我们需要 Hooks.
React Hooks
Hooks 并没有断崖式升级.
1. 它是可选的. 也没有计划在未来改变 Class 组件的方式.
2. 完全的向后兼容, 它没有替代原来 React 的一些概念.
3. 开箱即用. Hooks 目前是发布在 React v16.x 的 beta 版本.
Hooks 的几种类型
1. State Hooks
这里 useState 就是一个 Hook, 可以在函数组件中使用 useState 来添加状态, useState 的输入参数是初始状态. 返回一对值, count 是状态的值, setCount 是更新对应状态的函数.
一些例子,
- function ExampleWithManyStates() {
- // Declare multiple state variables!
- const [age, setAge] = useState(42);
- const [fruit, setFruit] = useState('banana');
- const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
- // ...
- }
- 2. Effect Hooks
Side effect hooks 主要是想在 functional component 用上 life-cycles, 如 componentDidMount, componentDidUpdate, componentWillUnmount 等, 集合在一起就是 useEffect. 处理一些 render 以后的操作, 如获取数据等等.
每次 render 都会出发 useEffect 的调用. 因为 useEffect 是定义在组件的内部, 所以 Props 和 State 都可以在 useEffect 的内部访问到.
Hooks 的规则
1. hooks 做用顶级函数调用, 不要在 loops, 条件, 和嵌套函数里调用.
2. 只在函数组件里使用 hooks, 在 Class 组件里不要用 hooks.
来源: http://www.mzh.ren/1a4bdbdc998a.html