当数据类属性发生变化时，如何使React组件重新渲染

Question

当数据类属性发生变化时，如何使React组件重新渲染

4

在我的TypeScript应用程序中，有一个表示一些数据的类。这个类被端到端共享（前端和后端都使用它来组织数据）。它有一个名为items的属性，它是一个数字数组。

class Data {
  constructor() {
    this.items = [0];
  }

  addItem() {
    this.items = [...this.items, this.items.length];
  }
}

我试图在我的组件中呈现这些数字，但是由于修改类实例不会导致重新渲染，所以我必须"强制重新渲染"来使新的items值被呈现出来。

const INSTANCE = new Data();

function ItemsDisplay() {
  const forceUpdate = useUpdate(); // from react-use

  useEffect(() => {
    const interval = setInterval(() => {
      INSTANCE.addItem();
      forceUpdate(); // make it work
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h1>with class:</h1>
      <div>{INSTANCE.items.map(item => <span>{item}</span>)}</div>
    </div>
  );
}

虽然这种方法可行，但存在一个主要缺点： addItem() 不是对INSTANCE 做的唯一修改；该类实际上有大约10到15个属性，代表了不同的数据部分。因此，在每次修改发生时都执行 forceUpdate() 是一场噩梦。更不用说，如果该实例将在组件外部修改，我将无法使用forceUpdate() 将更改与组件同步。

使用useState([]) 代表items将解决此问题，但是如我所说，Data 有很多属性，还有一些函数。这是另一个噩梦。

我想知道从类实例中呈现数据的最佳方法，而不需要重新渲染或将整个实例拆分为本地组件状态。

谢谢！这里有一个 Codesandbox演示，展示了使用类和本地状态之间的差异。

- Itay Ganor

看起来这个Data的items是ItemsDisplay想要用useState来管理或拥有的。 - HMR

@HMR 这是我试图避免的事情；我不想将整个实例解包到本地状态中，因为它会变得非常庞大并破坏单一真相来源。 - Itay Ganor

这句话的意思是什么：INSTANCE && INSTANCE. 是否有可能 INSTANCE 是 null？根据提供的代码，这种情况不可能发生。 - HMR

@HMR 哎呀，那是代码的另一个版本中遗留下来的。我现在已经把它删除了。 - Itay Ganor

如果可以观察数据实例的更改（添加更改侦听器），会怎样呢？这样，您就可以在组件中创建一个效果，当数据发生更改时得到通知。 - HMR

@HMR 这个怎么实现？ - Itay Ganor

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- HMR · Accepted Answer

以下是如何使Data实例可观察并在组件中使用Effect来观察Data实例项更改的示例：

const { useState, useEffect } = React;
class Data {
  constructor() {
    this.data = {
      users: [],
      products: [],
    };
    this.listeners = [];
  }

  addItem(type, newItem) {
    this.data[type] = [...this.data[type], newItem];
    //notify all listeners that something has been changed
    this.notify();
  }
  addUser(user) {
    this.addItem('users', user);
  }
  addProduct(product) {
    this.addItem('products', product);
  }
  reset = () => {
    this.data.users = [];
    this.data.products = [];
    this.notify();
  };
  notify() {
    this.listeners.forEach((l) => l(this.data));
  }
  addListener = (fn) => {
    this.listeners.push(fn);
    //return the remove listener function
    return () =>
      (this.listeners = this.listeners.filter(
        (l) => l !== fn
      ));
  };
}
const instance = new Data();
let counter = 0;
setInterval(() => {
  if (counter < 10) {
    if (counter % 2) {
      instance.addUser({ userName: counter });
    } else {
      instance.addProduct({ productId: counter });
    }
    counter++;
  }
}, 500);
//custom hook to use instance
const useInstance = (instance, fn = (id) => id) => {
  const [items, setItems] = useState(fn(instance.data));
  useEffect(
    () =>
      instance.addListener((items) => setItems(fn(items))),
    [instance, fn]
  );
  return items;
};
const getUsers = (data) => data.users;
const getProducts = (data) => data.products;
const Users = () => {
  const users = useInstance(instance, getUsers);
  return <pre>{JSON.stringify(users)}</pre>;
};
const Products = () => {
  const products = useInstance(instance, getProducts);
  return <pre>{JSON.stringify(products)}</pre>;
};
const App = () => {
  const reset = () => {
    instance.reset();
    counter = 0;
  };
  return (
    <div>
      <button onClick={reset}>Reset</button>
      <div>
        users:
        <Users />
      </div>
      <div>
        products:
        <Products />
      </div>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>