踩坑日记--React派生State

最新推荐文章于 2022-12-08 15:17:49 发布
最新推荐文章于 2022-12-08 15:17:49 发布
阅读量262 收藏
点赞数
分类专栏： 踩坑日记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mossoul/article/details/118304369
版权

派生状态（state）就是根据props派生（可以理解为把接到的值放进了一个新的变量）得来的数据
我遇到的坑就是子组件从父组件获取传递来的参数不能根据父组件的更新而变化，归根结底就是当从父组件传递来的参数变成了派生状态的时候，父组件就无法继续影响这个数据了，可以理解为该数据到子组件内部又经过你加工了（就是赋值给变量），好比是代工厂把商品交给品牌方，品牌方一贴标，这个商品就不再是不知名代工厂的杂牌货，而是某品牌的产品了
个人理解是因为原数据和派生数据存储的地址不同，所以不能够影响


详情第一站

https://blog.csdn.net/qq_37016928/article/details/93915294

详情第二站

https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

Mossoul
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
emoji-picker-react:React表情符号选择器
04-28
表情符号选择器React V3 在安装之前需要了解什么？ 版本3使用React钩子，这意味着您需要使用React 16.8或更高版本。 与以前的版本不同，此版本使用Apple表情符号。 V3不支持SSR。 假定仅在用户在浏览器中进行交互...
tabler-icons-react:React React的Tabler图标
04-28
表格图标React 用于的React组件库-一组超过700个免费的MIT开源许可图标。 用法 该软件包可通过npm获得，并可以使用npm或yarn安装： # npm npm install tabler-icons-react # yarn yarn add tabler-icons-react ...
react修改state的坑,今天终于学到了...
MS6324_ZAKU的博客
05-31 842
今天在做了个评论的模块,贴下代码 -太长了直接贴截图 需求是点击删除,删除对应的评论 然后我这边使用的是splice方法直接修改state的commentList数组,结果出现两个坑 第一是splic方法返回的是被删除的值,同时splice() 方法会直接对数组进行修改。 也就是说,我不能直接在变量后面+ splice() ,这样得到的值是被删除的值 而是应该在原本的变量数组使用splice()方法后,再调用这个变量,因为这个变量的值已经改变了 第二十react的state不能直接去修改 直接修改
关于React的setState的坑
hzxOnlineOk的博客
07-31 728
this.setState 如果需要修改this.state中的数据必须调用this.setstate这个方法 这个方法里面有2个参数 参数1：类型 对象key是this.state中的key值val是修改后的数据 参数2：类型 函数 1、查看数据是否已经更新 2、可以获取到数据更新后的最新的DOM结构 书写方案1：this.setstate({},()=>{}) 书写方案2：this.setstate(()=({}),()=>{}) 关于 setStat...
react--setState机制
冷月心的博客
10-08 295
react--setState机制
react中的坑
weixin_44003190的博客
06-10 161
state的异步更新 有时候更新数据，state不会立即更新，但又无法阻止后续操作进行，所以有时候很蛋疼。 如何解决？ 可以使用回调函数的形式。 this.setState({query:values},()=>{ console.log(this.state.query);//该是啥就是是啥 }); state的坑 ...
react：关于用对象给state赋值，又修改对象的坑
qq_45797026的博客
08-01 1232
今天写项目的时候遇到的一个问题是，setState之后页面一直不渲染，在大佬的帮助下解决了问题上图记录一下： 解决方案：安全起见，还是直接把state写在state里，不要留下外面的东西改state的可能性 ...
react-input-color:React颜色选择器
04-29
安装npm install react-input-color --saveyarn add react-input-color故事书演示用法initialValue属性支持6（ #RRGGBB ）和8（ #RRGGBBAA ）个数字的十六进制值。 import React from 'react' ;import InputColor ...
react-split-pane：React拆分窗格组件
02-05
React拆分窗格 ...npm install react-split-pane # or if you use yarn yarn add react-split-pane # # Example Usage ` ` ` jsx < /SplitPane > < SplitPane split = " vertical " minSize =
react-editable-json-tree:React可编辑的Json树
05-17
授权删除动作的可能性如何使用安装npm install --save react-editable-json-tree用法示例 // Importimport { JsonTree , ADD_DELTA_TYPE , REMOVE_DELTA_TYPE , UPDATE_DELTA_TYPE , DATA_TYPES , INPUT_USAGE_...
React生命周期全解和state避坑
九阴与九阳
08-04 4342
所谓的生命周期就是React中定制的一套执行函数的顺序 分为三个阶段，每一个阶段都有不同的函数执行顺序，值得注意的是实例化和销毁阶段执行一次，存在期是可以反复执行的： 1、组件实例化阶段 （在实例化阶段只会执行一次）  constructor  componentWillMount  render  componentDidMount 2、组件存在阶段
React里的一些神坑，持续更新ing
v_life_v的博客
09-17 435
1.对于react内对state状态修改的性能优化 对于同一时间段相同事件的重复触发，正常情况下，react会进行性能优化，比如 state={ count:0 } for(let i=0;i<100;i++){ this.setState({ count:this.state.count + 1 } console.log(this.state.count) //输出100次0 } 这样的话只会输出一百次0，而count的值会变为99，这就是reac
6.25 react setState异步的坑
web
06-25 107
reactsetState向事件回调函数传参 setState 先来看一段代码 state = { name:'ww' } this.setState({ name: 'zs' }) console.log(this.state.name); // ww 看完以上代码，相信你已经明白，setState相当于是异步操作 ,打印name的时候，状态还未更新。 怎么解决？ state = { name:'ww' } this.setState({ name: 'zs' },() => { /
React生命周期中有哪些坑？如何避免？
zz130428的博客
12-08 1164
render 函数返回的是 JSX 的数据结构，用于描述具体的渲染内容，但是 render函数并不会去真正的渲染组件，真正的渲染是依靠 React 操作 JSX 描述结构来完成，而且 render 函数应该是一个纯函数，不应该在里面产生副作用，比如调用 setState 函数（render 函数在每次渲染的时候都会被调用，而 setState 又会触发渲染，所以就会造成死循环）在讨论React 的生命周期的时候，一定是在讨论类组件，因为函数组件并没有生命周期的概念，它本身就是一个函数，只会从头执行到尾巴。
react笔记四：你可能不需要使用派生 state（解读--个人）
lm13420109892的博客
09-05 469
react派生state的学习
关于react派生状态的一些思考以及最佳实践
北海有凤的博客
10-25 301
React之派生state react在16.3版本以前，想要在props发生变化的时候去更新组件内部的state的唯一方式是使用componentWillReceiveProps，后面增加了一个getDerivedStateFromProps来达到这种目的。 使用派生state会存在以下两种情况： 将父组件传递的props复制一份放到子组件的state中进行管理 在componentWillReceiveProps中接收props的变化，以更新子组件state 复制props到state 大多数人
react 派生state问题，非单一数据源导致状态不更新问题
qq_35089721的博客
07-25 576
https://www.jb51.net/article/147331.htm 官网：https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component 建议模式：https://zh-hans.rea...
【译】React v16.4.0：你可能并不需要派生状态（Derived State）
weixin_33690963的博客
06-29 344
很长一段时间，componentWillReceiveProps生命周期是在不进行额外render的前提下，响应props中的改变并更新state的唯一方式。在16.3版本中，我们介绍了一个新的替代生命周期getDerivedStateFromProps去更安全地解决相同的问题。同时，我们意识到人们对这两个方式都存在很多的误解，我们发现了其中的一些反例触发了一些奇怪的bug。在本次版本中我们修复...
你可能不需要使用派生 state
weixin_43852916的博客
01-26 170
React 16.4 版本修复了一个 getDerivedStateFromProps 的 bug，这个 bug 会在 React components 复现一些已知的 bug。如果这个版本导致出现的问题，导致您在修复过之后还已知出现的话，我们非常抱歉。在这篇文章里，我们会展示一些常见的反面模式，和相对应的，我们推荐的模式。 在很长一段时间内，生命周期函数 componentWillReceiveProps 是响应 Props 变化之后进行更新的唯一方式。16.3 版本里, 我们介绍了一个替代版的生命周期函
echarts-for-react版本
最新发布
01-31
echarts-for-react是一个基于React框架封装的ECharts图表库。...除了以上介绍的版本，还有一些其他的衍生版本，例如echarts-for-react-lite等，它们都是在echarts-for-react基础上进行了一些定制和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值