javascript - 为什么即使在 Prop 对象更改后功能组件也不会重新渲染？

Question

我有一个对象构造函数，它具有修改值的方法。我在 react 组件中创建了该对象的新实例，并在子组件中呈现该计数器。当我从子对象调用方法时，它在对象中得到更新，但新更新的值没有重新呈现。我尝试使用 useEffect 来监听 props 的变化，但它在值更新时被调用。但是当我更改子组件中的状态时，会显示更新的值。有什么问题？

function Core() {
  this.counter = 0;
}

Core.prototype.handleCounter = function(options) {
  this.counter = this.counter + 1;
  console.log(this.counter);
};

export default function App() {
  let core = new Core();
  return (
    <div className="App">
      <Status counter={core.counter} core={core} />
    </div>
  );
}

App.js

import React, { useEffect } from "react";
import "./styles.css";

export default function Status({ core, counter }) {
  const [localState, setLocal] = React.useState(false);
  function handleButton() {
    core.handleCounter();
    console.log(core.counter);
  }
  return (
    <div>
      <span> counter is {core.counter}</span>
      <button onClick={() => handleButton()}>update object</button>
      <button
        onClick={() => {
          setLocal(!localState);
        }}
      >
        toggle localState
      </button>
    </div>
  );
}

状态.js

这是一个代码沙盒 url:https://codesandbox.io/s/quizzical-bash-qh8mn

Answer 1

React 不知道 Core 是如何工作的；它看到一个变量 let core = new Core(); 一旦创建就永远不会改变，所以 React 永远不知道什么时候更新。

您似乎开始使用 Core 构建中央商店，因此您可能需要查看 useReducer处理您不断增长的用例:

const initialState = {
  counter: 0;
};

function reducer(state, action) {
  switch (action.type) {
    case "handleCounter":
      return {
        ...state,
        counter: state.counter + 1,
      };
    default:
      return state;
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  function handleCounter() {
    dispatch("handleCounter");
  }

  return (
    <div className="App">
      <Status counter={state.counter} handleCounter={handleCounter} />
    </div>
  );
}