const Hello = (props)=>{
    return <div>
        Hello,{props.name}
        </div>
}

export default Hello;

import Hello from './components/hello/Hello'

const Page = ()=>{
    return <Hello name={"world"}/>
}

    export default Page;

const Hello = (props)=>{
    return <div>
        Hello,{props.name}
        </div>
}

export default Hello;

import React, { useState } from 'react';
import Hello from '../Hello/Hello';

const Page = ()=>{
    const [count,setCount] = useState(0);
    return <Hello setCount={setCount} count={count}/>
}

export default Page;

const Hello = (props) => {
    return <div onClick={() => { props.setCount(props.count + 1) }
    }>Hello,count is{props.count}
    </div>
}

export default Hello;

import React, { useState } from 'react';

function Example() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

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

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}