- Hook是什么?是一个特殊的函数,可以在函数组件中让你“钩入”React的特性(如React state和生命周期等特性)。比如useState是允许你在React函数组件中添加state的Hook。
- 什么时候用Hook?如果在编写函数组件时意识到需要给它加一些state,以前的做法是必须转化为class,现在可以在现有的函数组件中使用Hook。
useState
- useState与class里面的this.state提供的功能完全相同,一般在函数退出后变量就会消失,而state中的变量会被React保留。
- useState里面唯一的参数就是初始state
const [count , setCount] = useState(0)
。可以用数字或字符串来对其进行赋值。如果我们想要在 state 中存储两个不同的变量,只需调用 useState() 两次即可。 - useState的返回值是当前state以及更新state的函数。与class中的this.state和this.setState类似。
- 读取state:在class中可能需要用this.state.count,而在函数中,可以直接使用count.
useEffect
- useEffect 就是一个 Effect Hook,给函数组件增加了操作副作用的能力(最常见的就是向服务器请求数据)。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途,只不过被合并成了一个 API。
- useEffect可以通过返回一个函数来指定如何“清楚”副作用。
Hook的使用规则
- 只能在函数最外层调用Hook,不要在循环、条件判断或者子函数中调用;
- 只能在React的函数组件中调用Hook,不要在JS函数中调用。
自定义Hook
- 如果函数的名字是以use开头并调用其他Hook,我们就说这是一个自定义Hook。如表单处理、动画、订阅声明、计时器。
其他Hook
- useContext让你不用组件嵌套就能订阅React的Context。
- useReducer可以通过reducer来管理本地的复杂state。
为什么要用函数组件?React团队希望,组件不要变成复杂的容器,最好只是数据流的管道,开发者根据需要,组合管道即可。组件的最佳写法应该是函数,而不是类。函数组件最好是纯函数,如果需要外部功能和副作用,就用钩子把外部代码钩进来。