背景知识:组件的生命周期 - mount与unmount
重新渲染(rerender)是不会触发unmount与mount的。
老师:可以想象人这一生只能出生一次死亡一次,但是能经历好多次新陈代谢。出生就是mount了,死亡就是unmount了,update就是新陈代谢了因为你摄入了食物你变了。
所以重新渲染只能算是新陈代谢(update),不是死了然后复活。
![https://github.com/wojtekmaj/react-lifecycle-methods-diagram/blob/master/src/static/ogimage.png](https://i-blog.csdnimg.cn/blog_migrate/5ed4fc6693bc4866524218fe732b983b.png)
函数组件内的函数、变量等会再组件渲染时重新生成
猜测下列例子中,哪些会打印出1、2、3、4、5...,哪些则只会打印1、1、1、1、1...?
例子 1:变量value声明在组件内。没有state的变化。
import React from 'react';
function App() {
let value = 0; // 定义在组件内的value
function testClick() { // 每次点击,希望让value加一。
console.log(++value);
}
return (
<div>
<button onClick={testClick}>Example 1</button>
</div>
);
}
export default App;
例子2:value声明在组件内。state在每次点击后会更新。
import React, {useState} from 'react';
function App() {
let value = 0; // 定义在组件内的value
const [state, setState] = useState(0); // state
function testClick() { // 每次点击,希望让value、state加一。
console.log(++value);
setState(state+1);
}
return (
<div>
<button onClick={testClick}>Example 1</button>
<p>state is {state}</p>
</div>
);
}
export default App;
例子3: value声明在组件内。state在每次点击后不会更新。
import React, {useState} from 'react';
function App() {
let value = 0; // 定义在组件内的value
const [state, setState] = useState(0); // state
function testClick() { // 每次点击,希望让value加一,state不变。
console.log(++value);
}
return (
<div>
<button onClick={testClick}>Example 1</button>
<p>state is {state}</p>
</div>
);
}
export default App;
例子4:value声明在组件外。state在每次点击后会更新。
import React, {useState} from 'react';
let value = 0; // 定义在组件外的value
function App() {
const [state, setState] = useState(0); // state
function testClick() { // 每次点击,希望让value、state加一。
console.log(++value);
setState(state+1);
}
return (
<div>
<button onClick={testClick}>Example 1</button>
<p>state is {state}</p>
</div>
);
}
export default App;
正确答案:
由于state的更新会触发所在组件的重新渲染,组件内的function、变量都会在组件渲染时重新生成。
所以例子2只会输出1、1、1、1、1...
不过,例子1、例子3由于没有state的更新,所以没有处罚组件的重新渲染。因此变量、function没有重新生成,可以输出1、2、3、4、5...
例子2的改进是例子4,value在组件外,所以state改变时不会重新生成它,它的值得到了保留,可以输出1、2、3、4、5...