React Context 未将类更新为值

Question

我有一个使用类实例作为上下文值的上下文。在我更新了类实例之后。这种变化不会反映在消费者身上。消费者仍然获得旧的类价值。有人可以指出如何实现这一目标的方向吗？

// Service class
class Service {
   name = "oldName"
   function changeName(newName){
       this.name = newName;
   }
}

//Context provider
function App() {
  const service = new Service();
  return (
    <ServiceContext.Provider value={service}>
      <Home />
    </ServiceContext.Provider>
  );
}

然后我尝试在一个组件中更改此服务的名称属性。

import React, { useContext } from "react";

const SomeComponent = () => {
  const service = useContext(ServiceContext);
  const onClick = () => {
    service.changeName('newName')
    console.log(service.name) //here the name has updated
  }
  return <button onClick={onClick}>Change</h1>;
};

并尝试从组件中获取更新后的值。

//Context consumer
import React, { useContext } from "react";

const MyComponent = () => {
  const service = useContext(ServiceContext);

  return <h1>{service.name}</h1>;
};

但在另一个消费者中。 service.name 没有得到更新。我可以知道这是为什么吗？

Answer 1

这不是 React 的工作方式，它不是“真正的反应式”，仅仅因为你改变了一个值并不意味着组件会重新渲染。

导致重新渲染的唯一方法是使用 React 的 API。

见Rendering a Component in docs。

class Service {
  name = "oldName";
  changeName(newName) {
    this.name = newName;
  }
}

const service = new Service();

// Provider
function App() {
  const [, render] = useReducer(p => !p, false);
  return (
    <ServiceContext.Provider value={{ service, render }}>
      <SomeComponent />
    </ServiceContext.Provider>
  );
}

// Usage
const SomeComponent = () => {
  const { service, render } = useContext(ServiceContext);
  const onClick = () => {
    service.changeName("newName");
    render();
  };
  return <button onClick={onClick}>{service.name}</button>;
};