{
   "script":{
       "test":"mocha --version"
    }  
}

import React from 'react'
interface IHelloProps {
  message?: string;//因为设置了props的默认值，这里用？表示有无都可
}

/*
const Hello = (props:IHelloProps) => {
  return <h2>{props.message}</h2>
}
*/
const Hello: React.FC<IHelloProps> = (props) => {
  //FC是 react 官方提供的一个 interface 的简写：FunctionComponent，接收一个范型
  //这样Hello包含了很多静态方法
  return <h2>{props.message}</h2>
}
Hello.defaultProps = {
  message: "Hello World"
}

export default Hello

import React, { useState } from 'react'
const LikeButton: React.FC = () => {
  const [like, setLike] = useState(0);
  const [on,setOn] = useState(true);
  return (
    <>
    <button onClick={() => {setLike(like + 1)}}>
      {like} ????
    </button>
    <button onClick={() => {setOn(!on)}}>
      {on?'ON':'OFF'}
    </button>
    </>
  )
}
export default LikeButton

componentDidMount(){
  document.title = `you clicked ${this.state.count} times`;
}
componentDidUpdate(){
  document.title = `you clicked ${this.state.count} times`;
}

import React, { useState,useEffect } from 'react'
const LikeButton: React.FC = () => {
  const [like, setLike] = useState(0);
  const [on,setOn] = useState(true);
  useEffect(()=>{//useEffect会在组件每次渲染的时候，都会被调用
    document.title = `点击了${like}次`
  })
  return (
    <>
    <button onClick={() => {setLike(like + 1)}}>
      {like} ????
    </button>
    <button onClick={() => {setOn(!on)}}>
      {on?'ON':'OFF'}
    </button>
    </>
  )
}
export default LikeButton

componentDidMount(){
  document.addEventListener('click',this.updateMouse);
}
componentWillUnMount(){
  document.addEventListener('click',this.updateMouse);
}

import React, { useState, useEffect } from 'react'
const MouseTracker: React.FC = () => {
  const [ positions, setPositions ] = useState({x: 0, y: 0})
  useEffect(() => {
    console.log('add effect', positions.x)//执行顺序2:add effect 0;//执行顺序6:add effect 102
    const updateMouse= (e: MouseEvent) => {
      console.log('inner') //执行顺序3
      setPositions({ x: e.clientX, y: e.clientY })
    }
    document.addEventListener('click', updateMouse)
    return () => { //如果不加return函数中卸载功能，每次渲染函数组件的时候，都会执行useEffect
    //导致注册很多个 监听事件，
      console.log('remove effect', positions.x) //执行顺序5:remove effect 0
      document.removeEventListener('click', updateMouse)
    }
  }, [])
  //执行顺序1：before render 0//点击页面后，执行顺序4:before render 102
  console.log('before render', positions.x) 
  return (
    <p>X: {positions.x}, Y : {positions.y}</p>
  )
}
export default MouseTracker

useEffect(() => {
  console.log('document title effect is running')
  document.title = `点击了${like}次`;
  document.addEventListener('click', updateMouse)
  return ()=>{
    document.removeEventListener('click', updateMouse)
  }
}, [])
//useEffect第二个参数，如果是空数组，表示只在挂载元素后执行1次，但是其返回函数，会在组件卸载的时候执行
//如果不写第二个参数，则不做限制，组件中的任何一个data变化的时候，都会执行useEffect函数
//如果第二个参数写上变量后，则只有该变量发生变化的时候，才执行 useEffect

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

const useMousePosition = () => {
  const [ positions, setPositions ] = useState({x: 0, y: 0})
  useEffect(() => {
    console.log('add effect', positions.x)
    const updateMouse= (e: MouseEvent) => {
      setPositions({ x: e.clientX, y: e.clientY })
    }
    document.addEventListener('mousemove', updateMouse)
    return () => {
      console.log('remove effect', positions.x)
      document.removeEventListener('mousemove', updateMouse)
    }
  }, [])
  return positions
}

export default useMousePosition

import useMousePosition from './hooks/useMousePosition'
const App:React.FC = () => {
  const positions  = useMousePosition();
  return (
    <div>
      <p>X:{position.x},Y:{positions.y}</p>
    </div>
  )
}