React函数组件

创建方式

const Hello = (props) => {
    return <div>{props.message}</div>
}
//第一种
const Hello = props => <div>{props.message}</div>
//第二种
function Hello(props){
   return <div>{props.message}</div>
}
//第三种

传入数据

const App = props =>{
    const [n,setN] =useState(0)
    const add =()=>{
        setN(n+1)
    }
    return(
        <div>
          {n}
          <button onClick={add}>+1</button>
        </div>
    )
}

useEffect

模拟componentDidMount

useEffect(()=>{ console.log('第一次渲染')},[])

模拟componentDidUpdate

useEffect(()=>{ console.log('任意属性变更')})
useEffect(()=>{ console.log('n变了')},[n])

模拟componentWillUnmount

useEffect(()=>{ 
    console.log('第一次渲染')
    return ()=>{
      console.log('组件要死了')
    }
},[])

• 若同时存在多个useEffect，会按照出些次序执行

useLayoutEffect

useLayoutEffect总是比useEffect先执行

useLayoutEffect里的任务最好影响了Layout

• 为了用户体验，优先使用useEffect（优先渲染：useEffect在浏览器渲染完成后执行，useLayoutEffect在浏览器渲染前执行）