理解react hooks -1

react hooks 组件 state 变化，导致组件方法执行，函数内部保存组件状态。状态变化导致函数重新执行，页面重新渲染。渲染结果只依赖组件状态。

import React from "react";

class ConstComp extends React.PureComponent {
  // 执行一次
  render() {
    console.log("abc");
    return "Hello";
  }
}
function CountLabel({ count }) {
  // 初始化一次，后面count每次变化都会执行一次
  console.log(1111);

  const color = count > 10 ? "red" : "blue";
  return <span style={{ color }}>{count}</span>;
}

export default function Counter() {
  // 初始化一次，后面count每次变化都会执行一次
  console.log('Counter');
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        <CountLabel count={count} />
        <ConstComp />
      </button>
    </div>
  );
}