react 的使用总结

song854601134

已于 2024-03-04 14:43:26 修改

阅读量88

点赞数

分类专栏： react 文章标签： reactjs

于 2023-02-27 17:33:19 首次发布

本文链接：https://blog.csdn.net/song854601134/article/details/129246269

版权

react 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

calc 失效

      height: calc(~"100vh - 102px");
需要写成这种样式

Hooks只能在函数组件中使用

可以理解为听过Hooks 为函数组件钩入 class 组件的特性

Hooks 前后 , 组件开发模式的对比

React v16.8 以前: class组件(提供状态) + 函数组件(展示内容)
React v16.8 及其以后:

class组件(提供状态) + 函数组件(展示内容)
Hooks(提供状态) + 函数组件(展示内容)
混用以上两种方式: 部分功能用 class 组件 , 部分功能用 Hooks + 函数组件

store.subscribe

就是store.subscribe如果直接写在函数组件里，那么该函数组件每渲染一次，就会给store增加一个“订阅”

  store.subscribe(() => {
    console.log(femaleSex,num,222222222);
    setRandom(Math.random());
  });

useEffect

store.subscribe写在useEffect中 store.subscribe()因为传递给useEffect的第二个参数为一个空数组，所以回调只执行了一次
useEffect的回调函数里面的基本类型变量永远拿的是useEffect回调第一次执行函数组件的基本类型变量（因为基本类型变量的赋值是值传递）

  useEffect(() => {
    store.subscribe(() => {
      setRandom( v => {
        console.log(femaleSex,v,222222222);
        return Math.random()
      });
      // setFemaleSex(true)
      // setFemaleSex((v) => {
      //   return !v
      // })
    });
  }, []);//传递空数组 在初次渲染后才会执行 相当于只类组件的componentsDidMounted声明周期

类组件与函数组件对应

类组件	函数组件
state	useState
生命周期	useEffect（依赖参数为[] = componentDidMount, 依赖项不写 = componentDidMount+ componentDidUpdate
ref / React.createRef	useRef

vue与react对应

vue	react	react
	类组件	函数组件
watch	类组件的getDerivedStateFromProps	useEffect,需要传递依赖项， Effect 在初始渲染后以及依赖项变更的重新渲染后
computed	get ‘属性名’

React中的flushSync与Vue中的nextTick

React中的flushSync与Vue中的nextTick是两种用于处理异步更新的机制。它们在React和Vue这两个流行的前端框架中起着重要的作用。

首先，让我们来看看flushSync。在React中，当需要更新UI时，React会将更新操作放入一个队列中，然后异步地执行这些更新操作。但是有时候，我们希望立即执行这些更新操作，而不是等待异步执行。这时就可以使用flushSync。flushSync会立即执行队列中的所有更新操作，确保更新是同步完成的。这对于某些特定的场景非常有用，比如在进行DOM测量之前，我们可能需要确保所有的更新已经完成。

而在Vue中，nextTick则是用来处理异步更新的机制。和React类似，当需要更新UI时，Vue也会将更新操作放入一个队列中，然后异步地执行这些更新操作。但是有时候，我们需要在DOM更新之后立即执行一些操作，比如获取更新后的DOM元素。这时就可以使用nextTick。nextTick会在DOM更新之后执行回调函数，确保我们可以在更新后立即访问到最新的DOM元素。

虽然flushSync和nextTick都是用于处理异步更新的机制，但它们的使用方式和场景略有不同。flushSync主要用于React中，用于确保更新是同步完成的；而nextTick则主要用于Vue中，用于在DOM更新之后执行回调函数。

总的来说，flushSync和nextTick都是非常有用的工具，它们可以帮助我们更好地处理异步更新，提升应用的性能和用户体验。无论是React还是Vue，都值得我们深入了解和使用。