React Hooks 中 useEffect 的介绍

useEffect代替常用生命周期函数

useEffect 实现componentDidMonut和componentDidUpdate生命周期函数
  • 第一次组件渲染和每次组件更新都会执行useEffect()
  • 类似于类中的componentDidMonutcomponentDidUpdate
  • useEffect中定义的函数的执行不会阻碍浏览器更新视图,也就是说这些函数时异步执行的,而componentDidMonutcomponentDidUpdate中的代码都是同步执行的
    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>
        )
    }
    
上一篇:使用hooks实现的react的一个拖动小demo


下一篇:React hooks