react实现组件状态缓存的示例代码

下面是实现组件状态缓存的示例代码攻略：

1. 使用React hooks实现组件状态缓存

React中提供了一个useMemo hooks，用于缓存计算结果，可以用来实现组件状态的缓存。

示例1

下面是一个展示当前时间的组件Clock，在每次渲染时都会重新计算时间，可以用useMemo来缓存计算结果，避免多次重复计算：

import React, { useMemo, useState } from 'react';

function Clock() {
  const [count, setCount] = useState(0);

  const time = useMemo(() => {
    return new Date().toLocaleTimeString();
  }, []);

  return (
    <div>
      <p>当前时间是：{time}</p>
      <p>当前计数为：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
    </div>
  );
}

export default Clock;

注意到在useMemo的回调函数中，第二个参数传入的是一个空数组，这表示该回调函数不依赖任何状态或属性，只会在组件挂载时执行一次，后续渲染过程中不会重新计算。

示例2

如果希望对某个状态进行缓存，可以将该状态存放在useMemo中：

import React, { useMemo, useState } from 'react';

function Counter() {
  const [count, setCount] = useState(1);

  const cachedResult = useMemo(() => {
    console.log('计算新结果');
    return 'Result: ' + count * 2;
  }, [count]);

  return (
    <div>
      <p>当前计数为：{count}</p>
      <p>计算结果：{cachedResult}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
    </div>
  );
}

export default Counter;

每次render时，如果count状态发生变化，那么cachedResult的值会重新计算。这里通过console.log打印出了重新计算的日志，方便开发者观察。

2. 使用React高阶组件实现组件状态缓存

除了hooks，还可以使用React高阶组件来实现组件状态缓存。可以将状态缓存逻辑封装到一个高阶组件中，在每次渲染时判断是否需要重新计算状态值。

示例3

下面是一个示例代码，实现了一个高阶组件，用于缓存输入框的值：

import React, { useState } from 'react';

function withCache(WrappedComponent) {
  const CacheWrapper = props => {
    const [cache, setCache] = useState({});

    const handleChange = e => {
      setCache({
        ...cache,
        [e.target.name]: e.target.value
      });
    };

    return (
      <WrappedComponent
        {...props}
        cache={cache}
        handleChange={handleChange}
      />
    );
  };

  return CacheWrapper;
}

export default withCache;

该高阶组件接收一个包裹组件作为参数，将该组件包裹起来，并提供一个cache属性和handleChange方法，用于缓存组件输入框的值。

示例4

示例代码中使用该高阶组件缓存一个简单的计数器组件：

import React from 'react';
import withCache from './withCache';

function Counter({ cache, handleChange }) {
  const count = cache.count || 0;

  return (
    <div>
      <p>当前计数为：{count}</p>
      <input name="count" type="text" value={count} onChange={handleChange} />
    </div>
  );
}

export default withCache(Counter);

注意到这个计数器组件中的输入框的name属性设置为count，然后使用withCache高阶组件包裹了这个组件，在计数器组件渲染时，使用了高阶组件提供的cache属性和handleChange方法来维护输入框的值。这样可以保证输入框的值在计数器重新渲染时可以得到持久化的缓存。