函数组件的自动重新渲染

背景知识：组件的生命周期 - mount与unmount

重新渲染（rerender）是不会触发unmount与mount的。

所以重新渲染只能算是新陈代谢（update），不是死了然后复活。

函数组件内的函数、变量等会再组件渲染时重新生成

猜测下列例子中，哪些会打印出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...