react子组件修改了全局方法父组件获取不到最新值

react子组件修改了全局方法父组件获取不到最新值,第1张

在React中,子组件可以通过props来修改父组件的全局方法,但是如果想要获取最新值,就必须重新渲染父组件,而且需要确保子组件把最新的值传递给了父组件。所以,实现修改父组件全局方法的唯一方法就是在子组件修改全局方法之后,调用父组件的setState方法重新渲染父组件,然后再获取最新值。

初始化的时候Son很容易接受Dad的值 但是当 Dad赋值给Son A的值动态变化后,Son该如何将propsA传给stateA

其实问题的根本子组件和父都会修改 子组件本身的状态问题

一、组件执行的生命周期: 参考 >

React组件间传递数据确比较恼火目前基本通props传递所必须buttonlistitem共父组件设置state再通传递父组件定义事件处理函数更新状态通状态更新触发组件更新……复杂看jsfiddle

最后给出另一个例子,试着理解它。

react 作为一款最主流的前端框架之一,在设计的时候除了简化 *** 作之外,最注重的地方就是节省性能了。diff算法就是为 节省性能 而设计的,diff算法和虚拟DOM的完美结合是react最有魅力的地方。其中,diff 是 different 的简写,这样一来,diff 算法是什么也就顾名思义了——找不同。

在DOM需要更新的时候,通过diff算法可以 计算出 虚拟DOM 中真正变化的部分,从而只针对变化的部分进行更新渲染,避免”牵一发而动全身“,造成性能浪费。

虽然完美地实现了找不同的功能,但是傻瓜式的 循环递归对节点进行依次的对比 ,使其算法的时间复杂度为 O(n^3) ,其中n是dom树的节点数。如果dom数足够大的话,这个算法将对cpu形成绝杀。

为了优化diff算法,react中对普通的diff算法实行了三大策略,成功将时间复杂度降为 O(n)

tree diff 是diff算法的基础策略,它的重点在于 同层比较

出于对diff算法的优化,react的tree diff对DOM节点的跨层级移动的 *** 作忽略不计,react对Virtual DOM树进行层级控制,也就是说 只对相同层级的DOM节点进行比较 (即同一个父节点下的所有子节点)。对比时,一旦发现节点不存在,则直接删除掉该节点以及之下的所有子节点。这样秩序对DOM树进行依次遍历,就可以完成整个树的对比。时间复杂度为O(n)

一个疑问:既然tree diff忽略了跨层级移动的 *** 作,如果这种情况出现了,diff算法会怎么处理呢?

答:不管,多了就新增,少了就删除( 只有创建节点和删除节点的 *** 作 )。所以官方明确建议不要进行DOM节点的跨层级 *** 作。

component diff是组件间的对比

在遇到组件之间的比较时,有三种策略

优化点:

element diff 是针对同一层级的element节点的

在双方同一层级的节点对比时,有三种情况

子节点更新时,会出现以下几种情况:

react中的key值,它不是给开发者使用的。在一般情况下key值是当我们在做子元素遍历的时候需要使用的。因为我们如果要进行数据的更新,就需要进行虚拟dom的对比,而key值就是每个元素节点对应的唯一值。这个时候就需要对比子元素的key值是否有匹配项,如果有的情况下则会进行数据的更新;如果key值没有匹配项,那么这个节点就需要进行删除和重新创建。

因此我们在遍历的时候千万不要用 index下标 或者 时间戳、随机数 等进行key值的赋值。这样会造成元素的移除重新创建浪费性能。

thisprops 对象的属性与组件的属性一一对应,但是有一个例外,就是 thispropschildren 属性。它表示组件的所有子节点

var NotesList = ReactcreateClass({render: function() {return (<ol>{ReactChildrenmap(thispropschildren, function (child) {return <li>{child}</li>;})}</ol>);}});ReactDOMrender(<NotesList><span>hello</span><span>world</span></NotesList>,documentbody);

上面代码的 NoteList 组件有两个 span 子节点,它们都可以通过 thispropschildren 读取,运行结果如下。

hello

world

这里需要注意, thispropschildren 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。所以,处理 thispropschildren 的时候要小心。 

React 提供一个工具方法 ReactChildren 来处理 thispropschildren 。我们可以用 ReactChildrenmap 来遍历子节点,而不用担心 thispropschildren 的数据类型是 undefined 还是 object。

以上就是关于react子组件修改了全局方法父组件获取不到最新值全部的内容,包括:react子组件修改了全局方法父组件获取不到最新值、react父亲怎么获取子组件的state、react 父子组件执行顺序等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/10134079.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-05
下一篇 2023-05-05

发表评论

登录后才能评论

评论列表(0条)

保存