React Hooks
Hook 是能让你在函数组件中“钩入” React 特性的函数。
State Hook
- useState 不能存在于条件判断语句中，是按照顺序记忆的
- Hook 在 class 内部是不起作用的，但是可以使用 hook 取代 class
- 在函数组件中，没有 this，所以不能分配和读取 this.state，直接调用 useState Hook
import React, { useState } from 'react'; function example() { // 声明一个叫做 count 的 state 变量 // React 在重新渲染的时候会记住 count 当前的值，并提供最新的值给我们的函数 // 通过调用 setCount 来更新当前的 count const [count, setCount] = useState('apple'); // 在函数中，直接用 count 读取 count 的值，而不是通过 this.state.count 的方式。 return ( <p>want an {count}</p> ) } - 定义 state 变量的时候，等号左边的名字并不是 React API 的部分，可以自己取名字。这种 JS 语法叫做数组解构。它意味着我们同时创建了 count 和 setCount 两个变量, count 的值为 useState 返回的第一个值, setCount 是返回的第二个值。它等价于下面代码：
var fruitStateVariable = useState(0) var count = fruitStateVariable[0] var setCount = fruitStateVariable[1] - 使用 hook 存储多个不同的变量，就需要调用 useState() 多次。可以同时给不同的 state 变量去不同的名称，并且可以单独更新它们。
function ExampleWithManyStates() { // 声明多个 state 变量 const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: '学习 Hook' }]);function handleOrangeClick() { // 和 this.setState({ fruit: 'orange' }) 类似 setFruit('orange'); }
Effect Hook
Effect Hook 可以让你在函数组件中执行副作用操作
- Effect Hook 可以看做是 componentDidMount, componentDidUpdate, componentWillMount 这三个 React class 生命周期函数的组合
- React 组件中有两种副作用操作：需要清除的和不需要清除的。
- React 会保存我们传递的 effect 函数，并且在执行首次 DOM 渲染 (componentDidMount)和每次更新导致的重新渲染 (componentDidUpdate)都会调用它。
- 传递给 useEffect 的函数在每次渲染中都会有所不同，因为每次重新渲染，都会给你新的 effect，替换掉之前的。
- 使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这会让应用看起来更快。而之前的 componentDidMount 或 componentDidUpdate 则是同步执行的
React 的清除机制
- 在 class 中，通常会在 componentDidMount 中设置订阅，并在 componentDidWillUnmount 中清除它
- effect 中返回一个函数，是 effect 可选的清除机制，每个 effect 都可以返回一个清除函数。React 会在组件卸载的时候执行清除操作。
useEffect(() => {
document.title = `You clicked ${count} times`
}, [count]); // 只有当 count 的值发生改变时，才会重新执行 `document.title` 这一句
这里有一点需要重视，componentWillUnmount 只会在组件被销毁前执行一次，而 useEffect 里的函数，每次组件渲染后都会执行一遍，包括副作用函数返回的这个清理函数也会重新执行一遍。
useEffect 接受第二个数组类型的参数，仅有在数组中变量发生改变时，才会重新订阅。如果想执行只运行一次的 effect, 也就是说仅在组件挂载（componentDidMount）和卸载（componentWillUnmount时执行），可以传递一个空数组（[]）作为第二个参数。不过这种用法可能带来 bug，少用。
其他的 Effect Hooks
除了上文介绍的 useState 和 useEffect，react 还给我们提供了很多有用的 Hooks：
useContext useReducer useCallback useMemo useRef useImperativeMethods useMutationEffect useLayoutEffect
Hook 规则
- 只在最顶层使用 Hook，不要在循环、条件或嵌套函数中调用 Hook。这样就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。
- 只在 React 函数中调用 Hook，不要在普通的 JavaScript 函数中调用 Hook。
自定义 Effect Hooks
将复用的逻辑抽离出来，哪个组件要用，就在哪个组件里面使用
- 自定义 Hook 是一个函数，其名称必须以 "use" 开头，函数内部可以调用其他的 Hook。
- 在两个组件中使用相同的 Hook 不会共享 state。自定义 Hook 是一种重用状态逻辑的机制（例如设置为订阅并存储当前值），所以每次使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的。
网友评论