React hooks - 当对象集合中的嵌套属性发生更改时触发 useEffect

React hooks是一种用于处理状态和副作用的新特性，它可以使函数组件具有类组件的一些功能。其中，useEffect是React hooks中的一个重要函数，用于处理副作用操作。副作用操作是指对外部资源的访问，比如网络请求、订阅事件等。在本文中，我们将介绍如何通过使用React hooks中的useEffect函数来监听对象集合中嵌套属性的更改，并在更改发生时执行相应的操作。

javascript
import React, { useState, useEffect } from 'react';
function PersonComponent() {
  const [person, setPerson] = useState({ name: 'John', age: 30 });
  useEffect(() => {
    console.log('Name changed:', person.name);
  }, [person.name]);
  return (
    
      
Name: {person.name}
      
Age: {person.age}
       setPerson({ ...person, name: 'Alice' })}>
        Change Name
      
    
  );
}
export default PersonComponent;

javascript
import React, { useState, useEffect } from 'react';
function PersonComponent() {
  const [person, setPerson] = useState({ name: 'John', age: 30 });
  useEffect(() => {
    console.log('Name or age changed:', person.name, person.age);
  }, [person.name, person.age]);
  return (
    
      
Name: {person.name}
      
Age: {person.age}
       setPerson({ ...person, name: 'Alice', age: 25 })}>
        Change Name and Age
      
    
  );
}
export default PersonComponent;