State Hook

 

1 useState函数的第一个参数，是state变量的初始值。 

2 每次渲染时，多个State Hook的顺序、数量都是一样的。（不能多、不能少）

3 state变量是只读的

4 state变量发生变化（比较引用地址），会触发新的渲染（再次执行渲染函数）；

   state变量没变化（比较引用地址），不触发新的渲染。

 

import React, { useState } from "react";

// 记录渲染次数
let times = 0;

export default function App(props) {
  // 打印渲染次数
  console.log("函数式组件", ++times);

  const [counter, setCounter] = useState(0);

  return (
    <div>
      <button onClick={e => setCounter(counter + 1)}>按钮：{counter}</button>
    </div>
  );
}