自定义钩子，特别是状态管理，在 React 中是必不可少的。 每个显示和更新数据的组件都有自己的状态，带有 setter 函数和实际阶段。 当我第一次开始使用 React 时，我只知道 useState() 和 useEffect() 钩子，但现在我几乎每天都在使用它们。

在 BitRaptors，我们密切关注最小的细节。我们遵循清洁代码原则和命名约定，所以基本上我们编写的代码可以随时移交给另一个开发团队，让他们继续工作。是的。我们绝对讨厌终端警告。

对于我们最新的项目，我们使用 Next.js 而不是 React，我开始注意到一个有趣的警告要摆脱。当我只是想将值保存到 UI 的变量中时，应用程序删除了以下警告：

... 对象使 useEffect Hook 的依赖项

每次渲染都会改变。要解决此问题，请包装初始化

of ... 在它自己的 useMemo() 钩子中。

我对这个 useMemo() 非常好奇，特别是因为在阅读了警告之后，很明显我应该在必要时使用具有依赖关系的东西来刷新。

我已经想通了：

您使用 useState() 和 useEffect() 声明具有初始值的状态：

const [状态，setState] = useState(null)

然后，当其他一些状态发生变化时，您可以使用 useEffect() 挂钩和依赖项来更新状态：

useEffect(() => {
  setState(state + 1)
}, [dependencies])

十分简单。

更现实的场景是当您需要在用户界面上显示和更新来自 API 的数据时。 您必须检索数据，将其保存到状态，并实现更新功能

const [data, setData] = useState(null)
const [title, setTitle] = useState(‘’)useEffect(() => {
  const _data = fetch…
  setData(_data)
  setTitle(_data.title)
}, [])
// an empty dependency array means it will run once when the component is mountedconst update = () => {
  const newData = Object.assign(data, { title })
  setData(newData)
  // …and save to database
}return(
  
  
{title}
  

     setTitle(e.target.value)} type=’text’    name=’title’>
     update()}>Update title!
  
 
)

但是，如果我们只想显示数据而不是显示和更新数据呢？

setState 函数将无用； 它只会在第一次渲染时被调用来设置状态，就是这样，不再更新。

这就是 useMemo() 钩子发挥作用的地方。 它类似于状态，但没有 setter 函数，当您只想在 UI 上显示数据但希望它是响应式的（感谢 useEffect() 依赖数组）时，它更有用。

所以，假设我们只想显示来自 API 的信息，并且我们想为此使用 useMemo() 钩子

// fetching data...const title = useMemo(() => {
  return data.title
}, [data])

这就是它的全部。 你写的代码更少，代码更干净，但你仍然有一个反应变量，所以当 data 的值改变时，title 的值也会改变。

总之，useState() 和 useMemo() 之间的主要区别在于更新数据的需要。

我希望您发现这篇文章对您寻找新的学习材料很有用。 感谢您抽出时间来阅读！