React hooks render行为实验
今天放假有点空，对React的渲染(render)和hooks的行为作了几个简单的小实验，记录如下。
1. 实验准备
1.1 环境
- Node 12.14
- List item
- Yarn 1.21.1
- Chrome 80.0.3987.149
1.2 测试项目
1.2.1 项目初始化
通过 yarn create react-app test生成项目脚手架。
- react： 16.13.0
1.2.2 组件准备
- 根组件 APP
const App = () => {
console.log('Rendering B1...');
return (
<div id="app">
</div>
);
};
- 组件C1
const C1 = () => {
console.log('Rendering C1...');
return (
<div className="C1">
<div>This is C1!</div>
</div>
);
};
- 组件C2
const C2 = () => {
console.log('Rendering C2...');
return (
<div className="C2">
This is C2!
</div>
);
};
- 受控按钮组件B1, 显示的数字会根据点击次数变化
const B1 = () => {
const [count, setCount] = useState(0);
console.log('Rendering B1...');
return (
<div className="B1">
<button onClick={() => setCount(count + 1)} >{count}</button>
</div>
);
};
- Context TestContext
2. 测试用例及结果
2.1 静态测试
步骤：
- 把C1 放入App,
- C2 放入C1
- 观察console输出。
结果：
Rendering App...
Rendering C1...
Rendering C2...
结论：
静态无变化，只执行渲染一次
2.2 组件状态（state）的影响
2.2.1 对组件本身及父组件
步骤：
- 把B1 放入App
- 点击B1按钮2次
- 观察console输出
结果：
Rendering App...
Rendering B1...
Rendering B1...
Rendering B1...
结论：
对于B1来说初始化执行渲染一次，每点击一次，本身state变化导致渲染一次。
父组件App不受B1变化影响
2.2.2 对子组件的影响
步骤：
- 把B1 放入App
- 把C1放入B1
- 点击B1按钮
- 观察console输出
结果：
Rendering App...
Rendering B1...
Rendering C1...
Rendering B1...
Rendering C1...
结论：
对于B1的子组件C1来说初始化执行渲染一次，每点击一次，父组件state变化导致渲染一次。
2.2.4.对孙组件的影响
步骤：
- 把B1 放入App
- 把C1放入B1
- 把C2放入C1
- 点击B1按钮
- 观察console输出
结果：
Rendering App...
Rendering B1...
Rendering C1...
Rendering C2...
Rendering B1...
Rendering C1...
Rendering C2...
结论：
对于B1的孙组件C2来说初始化执行渲染一次，每点击一次，祖父组件state变化导致渲染一次。
2.2.4 对兄弟组件的影响
步骤：
- 把B1 放入App
- 把C1放入App
- 把C2放入C1
- 点击B1按钮
- 观察console输出
结果：
Rendering App...
Rendering B1...
Rendering C1...
Rendering C2...
Rendering B1...
结论：
对于B1的兄弟组件C2来说B1的State变化对它没有影响。
2.2.5 React.memo()包装
步骤：
- 把B1 放入App
- 把C1用React.memo()包装成C1m
const C1m = React.memo(C1);
- 把C1m放入B1
- 把C2放入C1
- 点击B1按钮
- 观察console输出
结果：
Rendering App...
Rendering B1...
Rendering C1...
Rendering C2...
Rendering B1...
结论：
React.memo()的包装保护了子组件，使其避免无关渲染
2.3 组件属性（props）变化的影响
2.3.1 对组件本身及父组件
步骤：
- 为C1增加属性p1
const C1 = ({p1}) => {
console.log('Rendering C1...');
return (
<div className="C1">
<div>This is C1! {p1}</div>
</div>
);
};
- 把C1放入B1并设置其属性p1的值为B1的state “count”
<C1 p1={count} />
- 把B1 放入App
- 点击B1按钮2次
- 观察console输出
结果：
Rendering App...
Rendering B1...
Rendering C1...
Rendering B1...
Rendering C1...
结论：
C1的属性变化导致其重新渲染。祖父组件不会受影响。其父组件B1因为需要渲染C1的属性变化必然也要渲染。
2.3.2 React.memo()包装
步骤：
- 在上一实验基础上将C1用React.memo()包装成C1m
<C1m p1={count} />
- 点击B1按钮2次
- 观察console输出
结果：
Rendering App...
Rendering B1...
Rendering C1...
Rendering B1...
Rendering C1...
Rendering B1...
Rendering C1...
结论：
用memo包装后的C1的属性变化仍然触发了渲染。
2.3.2 React.memo()包装但不改变属性
步骤：
- 在上一实验基础上的C1m属性设置成不随B1的count state变化
<C1m p1={999} />
- 点击B1按钮2次
- 观察console输出
结果：
Rendering App...
Rendering B1...
Rendering C1...
Rendering B1...
Rendering B1...
结论：
用memo包装后的C1的属性不变不会触发渲染。
2.4 useState初始化行为
2.4.1 重新渲染
步骤：
- 为B1的useState设置一个初始化函数
const [count, setCount] = useState(() => {
console.log('Init B1 state count.');
return 0;
});
- 把B1 放入App
- 点击B1按钮
- 观察console输出
结果：
Rendering App...
Init B1 state count.
Rendering B1...
Rendering B1...
Rendering B1...
结论：
useState的初始化函数确实只调用一次，state变化导致的重新渲染不会再次执行。
2.4.2 挂载卸载
步骤：
- 为C1 加个state, 设置一个初始化函数
const [count, setCount] = useState(() => {
console.log('Init C1 state count.');
return 0;
});
- 把C1放入B1， 并且让它按B1 state状态的变化而挂载/卸载
<div className="B1">
<button onClick={() => setCount(count + 1)} >{count}</button>
{(count%2 === 1) && <C1 />}
</div>
- 把B1 放入App
- 为B1的useState设置一个初始化函数
const [count, setCount] = useState(() => {
console.log('Init B1 state count.');
return 0;
});
- 点击B1按钮
- 观察console输出
结果：
Rendering App...
Init B1 state count.
Rendering B1...
Rendering B1...
Init C1 state count.
Rendering C1...
Rendering B1...
Init C1 state count.
Rendering C1...
结论：
useState的初始化函数会在挂载组件时调用，每次挂载都调用一次。
2.5 useEffect行为
2.5.1 不设触发条件
步骤：
- 为B1设置一个effect但不加触发条件（第二个参数）
useEffect(() => {
console.log('Calling B1 effect, count='+count);
});
- 点击B1按钮2次
- 观察console输出
结果：
Rendering App...
Rendering B1...
Calling B1 effect, count=0
Rendering B1...
Calling B1 effect, count=1
Rendering B1...
Calling B1 effect, count=2
结论：
不加触发条件的话每次渲染都会触发effect。
2.5.2 设触发条件为空数组
步骤：
- 为B1设置一个effect， 设触发条件为空数组
useEffect(() => {
console.log('Calling B1 effect, count='+count);
}, []);
- 将B1加入App
- 点击B1按钮2次
- 观察console输出
结果：
Rendering App...
Rendering B1...
Calling B1 effect, count=0
Rendering B1...
Rendering B1...
结论：
设触发条件为空数组的话初始化时会触发effect。
2.5.2 设触发条件为属性
步骤：
- 为B1设置一个属性p2
- 为B1设置一个effect， 设触发条件为空数组
useEffect(() => {
console.log('Calling B1 effect, count='+count);
}, []);
- 将B1加入App, 设置定时器更改属性p2
const App = () => {
const [p, setP] = useState(0);
console.log('Rendering App...');
setTimeout(() => {setP(3)}, 3000);
return (
<div id="app">
<B1 p2={p}/>
</div>
);
};
- 点击B1按钮2次
- 等待定时器触发
- 观察console输出
结果：
Rendering App...
Rendering B1...
Calling B1 effect, p2=0
Rendering B1...
Rendering B1...
Rendering App...
Rendering B1...
Calling B1 effect, p2=3
Rendering App...
结论：
设触发条件为属性的话不仅初始化时而且属性变化时也会触发effect。
又及：最后父组件App 又触发了一次渲染，有点意外。