React技巧

useState、useRef避免重复创建初始值

有时候需要确保一个对象仅被创建一次。

场景一：当创建初始 state 需要通过一系列操作生成时（例如通过一个函数计算得到初始值），避免重新创建 useState()中 的初始值。

function CreateTable(props) {
    // createRows()方法生成rows的初始值，这样写每次渲染都会调用createRows()方法，性能开销较大
    const [rows, setRows] = useState(createRows(props.count));
    // ......
}

为避免每次都重新创建rows的初始值，可以传一个函数给useState:

function CreateTable(props) {
    // ✅ createRows()方法生成rows的初始值，这样写 createRows() 只会被调用一次
    const [rows, setRows] = useState(() => createRows(props.count));
    // ......
}

写法二，React 只会在首次渲染时调用这个函数，减少了不必要的性能开销。

场景二：想要避免重新创建 useRef() 的初始值。

function CreateImage(props) {
  // ⚠️ IntersectionObserver 在每次渲染都会被创建
  const ref = useRef(new IntersectionObserver(onIntersect));
  // ...
}

useRef不会像 useState 那样接受一个特殊的函数重载。可以编写自己的函数来创建并将其设为惰性的：

function CreateImage(props) {
    const ref = useRef(null);
    // ✅ IntersectionObserver 只会被惰性创建一次
    function getObserver() {
        if(ref.current === null) {
            ref.current = new IntersectionObserver(onIntersect);
        }
        return ref.current;
    }
    // 当需要的时候调用getObserver()方法
    // ......