如何分析网站功能,搜狗网页搜索,wordpress 预约插件,搜索引擎优化seo应用文章目录 项目地址十六、useContecxt十七、useReducer十八、React.memo以及产生的问题18.1组件嵌套的渲染规律18.2 React.memo18.3 引出问题 十九、useCallback和useMemo19.1 useCallback对函数进行缓存19.2 useMemo19.2.1 基本的使用19.2.2 缓存属性数据 19.2.3 对于更新的理解… 文章目录 项目地址十六、useContecxt十七、useReducer十八、React.memo以及产生的问题18.1组件嵌套的渲染规律18.2 React.memo18.3 引出问题 十九、useCallback和useMemo19.1 useCallback对函数进行缓存19.2 useMemo19.2.1 基本的使用19.2.2 缓存属性数据 19.2.3 对于更新的理解 二十、useRef记忆功能20.1 与useState的区别 项目地址
教程作者教程地址 代码仓库地址 所用到的框架和插件
dbt
airflow十六、useContecxt 让子组件子孙组件不用通过props一层一层传递可以直接取值类似于定义一个全局变量子孙组件都可以直接使用这个全局变量而不是一层一层获取 创建context给子组件传值 使用context里的数据 十七、useReducer 设置一个函数用来管理所有状态的操作其中state表示操作之前的值action {type:具体操作的名称, payload:表示操作附带的值}最后操作结束后return的值去覆盖之前的state的值 使用useReducer第一个参数就是操作状态的函数参数二就是初始值用来被参数一操作的值 注意这里的state是个数值所以它可以直接进行加减但是如果state是对象或者数组需要解构使用的时候也是以对象的形式
十八、React.memo以及产生的问题
18.1组件嵌套的渲染规律
当父组件重新渲染子组件默认情况下跟着父组件一起重新渲染如果子组件重新渲染父组件是不会重新渲染的
18.2 React.memo
为了解决上面父组件重新渲染导致子组件也跟着一起渲染的资源浪费问题 我们使用React.memo,对子组件进行缓存只有当子组件发生了变化后才会一起渲染子组件 重新缓存的情况 props属性发生了改变 state组件的状态发生改变 unseContext的值发生了改变
使用memo将子组件包裹起来 2. 但是下面这种情况由于父组件给子组件传递了props子组件虽然设置了memo但是还是会重新渲染原因是因为每次父组件重新渲染后里面传值的内存地址发生了变化虽然值没变但是对于子组件来说 发生了变化
18.3 引出问题
上面的数组和function为了保持不变不让子组件重新渲染需要使用useMemo和useCallback来防止子组件重新渲染
十九、useCallback和useMemo
19.1 useCallback对函数进行缓存
使用useCallback对函数进行缓存其中参数1是函数体参数2是 依赖项就是被观察是否变化的项根据变化与否改变来判断是否重新渲染 19.2 useMemo
19.2.1 基本的使用
假如以下代码当x或y发生了变化的时候下面的繁重计算也会发生重新渲染重新计算是非常消耗内存的 为了解决这一问题我们需要设计的程序是只有计算条件发生变化的时候才对计算部分进行重新渲染使用useMemo解决这一问题也是需要依赖项 19.2.2 缓存属性数据
解决18里面的arr [1,2,3]属性没发生变化但是传入子组件用的时候会 导致子组件重新渲染
const arr useMemo(()[1,2,3],[])19.2.3 对于更新的理解 只要有方法把不变的状态记住那么在父组件渲染的时候子组件就不会重新渲染 useState useRef这里使用useRef更合适因为不需要渲染
二十、useRef记忆功能 只用于记忆不用于渲染 20.1 与useState的区别
useState是更改渲染useRef 只更改不渲染
