React Hooks 中 useEffect 的介绍

useEffect代替常用生命周期函数

useEffect 实现componentDidMonut和componentDidUpdate生命周期函数

• 第一次组件渲染和每次组件更新都会执行useEffect()
• 类似于类中的componentDidMonut和componentDidUpdate
• useEffect中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数时异步执行的，而componentDidMonut和componentDidUpdate中的代码都是同步执行的

  import React, { useState , useEffect } from 'react';
  function Example(){
      const [ count , setCount ] = useState(0);
      //---关键代码---------start-------
      useEffect(()=>{
          console.log(`useEffect=>You clicked ${count} times`)
      })
      //---关键代码---------end-------
  
      return (
          <div>
              <p>You clicked {count} times</p>
              <button onClick={()=>{setCount(count+1)}}>click me</button>
          </div>
      )
  }
  export default Example;
  

useEffect 实现 componentWillUnmount生命周期函数

• 可以用一个返回函数的形式来实现
• 每次状态发生变化和componentWillUnmount的时候，都会执行return

  function Index() {
    useEffect(()=>{
        console.log('useEffect=>老弟你来了！Index页面')
        return ()=>{
            console.log('老弟，你走了!Index页面')
        }
    })
    return <h2>JSPang.com</h2>;
  }
  

• useEffect的第二个参数是一个数组，可以传入很多状态对应的变量，当状态值发生变化时，才可以进行解绑。但是当传入空数组时，只有当组件将被销毁时才进行解绑

  function Index() {
      useEffect(()=>{
          console.log('useEffect=>老弟你来了！Index页面')
          return ()=>{
              console.log('老弟，你走了!Index页面')
          }
      },[])
      return <h2>JSPang.com</h2>;
  }
  

  function Example(){
      const [ count , setCount ] = useState(0);
  
      useEffect(()=>{
          console.log(`useEffect=>You clicked ${count} times`)
  
          return ()=>{
              console.log('====================')
          }
      },[count])
  
      return (
          <div>
              <p>You clicked {count} times</p>
              <button onClick={()=>{setCount(count+1)}}>click me</button>
  
              <Router>
                  <ul>
                      <li> <Link to="/">首页</Link> </li>
                      <li><Link to="/list/">列表</Link> </li>
                  </ul>
                  <Route path="/" exact component={Index} />
                  <Route path="/list/" component={List} />
              </Router>
          </div>
      )
  }