Question

我需要手动重新渲染这个状态。

const [person] = React.useState(new Person());

我在 Person 类中有方法来更新它（例如 person.setName('Tom')）。当我使用自身的方法更新 person 时，它不会触发对 person 状态的重新渲染。

const carouselData = React.useMemo(() => {
  // Doesn't re-render when the fields on the person class update
}, [person]);

有没有办法在不使用 setState 函数的情况下强制重新渲染这个状态？理想情况下，有没有办法从 Person 类本身内部调用重新渲染？

或者这是否完全滥用了 useState 功能？有没有更好的 React hook 来连接它？

谢谢！

Answer 1

您确实错过了使用它，React 严重依赖于函数式编程。你应该做这样的事情：

const [person, setPerson] = useState(new Person());
...
setPerson(setPersonName(person, 'Tom'));

这只是一个愚蠢的例子，但你明白了要点。 react 只会在 state 改变时重新渲染，它不会监控 state 对象是否正在发生变化或任何类似 angularjs 曾经做过的事情

Answer 2

Person 可以是道具或上下文。首先在组件之外创建实例。

const person = new Person([]);

然后将 person 作为道具传递。

function App({person}) {
  const [personName, setPersonName] = useState(person.personName);

  function handleNameChange(txt) {
    person.addTodo(txt);
    setPersonName(person.personName);
  }

  function handleSubmit(txt) {
    handleNameChange(txt);
  }
  
  return (...)
}

重新渲染 React useState 而不更新状态

2 个答案: