1.state hook : set同一變量的話不重新render
import React, { useState } from 'react';
export default function Test() {
const [count, setCount] = useState({ c: 0 });
const add = () => {
console.log('count', count);
setCount({ ...count, c: count.c + 1 }); // 方式1
// setCount(Object.assign(count, { c: count.c + 1 })); // 方式2
};
return (
<div>
<button onClick={add}>加一加一</button>
<div>{count.c}</div>
</div>
);
}
- 方式1：點擊按鈕，正常渲染狞膘，div里面的數(shù)值加1，打印出的count里面的c值也加1
- 方式2：點擊按鈕什乙，不渲染喜滨，div里面的數(shù)值不變雾袱，打印出的count里面的c值卻是加1了。
- 總結(jié)：state hook設(shè)置值，如果值不變（Object.assign返回的是目標(biāo)對象茎毁，也就是第一個參數(shù)，因此前后對象地址不變）是不觸發(fā)重新渲染的参歹，但是值是設(shè)置進去了
2.effect hook : 監(jiān)聽變化對象
import React, { useState } from 'react';
import Child from './Child.js';
export default function Test() {
const [number, setNumber] = useState({ n: 0 });
const [total, setTotal] = useState(0);
const cut = () => {
setNumber({ ...number, n: number.n - 1 });
};
const obj = {};
return (
<div>
<button onClick={cut}>減一減一</button> //操作1
<button onClick={() => setTotal(prev => prev + 1)}>addTotal</button> //操作2
<div>{number.n}</div>
<Child count={number}></Child> // 情況1
<Child count={{ ...number }}></Child> // 情況2
<Child count={Object.assign(obj, number)}></Child> // 情況3
<Child count={obj}></Child> // 情況4
<Child count={{}}></Child> // 情況5
</div>
);
}
// Child.js
import React, { useEffect } from 'react';
export default function Child({ count }) {
useEffect(() => {
console.log('count', count);
}, [count]);
return <div>888</div>;
}
__結(jié)果:
- 操作1： 以上5種情況勾哩，子組件里面的count都變化了，說明傳入進來的對象的地址每次都不一樣褒繁。每次render時Test函數(shù)都會執(zhí)行一遍亦鳞，也就是會進行一次render。情況1之所以變化了是因為修改的正是子組件監(jiān)聽的值
- 操作2：情況2棒坏，3燕差，4，5子組件里面count變化了坝冕，情況1并沒有變化徒探，說明其他值（total）導(dǎo)致的render不會影響其他state中的對象（number）變化。
3.effect hook : 監(jiān)聽不變化對象
import React, { useState } from 'react';
import Child from './Child.js';
const obj2 = {};
export default function Test() {
const [number, setNumber] = useState({ n: 0 });
const cut = () => {
setNumber({ ...number, n: number.n - 1 });
};
return (
<div>
<button onClick={cut}>減一減一</button>
<div>{number.n}</div>
<Child count={obj2}></Child> // 情況1
<Child count={Object.assign(obj2, number)}></Child> // 情況2
</div>
);
}
// Child.js
import React, { useEffect } from 'react';
export default function Child({ count }) {
useEffect(() => {
console.log('count', count);
}, [count]);
return <div>888</div>;
}
結(jié)果:以上情況喂窟，子組件里面的count都未變化测暗，說明傳入進來的對象的地址每次都一樣央串。因為變量是在函數(shù)外面定義的，每次render時執(zhí)行Test函數(shù)碗啄，并不會重新定義變量质和。
