React 进阶系列：Hooks 该怎么用

KieSun commented 5 years ago

这是 React 进阶系列的第一篇文章，这个系列内容会包括一些 React 的新知识以及原理内容，有兴趣的可以持续关注。

注意：Hooks 在 React 16.8 版本中才正式发布

为什么要用 Hooks

组件嵌套问题

之前如果我们需要抽离一些重复的逻辑，就会选择 HOC 或者 render props 的方式。但是通过这样的方式去实现组件，你打开 React DevTools 就会发现组件被各种其他组件包裹在里面。这种方式首先提高了 debug 的难度，并且也很难实现共享状态。

但是通过 Hooks 的方式去抽离重复逻辑的话，一是不会增加组件的嵌套，二是可以实现状态的共享。

class 组件的问题

如果我们需要一个管理状态的组件，那么就必须使用 class 的方式去创建一个组件。但是一旦 class 组件变得复杂，那么四散的代码就很不容易维护。另外 class 组件通过 Babel 编译出来的代码也相比函数组件多得多。

Hooks 能够让我们通过函数组件的方式去管理状态，并且也能将四散的业务逻辑写成一个个 Hooks 便于复用以及维护。

Hooks 怎么用

前面说了一些 Hooks 的好处，接下来我们就进入正题，通过实现一个计数器来学习几个常用的 Hooks。

useState

useState 的用法很简单，传入一个初始 state，返回一个 state 以及修改 state 的函数。

// useState 返回的 state 是个常量
// 每次组件重新渲染之后，当前 state 和之前的 state 都不相同
// 即使这个 state 是个对象
const [count, setCount] = useState(1)

setCount 用法是和 setState 一样的，可以传入一个新的状态或者函数。

setCount(2)
setCount(prevCount => prevCount + 1)

useState 的用法是不是很简单。假如现在需要我们实现一个计数器，按照之前的方式只能通过 class 的方式去写，但是现在我们可以通过函数组件 + Hooks 的方式去实现这个功能。

function Counter() {
    const [count, setCount] = React.useState(0)
    return (
        <div>
            Count: {count}
            <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
            <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
        </div>
    );
}

useEffect

现在我们的计时器需求又升级了，需要在组件更新以后打印出当前的计数，这时候我们可以通过 useEffect 来实现

function Counter() {
    const [count, setCount] = React.useState(0)

    React.useEffect(() => {
        console.log(count)
    })

    return (
        <div>
            Count: {count}
            <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
            <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
        </div>
    );
}

以上代码当我们改变计数的时候，就会打印出正确的计数，我们其实基本可以把 useEffect 看成是 componentDidUpdate，它们的区别我们可以在下一个例子中看到。

另外 useEffect 还可以返回一个函数，功能类似于 componentWillUnmount

function Counter() {
    const [count, setCount] = React.useState(0)

    React.useEffect(() => {
        console.log(count)
        return () => console.log('clean', count)
    })

    // ...
}

当我们每次更新计数时，都会先打印 clean 这行 log

现在我们的需求再次升级了，需要我们在计数器更新以后延时两秒打印出计数。实现这个再简单不过了，我们改造下 useEffect 内部的代码即可

React.useEffect(() => {
        setTimeout(() => {
                console.log(count)
        }, 2000)
})

当我们快速点击按钮后，可以在两秒延时以后看到正确的计数。但是如果我们将这段代码写到 componentDidUpdate 中，事情就变得不一样了。

componentDidUpdate() {
        setTimeout(() => {
                console.log(this.state.count)
        }, 2000)
}

对于这段代码来说，如果我们快速点击按钮，你会在延时两秒后看到打印出了相同的几个计数。这是因为在 useEffect 中我们通过闭包的方式每次都捕获到了正确的计数。但是在 componentDidUpdate 中，通过 this.state.count 的方式只能拿到最新的状态，因为这是一个对象。

当然如果你只想拿到最新的 state 的话，你可以使用 useRef 来实现。

function Counter() {
    const [count, setCount] = React.useState(0)
    const ref = React.useRef(count)

    React.useEffect(() => {
        ref.current = count
        setTimeout(() => {
                console.log(ref.current)
        }, 2000)
    })

    //...
}

useRef 可以用来存储任何会改变的值，解决了在函数组件上不能通过实例去存储数据的问题。另外你还可以 useRef 来访问到改变之前的数据。

function Counter() {
    const [count, setCount] = React.useState(0)
    const ref = React.useRef()

    React.useEffect(() => {
        // 可以在重新赋值之前判断先前存储的数据和当前数据的区别
        ref.current = count
    })

    <div>
            Count: {count}
            PreCount: {ref.current}
            <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
            <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </div>

    //...
}

现在需求再次升级，我们需要通过接口来获取初始计数，我们通过 setTimeout 来模拟这个行为。

function Counter() {
    const [count, setCount] = React.useState();
    const [loading, setLoading] = React.useState(true);

    React.useEffect(() => {
        setLoading(true);
        setTimeout(() => {
            setCount(1);
            setLoading(false);
        }, 2000);
    });
    return (
        <div>
            {!loading ? (
                <div>
                    Count: {count}
                    <button onClick={() => setCount(pre => pre + 1)}>+</button>
                    <button onClick={() => setCount(pre => pre - 1)}>-</button>
                </div>
            ) : (
                <div>loading</div>
            )}
        </div>
    );
}

如果你去执行这段代码，会发现 useEffect 无限执行。这是因为在 useEffect 内部再次触发了状态更新，因此 useEffect 会再次执行。

解决这个问题我们可以通过 useEffect 的第二个参数解决

React.useEffect(() => {
        setLoading(true);
        setTimeout(() => {
            setCount(1);
            setLoading(false);
        }, 2000);
}, []);

第二个参数传入一个依赖数组，只有依赖的属性变更了，才会再次触发 useEffect 的执行。在上述例子中，我们传入一个空数组就代表这个 useEffect 只会执行一次。

现在我们的代码有点丑陋了，可以将请求的这部分代码单独抽离成一个函数，你可能会这样写

const fetch = () => {
        setLoading(true);
        setTimeout(() => {
            setCount(1);
            setLoading(false);
        }, 2000);
}

React.useEffect(() => {
        fetch()
}, [fetch]);

但是这段代码出现的问题和一开始的是一样的，还是会无限执行。这是因为虽然你传入了依赖，但是每次组件更新的时候 fetch 都会重新创建，因此 useEffect 认为依赖已经更新了，所以再次执行回调。

解决这个问题我们需要使用到一个新的 Hooks useCallback。这个 Hooks 可以生成一个不随着组件更新而再次创建的 callback，接下来我们通过这个 Hooks 再次改造下代码

const fetch = React.useCallback(() => {
        setLoading(true);
        setTimeout(() => {
            setCount(1);
            setLoading(false);
        }, 2000);
}, [])

React.useEffect(() => {
        fetch()
}, [fetch]);

大功告成，我们已经通过几个 Hooks + 函数组件完美实现了原本需要 class 组件才能完成的事情。

总结

通过几个计数器的需求我们学习了一些常用的 Hooks，接下来总结一下这部分的内容。

useState：传入我们所需的初始状态，返回一个常量状态以及改变状态的函数
useEffect：第一个参数接受一个 callback，每次组件更新都会执行这个 callback，并且 callback 可以返回一个函数，该函数会在每次组件销毁前执行。如果 useEffect 内部有依赖外部的属性，并且希望依赖属性不改变就不重复执行 useEffect 的话，可以传入一个依赖数组作为第二个参数
useRef：如果你需要有一个地方来存储变化的数据
useCallback：如果你需要一个不会随着组件更新而重新创建的 callback

另外我还封装了几个常用的 Hooks API，有兴趣的可以阅读下代码，仓库中的代码会持续更新。

最后

我们通过这篇文章学习了如何使用 Hooks，如果你还有什么疑问欢迎在评论区与我互动。

我所有的系列文章都会在我的 Github 中最先更新，有兴趣的可以关注下。今年主要会着重写以下三个专栏

重学 JS
React 进阶
重写组件

最后，觉得内容有帮助可以关注下我的公众号「前端真好玩」咯，会有很多好东西等着你。

RetroAstro commented 5 years ago

@KieSun

另外 useEffect 还可以返回一个函数，功能类似于 componentWillUnmount

这里好像有错吧，useEffect 返回的函数应该是在每次组件更新 (类似于 componentDidUpdate ) 之后，下一次 effect 函数执行之前都会被 cleanup 一次，所以功能不是类似于 componentWillUnmount 。

附一张图：

KieSun commented 5 years ago

@KieSun

另外 useEffect 还可以返回一个函数，功能类似于 componentWillUnmount

这里好像有错吧，useEffect 返回的函数应该是在每次组件更新 (类似于 componentDidUpdate ) 之后，下一次 effect 函数执行之前都会被 cleanup 一次，所以功能不是类似于 componentWillUnmount 。

附一张图：

你可以看到这张图里 cleanup effects 这块和 Unmount 是连在一起的

RetroAstro commented 5 years ago

emmm ... 好像是这样，但 cleanup 函数感觉还是主要用于组件更新之间，虽然组件卸载的时候也会执行，就感觉有点不严谨 😂

ghost commented 5 years ago

不止这些吧，希望能补全

eldyvoon commented 5 years ago

不明白为什么用useCallback

const fetch = React.useCallback(() => {
        setLoading(true); // 为啥？
        setTimeout(() => {
            setCount(1);
            setLoading(false);
        }, 2000);
}, [])

React.useEffect(() => {
        fetch()
}, [fetch]);

loading state 本身就是true，为啥重设loading为true呢？useCallback例子可以更好。

christolan commented 4 years ago

不明白为什么用useCallback
const fetch = React.useCallback(() => {
      setLoading(true); // 为啥？
      setTimeout(() => {
          setCount(1);
          setLoading(false);
      }, 2000);
}, [])

React.useEffect(() => {
      fetch()
}, [fetch]);
loading state 本身就是true，为啥重设loading为true呢？useCallback例子可以更好。

这里应该是 loading 的初始状态设置的不是很好，应该是初始时 loading 是 false。

作者的意思是进入这个函数的时候，把 loading 设置成 ture，模拟我们发出了一个网络请求，请求此时是 pending 的，用 setTimeout 模拟异步请求的延时，延时完毕后设置 loading 为 false 表示请求此时已经是正确返回了。

我自己感觉，这里作者使用 useCallback 没啥问题，但是也如你所说，这不是 useCallback 最佳的例子，因为这里明显可以把 fetch 函数的内容直接写在 useEffect 里面。

useCallback 更合适的例子是子组件需要一个回调函数，如果在 FunctionComponent 内生成一个函数，就会在每次 rerender 的时候都生成新函数，同时还有了新的函数引用，不仅有多余的计算，还触发了子组件的重新渲染。useCallback 就可以解决这个问题。

DerrickTel commented 4 years ago

请问一下，useRef获取的dom节点怎么清空

KieSun / Dream