import React, {useEffect, useState} from 'react';
import Editor from 'ewt-question-tinyeditor';
export default () => {
const [data, setData] = useState({name: 1});
const [list, setList] = useState([]);
useEffect(() => {
console.log(data, 'data--------');
console.log(list,'---list');
}, [data]);
return (
<div>
<div onClick={() => {
setData({name: new Date()});
setList([{age: new Date()}]);
}}>
点击修改data数据
</div>
<div onClick={() => {
setList([{age: new Date()}]);
}}>
点击修改list数据
</div>
</div>
);
};
- 我先点击一次修改list数据,更新list数据
- 点击一次修改data数据,更新list和data数据
- 有个疑问 :
然后useEffect中因为依赖的数据data修改了,
打印的data是最新的数据,
为什么打印出来的list数据也是最新的
不是useEffect的第二个参数中的依赖没有list,luseEffect函数中的list不是应该是旧的吗?
这里的两个 useState 在一起调用更新,避免过多的组件重复渲染, React 内部将其合并批量更新数据。所以当 data 更新的同时 list 也一起更新了。