React概念理解

1 useEffect

文章推荐

  1. https://segmentfault.com/a/1190000018639033
  2. https://juejin.cn/post/7044161793471545381
javascript 复制代码
  useEffect(() => {
    console.log('====111111======');
    return () => {
      console.log('=======222222=======');
    };
  });

在每次代码刷新时候都会打印111111和222222
javascript 复制代码
const [state, dispatch] = useReducer(
    (oldState, payload) => {
      if (payload.type === 'tick') {
        return {
          ...oldState,
          count: oldState.count + oldState.step,
        };
      }

      return {
        ...oldState,
      };
    },
    { count: 0, step: 1, type: '' },
  );
  useEffect(() => {
    console.log('========111111======');
    const id = setInterval(() => {
      console.log('========222222======', state.count);
      dispatch({ type: 'tick' }); 
    }, 1000);
    return () => {
      console.log('========333333======', state.count);
      clearInterval(id);
    };
  }, [dispatch]);

 <h1>{state.count}</h1>

console.log('========111111======'); 只会执行一次,****说明每次返回的dispatch都是同一个函数。

console.log('========222222======', state.count);会被多次执行,但是打印出来的state.count会一直是0 (因为Capture Value的原因)

console.log('========333333======', state.count); 不会执行,页面其他state更新它也不受影响
页面其他state更新不会影响到上面useEffect内部执行。

h1标签里面的值会正常一秒增加一次。


可以把上面理解成一个小型的Redux。
相关推荐
群联云防护小杜12 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台30 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹37 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构