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

最新推荐文章于 2024-06-24 15:39:48 发布
最新推荐文章于 2024-06-24 15:39:48 发布
阅读量1.6k 收藏 3
点赞数 1
分类专栏： 笔记 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clli_Chain/article/details/125104741
版权

文章目录

1、问题梳理

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

在这里插入图片描述

归来巨星
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
React hooks 组件传值 - 父子组件之间的传值
subsistent的博客
08-19 630
子组件：函数组件接收一个props是一个对象，父组件传的属性名就是props对象的key，属性的值就是对应的value。一句话概括：在props上定义一个方法，调用方法的时候传入参数，达到传值的效果。一句话概括，react hook 父子组件之间通过props进行传值。父组件：在子组件标签上定义一个属性，属性值为一个方法。父组件：在子组件标签上定义属性。
react-reactHook-路由-路由props
lwf0829的博客
01-05 1080
reactHook: usestate使用状态state模拟class组件的state useEffect使用副作用（模拟生命周期） useRef引用dom useCallback 使用回调缓存 执行一个函数 useMemo使用缓存 返回一个函数 useLayoutEffect 视图发生变化 useReducer 集中数据管理器 （模拟reduce） useContext 使用上下文（跨层级传参） createContext 创建上下文 useState使用状态 const [n.
React 之Hook
最新发布
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
06-24 237
Hook是React16.8的新增特性
React中Props的使用
weixin_51642358的博客
08-18 419
简单介绍了一下React中Props的使用
React hooks useEffecr普通监听和立即监听
qq_42402381的博客
04-06 2232
const [curPage, setCurPage] = useState<number>(props.defaultCurrent || 1); useEffect(()=>{ console.log(curPage); // 立即监听 },[curPage]) 普通监听 const flag=useRef<boolean>(false); useEffect(()=>{ i...
React 代码复用：HOC、render props 和 自定义 Hook
qq_42062727的博客
07-25 612
如何自己编写一个 react hook？react 允许我们自己编写 Hook。 场景 我们有几个组件，它们都要先进行 ajax 请求，获取到数据，然后把数据渲染到页面上。总体代码： class App extends Component{ state = { isLaoded: false, data: null } componentDidMount(){ // 发起网络请求 axios.get("/api/frui
react-hook-async:用React Hook异步
04-30
React挂钩异步 使用新的React钩子在React组件中使用异步的简单方法。 支持链接异步任务。 体积小，无需依赖 安装 yarn add react-hook-async 或者 npm i react-hook-async --save 用法 使用React时，执行异步...
React中组件的props.children
01-20
在React中，`props.children` 是一个特殊属性，它允许父组件向子组件传递内容。这一特性使得组件之间能够灵活地交互，实现可复用的、动态的数据展示。以下是对`props.children`深入理解的详细解释： ### 1. 父组件...
nextjs-react-redux-hook
02-18
- **函数式组件**：项目中主要使用函数式组件代替传统的类组件，利用React的钩子（如`useState`, `useEffect`, `useContext`等）来管理状态和副作用。 - **自定义Hook**：自定义Hook（如`useCustomHook`）允许我们...
react-router实现跳转传值的方法示例
08-30
本文将详细介绍如何在React Router中实现跳转传值，并提供示例代码。 首先，我们需要引入`React Router`中的`hashHistory`对象，它是React Router提供的历史记录管理器之一，用于处理页面的导航。在项目中，通常在...
react-animate-props:React高阶组件并进行挂钩，以转换您喜欢的组件以在更改时为道具值制作动画
05-17
React HOC（高阶组件）方法，以及React Hook，用于转换您喜欢的组件以在更改时为prop值设置动画。 该程序包使用处理prop值的补间。 它不具备全部功能，但是对于基本值和对象补间非常有效。 安装 通过 npm install ...
类型验证-React检查组件传入的props参数
斑驳的岁月
08-20 361
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 369
1:为什么需要react-Hooks Hook 时react 16.8的新增特性，它可以让我们在不编写class的情况下使用state以及其他的react特性（比如生命周期） class组件相对于函数式组件的优势 （1） √√√ class组件可以定义自己的state，用来保存组件内部的状态。 xxx 函数式组件不可以，因为函数每次调用都会产生新的临时变量。 （2） √√√ class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑。比如在componentDIdMount种发
react父组件props变化的时候子组件怎么监听？
weixin_59525879的博客
12-28 1717
钩子函数来监听父组件的 props 变化。这个钩子函数会在组件更新之后调用，可以通过比较前后的 props 值来判断是否发生了变化。函数会被调用，然后可以进行相应的处理。在 React 中，子组件可以通过。在上面的示例中，当父组件的。值发生变化时，子组件的。
React Hook 的使用
weixin_34331102的博客
01-22 1911
Hooks是React v16.7.0-alpha中加入的新特性。它可以让你在class以外使用state和其他React特性1.state hook的使用useState是一个Hook，它允许您将React状态添加到功能组件（常说的无状态组件）使用场景：如果你编写一个函数组件并意识到你需要为它添加一些状态，那么之前你必须将它转换为一个类。现在，您可以在现有功能组件中使用useState例如： /...
React新特性Hooks使用教学，以及与高阶组件、renderProps模式的对比
qq_40962320的博客
02-16 8052
目录 一.什么是Hooks？ 1.useState的作用 2.useEffect的作用 3.useContext的作用 二、对Hooks的思考 1.高阶组件实现逻辑复用 高阶组件版本的计数器 2.renderProps实现逻辑复用 renderProps版本的计数器 3.Hooks实现逻辑复用 Hooks版本的计数器 4.给计数器增加第二个功能——变换颜色 三、源码git...
React Hook组件间传值 与 React类式组件传值【兄弟组件+父子组件】
hannah2233的博客
01-04 2182
父组件传值给子组件（props）， 爷爷给孙子组间传值(context)，子组间传值给父组件(父组件props传递回调函数)
React中10种Hook的使用介绍
qq_38261819的博客
07-28 1668
可以用来优化子组件的渲染问题，或者监听子组件状态变化来处理事件，这一点在以前是很难做到的，因为shouldComponentUpdate里能监听到是否变化，但没法控制其他的外部方法，只能返回true和false,而componentDidUpdate只能在更新后执行，所以想在渲染之前做些事情就不好搞了。下面我们仔细看看具体的优化逻辑。是直接定义了一个方法，这也就导致只要是父组件重新渲染（状态或者props更新）就会导致这里声明出一个新的方法，新的方法和旧的方法尽管长的一样，但是依旧是两个不同的对象，...
，可以考虑使用 useEffect Hook，在 Modal 组件挂载时监听 props.ModalState 变化并更新 modalIsOpen 状态值。 写一下
06-10
可以使用 useEffect Hook 来监听 props.ModalState 变化并更新 modalIsOpen 状态值，确保 Modal 组件的显示和隐藏与父组件的状态同步。具体实现如下： ``` import React, { useState, useEffect } from 'react'; import Modal from 'react-modal'; function CellClickModal(props) { const [modalIsOpen, setModalIsOpen] = useState(false); useEffect(() => { setModalIsOpen(props.ModalState); }, [props.ModalState]); function handleClick() { setModalIsOpen(!modalIsOpen); } const customStyles = { overlay: { backgroundColor: 'rgba(0, 0, 0, 0.1)', }, content: { width: '50%', height: '50%', top: '25%', left: '25%', padding: '20px', }, }; return ( <div> <Modal isOpen={modalIsOpen} style={customStyles}> <button onClick={handleClick}>111</button> </Modal> </div> ); } export default CellClickModal; ``` 这段代码中，useEffect Hook 监听了 props.ModalState 变化，并在变化时更新了 modalIsOpen 状态值。这样就可以确保 Modal 组件的状态与父组件的状态同步，避免了重复出现或关闭不了等问题。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

归来巨星

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

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

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

打赏作者

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

抵扣说明：

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

余额充值