关闭

react 开发中的一些小技巧,助你一臂之力

时间: 2021-01-26阅读: 143标签: 技巧

我使用 react 开发已经 1 年的时间了,不能说很精通,不过在使用的过程中,确实领悟和总结了一些小技巧,可以加快我们后续的开发


1. useState 中的一些技巧

我们在使用 react 开发 function comppoent 时,必然绕不开 useState ,可谓是随处可见,那么 useState 中有哪些坑和需要注意的地方呢?

1.1 useState 是异步的

有些使用 react 时间较短的同学,经常会这样写,在调用 set 方法设置 state 的值后,立刻去获取这个值:

const [data, setData] = useState();

const func = () => {
  console.log(data);
};

useEffect(() => {
  setData({ name: '蚊子' });
  func();
}, []);

然而在使用 log 输出时,却发现没有变化。这是因为 useState 中的 set 是异步操作,而函数 func 的调用是同步的,这就导致 func()要比 set 先执行。

那么如何解决这个异步的问题呢?这里有几种方式可以参考:

1.1.1 用 useEffect 辅助

useEffect(() => {
  if (data) {
    // 当满足条件时,执行func()
    func();
  }
}, [data]);

1.1.2 将需要的数据直接传入到 func 方法中

useEffect(() => {
  const data = { name: '蚊子' };
  setData(data);
  func(data);
}, []);

1.1.3 延时触发

延时触发也可以解决这个问题,但是最不建议这种方式,一个异步问题,如果再用一个延时更大的异步操作来兜底,可能还会产生其他一些未知的问题。

useEffect(() => {
  setData({ name: '蚊子' });
  setTimeout(func, 10);
}, []);

1.2 setTimeout 中的 state 永远是初始值

我们想要延迟设置一些数据,例如让一个计数器固定简单的增加+1,我们可能会这样写:

const [count, setCount] = useState(0);

useEffect(() => {
  const timer = setInterval(() => {
    setCount(count + 1);
  }, 1000);
  return () => clearInterval(timer); // 注意清除定时器
}, []);

可是运行时我们发现,计数器只是从 0 涨到了 1,然后就再也不增加了,在 setInterval 中的回调函数里打 log,发现回调函数还在执行,可是就是 count 没有发生变化。

这是因为 useEffect 的第二个参数 依赖项 导致的,在我们上面的示例中,依赖项为空数组,这表示在第一次初始化后,内部就再也不发生变化,那么 count 依赖的就永远是第最开始的初始值。

可是如何实现在定时器中持续操作 state 呢?这里有几种解决方式可供参考:

1.2.1 将 state 添加到依赖项中

刚才我们也说是因为依赖项,导致每次读取都是最开始初始化时的值,那么我们就可以把 count 添加到依赖项中:

const [count, setCount] = useState(0);

useEffect(() => {
  const timer = setInterval(() => {
    setCount(count + 1);
  }, 1000);
  return () => clearInterval(timer);
}, [count]);

这样就能实现计数器一直增加了。

但这样会导致另一个问题:每次 count 发生变化时,都会先执行 clearInterval ,然后再重启一个新的定时器 setInterval ,setInterval 就蜕变成了 setTimeout 了,只执行一次 setInterval 就会被清理掉。因此这里其实换成 setTimeout 即可:

useEffect(() => {
  const timer = setTimeout(() => {
    setCount(count + 1);
  }, 1000);
  return () => clearTimeout(timer);
}, [count]);

还有一种更简单粗暴的方式,就是不添加任何依赖项,但这种方式,会导致所有的 state 变化,都会触发 useEffect 的重新执行:

useEffect(() => {
  const timer = setTimeout(() => {
    setCount(count + 1);
  }, 1000);
  return () => clearTimeout(timer);
});

这种没有任何依赖项的方式,建议在组件中只有一个 count 的 state 中使用!

1.2.2 使用 useRef 保存上次的 state

我们可以利用 useRef 的特性,来保存刚才发生变化的 state 值,下次使用时,可以直接从 useRef 中获取。useRef 中的值并不受依赖项的限制:

const [count, setCount] = useState(0);
const countRef = useRef(0); // 创建一个ref来保存count的值

useEffect(() => {
  countRef.current = count; // count发生变化时,将其存储起来
}, [count]);

useEffect(() => {
  const timer = setInterval(() => {
    setCount(countRef.current + 1); // 每次从countRef.current中获取到最新的值
  }, 1000);
  return () => clearInterval(timer);
}, []);


2. useRef 的妙用

刚才 useRef 已经小试牛刀,试用了一下。现在我们再来看看它具体的用法。

2.1 保存一切可变的值

useRef 可以保存一切可变的值,例如上面 state 中的值,同时还有定时器的 timer,requestAnimationFrame 的 id 等。例如在递归的操作中,timer 和 id 每次都是不一样的,当取消的时候,应当取消哪个就很头疼,这里我们就可以使用 useRef 来进行存储:

const requestRef = useRef(0);

// 开始渲染
const render = () => {
  console.log('render', Date.now());

  requestRef.current = requestAnimationFrame(() => {
    render();
  });
};

// 取消渲染
const cancelRender = () => {
  cancelAnimationFrame(requestRef.current);
};

2.2 同时保存多个变量

我们在上面的例子中,都是只保存一个值,然后再被另一个新值给覆盖掉。可是如果我们想同时保存多个值时,怎么办呢?

如果是单纯的数据的话,那把 ref 初始化成数组,然后按照数组的方式操作即可。

const listRef = useRef([]);

useEffect(() => {
  const timer = setInterval(() => {
    listRef.current.push(Date.now());
  }, 1000);
  return () => clearInterval(timer);
}, []);

可是我们有一个 dom 元素列表,想把所有的 dom 元素都存储起来?

const domListRef = useRef([]);

const getDomList = useCallback((dom: htmldivElement | null) => {
  if (dom) {
    domListRef.push(dom);
  }
}, []);

<>
  {
    list.map((item) => <div key={item.ename} ref={getDomList}></div>);
  }
</>

这里要特别注意,getDomList 方法要用 useCallback 包裹起来,否则每次 state 变化时,都会导致 domListRef 数据的增加!

2.3 自定义 useInterval 的 hook

我们通过第 1 节和第 2 节了解了 useEffect 中的 setTimeout(setInterval)和 useRef 的表现,基于这两者,我们可以自己实现一个 useTimeout 或者 useInterval。

useInterval 的实现:

const useInterval = (callback, delay) => {
  const saveCallback = useRef();

  useEffect(() => {
    // 每次callback发生变化时,都将最新的callback保存起来
    saveCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      saveCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay); // setInterval只运行ref.current里的方法
      return () => clearInterval(id);
    }
  }, [delay]);
};

在 useInterval 中执行 state 的 set 操作时,就不用再关心 state 是否会更新的问题了:

const [count, setCount] = useState(0);

useInterval(() => {
  setCount(count + 1);
}, 1000);


3. createPortal 的骚操作

我们在引入组件并渲染时,会按照引入的位置进行渲染。不过对于一些公共组件,例如弹窗、toast、悬浮挂件角标等,不希望这些组件的样式收到父级元素的样式影响(如 overflow: hidden , transform (父级元素有 transform 样式时,"position: fixed"会降级为"position: absolute"), z-index 等),最好她可以渲染到根目录或者其他指定的目录中。这时应该怎么办呢?

我们就用到 createPortal 了,该方法的使用规则非常简单,就 2 个参数:

  1. 要渲染的组件;

  2. 要挂载的 DOM 节点;

代码说明下:

import { createPortal } from 'react';

const Modal = () => {
  return createPortal(
    <div className="i-modal">
      <div className="i-modal-content"></div>
    </div>,
    document.body,
  );
};
export default Modal;

这个 <Modal /> 组件可以在任何地方引用,然后渲染时,会被渲染到 document.body 的最后(类似于 appendChild 操作):

import Modal from './modal';

const User = () => {
  return (
    <div className="user">
      <Modal />
    </div>
  );
};


4. 小结

其实在 react 中还有很多的小技巧操作,如果我们熟悉这些小技巧后,就能快速地用 react 搭建我们的应用。

原文 https://www.xiabingbao.com/post/react/react-use-tips.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10128

CSS-in-JS 库 styled-class

为什么要在JavaScript里写CSS?避免命名全局污染,条件和动态样式(比如选择主题色之类的),在框架层面进行限制或补充(比如补全供应商前缀),避免业务人员使用奇技淫巧

4个开发 React 应用的实用技巧

Hooks 自推出以来就很火, 它改变了我们编写React 代码的方式, 有助于我们写更简洁的代码。今天这边文章不是说Hooks的,Hooks之外, 还有很多实用的技巧可以帮助我们编写简洁清晰的代码。

你可能不知道的64个非常实用的JS小技巧

何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步。每写好一篇文章,都会使用大量的写作技巧。

积极使用解构赋值以及箭头函数提升 Javascript 表现力

本文列举了一些日常会使用到的 Javascript技巧,可以明显提升代码的表现力。解构赋值首先,我们来看一下下面这段代码:数组解构赋值我们现在有三只动物

这些优化技巧可以避免我们在 JS 中过多的使用 IF 语句

最近在重构代码时,我发现早期的代码使用太多的 if 语句,其程度是我从未见过的。这就是为什么我认为分享这些简单的技巧是非常重要的,这些技巧可以帮助我们避免过多的使用 if 语句。

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

10个让你受益匪浅的css使用技巧

在Safari浏览器下(此Safari浏览器包括iOS的Safari,iPhone上的微信浏览器,以及Mac OS X系统的Safari浏览器),当我们使用3D transform变换的时候,如果祖先元素没有overflow:hidden/scroll/auto等限制

JS 中用到的小技巧

本文主要介绍一些 JS 中用到的小技巧,string 强制转换为数字:可以用 *1 来转化为数字 (实际上是调用 .valueOf 方法),然后使用 Number.isNaN 来判断是否为 NaN ,或者使用 a !== a 来判断是否为 NaN ,因为 NaN !== NaN

45个有用的JavaScript技巧,窍门和最佳实践

首次为变量赋值时务必使用var关键字:变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量。使用===取代==

你应该知道的简单易用的CSS技巧

作为前端,在工作中难免会遇到关于排版的问题,以下是我整理的一些关于CSS的技巧,希望对你能有帮助。每个单词的首字母大写一般我们会用JS实现,其实CSS就可以实现。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!