react hook使用感受

大牛文章推荐

从开始用 react hook 到现在有一段时间了，一直没太理解 hook 的好处在哪里，感觉就是另外一种写 class 的方式，所以仍然按照写 class 的思路在写 hook。

直到最近看了蚂蚁金服的这篇技术分析，有了一种醍醐灌顶的感觉。原来 hook 应该这么用啊，确实简单多了。文章推荐给大家。

setState 和 useState

本来写到这就结束了，恰巧又遇到了一个 hook 相关的问题，感觉也很不错，分享给大家。

大家都知道 setState 是个异步的过程，setState 结束后立马获取 state 数据可能还是更新之前的。解决方法就是给 setState 传第二个参数，该参数是个函数，里面可以拿到更新后的 state。比如这种：

handleChangeShare (type, value) {
  this.setState(
    {
      shareData: {
        ...this.state.shareData,
        [type]: value
      }
    },
    () => {
      const {shareDataFromServer, shareData} = this.state
      const { serverTitle, serverContent } = shareDataFromServer
      const { title: localTitle, content: localContent } = shareData
      // 拿到更新后的shareData数据，跟另一个数据做比较
      if (serverTitle === localTitle && serverContent === localContent) {
        this.setState({shareBtnDisable: true})
      } else {
        this.setState({shareBtnDisable: false})
      }
    }
  )
}

当我们用 useState 来改写时怎么处理呢，useState 也是个异步的过程，但是没有第二参数。怎么解决呢？

答案是用 useEffect，废话少说上代码：

useEffect(() => {
  const {serverTitle, serverContent} = shareDataFromServer
  const {title: localTitle, content: localContent} = shareData
  if (serverTitle === localTitle && serverContent === localContent) {
    setShareBtnDisable(true)
  } else {
    setShareBtnDisable(false)
  }
}, [shareData])

const handleChangeShare = (shareType, value) => {
  setShareData(prevShareData => ({
    ...prevShareData,
    [shareType]: value
  }))
}

是不是很简单啊，转换一下固有思路，不要用旧的思路来写 react hook。之前一直把 useEffect 当成 componentDidMount 或者 componentDidUpdate 来用，只用来操作 dom 或处理网络请求，看来是把 useEffect 小瞧了。

react 的官方文档里写的很详细，有时间还是要仔细看看。