hook组件

import { render } from '@testing-library/react';
import React ,{useEffect, useState} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import img from './logo512.png'
// import MyErrorBoundery from './MyErrorBoundery';
// import{ThemeContext, themes} from './theme-context';
// import  ThemedButton from'./themed-button';
// import PropoTypes from "prop-types"

const useForm = (init)=>{
  const [form, setForm] = useState(init)
  const handleChange = (e)=>{
    setForm({...form, [e.target.name]: e.target.value})
  }
  return [form, handleChange]
}

function Tool(){
  useEffect(()=>{

    const  focusUseName=(e)=>{

      if(e.keyCode===9){
        document.querySelector('input[name="usename"]').style.borderColor="red"
      }
    }
  window.addEventListener('keydown' ,focusUseName);

    return ()=>{
      window.removeEventListener('keydown' ,focusUseName)
    }
  })
  return(
    <h1>工具人</h1>
  )
}


function App(){
  const [showTool, setShowTool] = useState(false)
  const [form, setForm] =useState({usename:"", password :""});
  const [pokemon,setPokemon] =useState({})
  const [isLoading, setIsLoading]=useState({}) //解决图片显示不出来的问题
  const [number, setNumber]=useState(1)

useEffect( ()=>{
const  fn = async ()=>{
  setIsLoading(true); //在开始时设置为true
   const apiData = await fetch(`https://pokeapi.co/api/v2/pokemon/${number}/`)
   const data =await apiData.json()
    setPokemon(data)
    setIsLoading(false); //在结束时设置为false
    console.log(data);
  }
fn();
},[number])


  // useEffect(()=>{
  //   console.log('show');
  //   return ()=>{
  //     console.log('display');
  //   }
  // },[form.usename])

  return(
    <>
    <input type="text" value={form.usename} name="usename"
    onChange={(e=>setForm({...form, usename: e.target.value,}))}
    />

<input type="text" value={form.password} name="password"
    onChange={(e=>setForm({ ...form, password: e.target.value}))}
    />
    <div>
    <button onClick={()=>setShowTool(!showTool)}>召唤工具人</button>
    </div>

   { showTool && < Tool />}
   <h1>{pokemon.name}</h1>
   <button onClick={()=>setNumber(number+1)}>点我召唤神兽</button>
   <img alt="" src={pokemon.sprites?.front_default}
   width="100px"  height="100px" transform="scale(1)"/>
   {/* ?是为了解决图片资源访问不到 */}
   </>
  )

}



ReactDOM.render(
  <App/>,
  document.getElementById('root')
);