813_React官方文档_useState

MyButton组件：

import React from 'react';
import { useState } from 'react';

export default function MyButton() {
  const [count, setCount] = useState(0);
  function handleClicked() {
    setCount(count + 1);
  }
  return (
    <>
      <button onClick={handleClicked}>点了{count}次</button>
    </>
  );
}

App组件

import React from 'react';
import { useState } from 'react';
import './components/MyButton';
import MyButton from './components/MyButton';
export default function App() {
  //count的初始值是0，setCount用于更新count的值
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }
  return (
    <>
      <button onClick={handleClick}>点了我{count}次</button>

      <button onClick={handleClick}>点了我{count}次</button>
      <p></p>
      {/* 如果多次渲染同一个组件，会使得每个组件都会有自己的state 
      每一个组件都会记得自己的count值，不会受到其他按钮影响*/}
      <MyButton />
      <MyButton />
    </>
  );
}