Jotai

React 原始而灵活的状态管理

atomWithCompare

atomWithCompare创建一个原子，当自定义比较函数areEqual(prev, next)为假时触发更新。

这可以帮助你通过忽略对你的应用程序无关紧要的状态变化，避免不必要的重新渲染。

注意：Jotai在发生变化时内部使用Object.is来比较值。如果areEqual(a, b)返回假，但Object.is(a, b)返回真，Jotai将不会触发更新。

import { atomWithReducer } from 'jotai/utils'

export function atomWithCompare<Value>(
  initialValue: Value,
  areEqual: (prev: Value, next: Value) => boolean,
) {
  return atomWithReducer(initialValue, (prev: Value, next: Value) => {
    if (areEqual(prev, next)) {
      return prev
    }

    return next
  })
}

这是你如何使用它来创建一个忽略浅相等更新的原子：

import { atomWithCompare } from 'XXX'
import { shallowEquals } from 'YYY'
import { CSSProperties } from 'react'

const styleAtom = atomWithCompare<CSSProperties>(
  { backgroundColor: 'blue' },
  shallowEquals,
)

在一个组件中：

const StylePreview = () => {
  const [styles, setStyles] = useAtom(styleAtom)

  return (
    <div>
      <div styles={styles}>Style preview</div>

      {/* 点击这个按钮两次只会触发一次渲染 */}
      <button onClick={() => setStyles({ ...styles, backgroundColor: 'red' })}>
        设置背景为红色
      </button>

      {/* 点击这个按钮两次只会触发一次渲染 */}
      <button onClick={() => setStyles({ ...styles, fontSize: 32 })}>
        放大字体
      </button>
    </div>
  )
}

JotaiJotai

atomWithCompare

Jotai