useEffect中监听类组件中数据的变化失效？

Question

类组件：

export default class Team {
    constructor(
      name, //名称
      companyName, //单位名称
    ) {
      this.name = name
      this.companyName = companyName
    }
  
    getName() {
      return this.name;
    }
    getCompanyName() {
      return this.companyName;
    }
  
  
    setName(name) {
      this.name = name;
    }
    setCompanyName(companyName) {
      this.companyName = companyName;
    }
  }

纯函数组件：

import React, { useState,useEffect, useRef ,useCallback } from 'react';
import Team from '../../model/Team';
const Home = () => {
    const team = new Team()
    const [newName, setNewName] = useState("");

    const inputValue=useRef(null)
    
    useEffect(() => {
      console.log("11111111",team )
    }, [team])  //**********问题在这里：输入框值变化时，监听不到team值变化
  return (
    <div>
        <input
            ref={inputValue}
            value={team.getName()}
            onChange={(e)=>{
                // console.log("e",e.target.value)
                team.setName(e.target.value)
                console.log("change",team)//此处正常打印改变后的team内的值

            }}
        />
        <div
          onClick={()=>{
            console.log("打印点我", team)
            console.log("1111",inputValue.current.value)
          }}
        >
          {team.getName()}
        </div>
    </div>
  )
}
export default Home;

Answer 1

useEffect 的第二个数组参数里，进行的是浅比较。team实例一直没变化，所以就出现了你说的那个情况。

解决的方式有很多，最主要的是理解下 hooks 函数组件的渲染机制：team 相当于独立与每次渲染周期之外的一个变量。

再者，最好也不要把 useEffect 简单理解为起监听的作用。

具体解决方案可直接参考：https://www.benmvp.com/blog/o...