1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
function B() {
console.log("render B");
return (
<div>
<h1>Hello B</h1>
</div>
);
}
function A() {
const [num, setNum] = useState(0);
const [count, setCount] = useState(0);
console.log("render A");
const handleClick = () => {
// 1.
// setNum(num + 1);
// setCount(count + 1);
// ------------------------
// 2.
// setNum(num);
// setCount(count);
// ------------------------
// 3.
// setNum(num + 1);
// setCount(count);
// ------------------------
// 4.
// setNum(num);
// setCount(count + 1);
};
return (
<div>
<h1 style={{ backgroundColor: "#eee" }} onClick={handleClick}>
Hello A
</h1>
<B count={count} />
</div>
);
}
export default function App() {
return (
<div className="App">
<A />
</div>
);
}
|