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。
相关推荐
abigale0318 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者38 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile42 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399744 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能