春风得意马蹄疾
一日看尽长安花

函数式组件使用Hook实现生命周期

  • Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
  • Hook中的useEffect,通过使用这个 Hook,可以告诉 React 组件需要在渲染后执行某些操作。useEffect需要有一组依赖的state,如果依赖的state发生变化,那么回调就会执行

    compoenntDidMount

    useEffect(()=>{
    console.log('componentDidMount.....');
    }, []);

    compoentWillUnmount

    useEffect(()=>{
    return ()=>{
      console.log('componentWillUnmount.....');
    }
    }, []);

    componentDidUpdate

    const isFirst = useRef(true);
    //useEffect方法的第二个参数,如果不写的话,说明监听的是所有state和props,而且初始化的时候就会执行一次,我们实现componentDidupdate不能让它初始化就执行一次,所以把第一次去掉,就加此判断
    useEffect(()=>{
    if(isFirst.current){
      isFirst.current = false;
      return;
    }
    console.log('componentDidUpdate');
    });
Like
Like Love Haha Wow Sad Angry
2
赞(2) 打赏
未经允许不得转载:栗子纪blog » 函数式组件使用Hook实现生命周期
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x