react-hook（props传值副作用监听，不要做解构），副作用监听一定要走props.xxx

最新推荐文章于 2024-12-21 19:20:38 发布
原创 最新推荐文章于 2024-12-21 19:20:38 发布 · 1.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js

本文探讨了在组件中通过解构props时遇到的副作用问题，重点在于当checkGroupValue被替换为props.checkGroupValue时如何修复视图更新问题。通过内存匹配机制和副作用监听的解释，提供了问题定位和解决方案。

文章目录

1、问题梳理

每次当你所做操作，你的组件你的 render 会做渲染 也就是说你的代码会从上到下执行一遍，那么当我对 props 所做了解构，首要的他就是一个独立的个体，副作用监听自然会做改变也就是会执行我这边给的是一个空的arr数组，那么根据内存匹配机制来说，[ ]!=[ ] 也就造成了解构的副作用一直监听，触发了这个副作用钩子。
在这里插入图片描述
遇到了勾选全选，但是视图不更新，
在这里插入图片描述
原因是因为
在这里插入图片描述
所以根据我们的问题梳理，将checkGroupValue换成props.checkGroupValue问题解决
在这里插入图片描述

在这里插入图片描述

React-hook-form结合antd时defaultValue不更新的解决方式
dhw276的博客
01-25 2114
最近使用react-hook-form结合ant design的输入组件做表单，发现从接口获取的组件defaultValue不会更新到antd组件上，后来发现是因为antd的defaultValue一旦赋值不允许再次修改。 解决方法：将antd的key设置成defaultValue一致，或者随defaultValue一起更新，defaultValue更新时，因为key不同，组件会重新渲染，更新defaultValue。 <Controller as={ <Input />
第24节——react hooks组件传值 - 父子组件之间的传值
weixin_57017198的博客
09-14 1228
子组件：函数组件接收一个props是一个对象，父组件传的属性名就是props对象的key，属性的值就是对应的value。一句话概括：在props上定义一个方法，调用方法的时候传入参数，达到传值的效果。一句话概括，react hook 父子组件之间通过props进行传值。父组件：在子组件标签上定义一个属性，属性值为一个方法。父组件：在子组件标签上定义属性。
React hooks 组件传值 - 父子组件之间的传值
subsistent的博客
08-19 1084
子组件：函数组件接收一个props是一个对象，父组件传的属性名就是props对象的key，属性的值就是对应的value。一句话概括：在props上定义一个方法，调用方法的时候传入参数，达到传值的效果。一句话概括，react hook 父子组件之间通过props进行传值。父组件：在子组件标签上定义一个属性，属性值为一个方法。父组件：在子组件标签上定义属性。
react hooks 父子传值
bighead的博客
05-08 3272
react hooks 父子传值 父传子 在父组件中用useState声明数据 const [ data, setData ] = useState(false) 把数据传递给子组件 <Child data={data} /> 子组件接收 export default function (props) { const { data } = props console.log(data) } 子传父 子传父可以通过事件方法传值，和父传子有点类似。 在父组件中用useS
react-reactHook-路由-路由props
lwf0829的博客
01-05 1184
reactHook: usestate使用状态state模拟class组件的state useEffect使用副作用（模拟生命周期） useRef引用dom useCallback 使用回调缓存 执行一个函数 useMemo使用缓存 返回一个函数 useLayoutEffect 视图发生变化 useReducer 集中数据管理器 （模拟reduce） useContext 使用上下文（跨层级传参） createContext 创建上下文 useState使用状态 const [n.
React Hooks (Proposal)
weixin_34356555的博客
11-12 174
原文链接：Github React Hooks (Proposal) 在 React v16.7.0 alpha 版本里，提出了一个新的 Feature Proposal ：Hooks ，对社区以及以后前端发展所带来的影响是巨大的。 学习 Hooks 的知识需要对 React 生态有较深入的理解 What is the Hooks ？ Hooks 是 React 内部组件中的一系列特殊函数...
react-hook-async:用React Hook异步
04-30
React挂钩异步 使用新的React钩子在React组件中使用异步的简单方法。 支持链接异步任务。 体积小，无需依赖 安装 yarn add react-hook-async 或者 npm i react-hook-async --save 用法 使用React时，执行异步...
react-animate-props:React高阶组件并进行挂钩，以转换您喜欢的组件以在更改时为道具值制作动画
05-17
React HOC（高阶组件）方法，以及React Hook，用于转换您喜欢的组件以在更改时为prop值设置动画。 该程序包使用处理prop值的补间。 它不具备全部功能，但是对于基本值和对象补间非常有效。 安装 通过 npm install ...
react-router实现跳转传值的方法示例
08-30
本文将详细介绍如何在React Router中实现跳转传值，并提供示例代码。 首先，我们需要引入`React Router`中的`hashHistory`对象，它是React Router提供的历史记录管理器之一，用于处理页面的导航。在项目中，通常在...
react-nprogress:一个用于构建超薄进度条的React原语
04-02
React进行 一个用于构建苗条进度条的React原语。 | | | | 背景 这是的模块的React端口。 它公开了一个封装nprogress逻辑并且不进行任何渲染的API，使您可以完全控制渲染。 用法 在以下示例中， Container ， Bar和...
React 监听属性值变化的方法=》 useEffect钩子函数的介绍
z2000ky的博客
07-14 2679
监听数据变化
【react+ts】react使用HOOK钩子监听窗口变化
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
02-19 2396
解决流程 CommonLayout.tsx文件代码 const CommonLayout: NextPage = (props: any) => { let { renderContent, nav,link } = props; const footRef = useRef() const [height, setHeight] = React.useState<number | string>(0) //底部高度变化 const handl
React 之Hook
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
06-24 353
Hook是React16.8的新增特性
React中Props的使用
weixin_51642358的博客
08-18 586
简单介绍了一下React中Props的使用
React hooks useEffecr普通监听和立即监听
qq_42402381的博客
04-06 2405
const [curPage, setCurPage] = useState<number>(props.defaultCurrent || 1); useEffect(()=>{ console.log(curPage); // 立即监听 },[curPage]) 普通监听 const flag=useRef<boolean>(false); useEffect(()=>{ i...
React常用的hooks（钩子）
最新发布
m0_73574455的博客
12-21 769
这是我最近整理的React hooks，希望能帮到初学者去对react的了解。我们同样的闲言少叙，直接进入正题吧！
React 代码复用：HOC、render props 和 自定义 Hook
qq_42062727的博客
07-25 692
如何自己编写一个 react hook？react 允许我们自己编写 Hook。 场景 我们有几个组件，它们都要先进行 ajax 请求，获取到数据，然后把数据渲染到页面上。总体代码： class App extends Component{ state = { isLaoded: false, data: null } componentDidMount(){ // 发起网络请求 axios.get("/api/frui
类型验证-React检查组件传入的props参数
斑驳的岁月
08-20 483
prop-types包 yarn add prop-types -S index.jsx import React, { Component } from 'react' import Child from './Child' import { Abc } from './Abc' const abc = new Abc() class Index extends Component { state = { count: 0, } render() { return (
React-Hooks从0到1
qq_43955202的博客
09-17 492
1:为什么需要react-Hooks Hook 时react 16.8的新增特性，它可以让我们在不编写class的情况下使用state以及其他的react特性（比如生命周期） class组件相对于函数式组件的优势 （1） √√√ class组件可以定义自己的state，用来保存组件内部的状态。 xxx 函数式组件不可以，因为函数每次调用都会产生新的临时变量。 （2） √√√ class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑。比如在componentDIdMount种发
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

归来巨星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值