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,都值得我们深入了解和使用。