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。
相关推荐
小中12345 分钟前
异步请求的性能提升
前端
我是天龙_绍6 分钟前
渐变层生成器——直接用鼠标拖拽就可以调整渐变层的各种参数,然后可以导出为svg格式
前端
我是天龙_绍34 分钟前
Easing 曲线 easings.net
前端
知识分享小能手37 分钟前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
訾博ZiBo39 分钟前
React组件复用导致的闪烁问题及通用解决方案
前端
Dever41 分钟前
记一次 CORS 深水坑:开启 withCredentials 后Response headers 只剩 content-type
前端·javascript
临江仙45543 分钟前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
Hilaku1 小时前
为什么我开始减少逛技术社区,而是去读非技术的书?
前端·javascript·面试
m0_728033131 小时前
JavaWeb——(web.xml)中的(url-pattern)
xml·前端
猪哥帅过吴彦祖1 小时前
第 8 篇:更广阔的世界 - 加载 3D 模型
前端·javascript·webgl