qbo*_*lec 6 lifecycle components stateful reactjs
TL; DR:我是否可以信任协调算法不重新实例化我的有状态组件只是因为虚拟DOM中的更改过于复杂而无法跟踪它?
我相信,React.Component实例是由React运行时创建和销毁的,以匹配Virtual DOM的形状.作为程序员,我声明性地描述了虚拟DOM,实例的生命周期由React本身控制.据我所知,当Virtual DOM改变其形状时,特殊的协调算法会尽可能多地重用旧实例.另外,我理解如果唯一的区别在于道具,那么旧的实例只需通过生命周期方法更新其道具并通知它.
我还希望,对于简单地将道具映射到Virtual DOM的功能组件,谈论生命周期没有意义,因为如果这是相同或不同的实例并不重要.特别是,人们不必相信协调算法非常智能,因为无论是与更新道具相同的实例还是新实例,组件的外观和行为都是相同的.
但在有状态组件的情况下,我是否应该信任协调算法?
比如说,我有一个组件可以将某些数据存储在其状态中,并直接存储在其实例上.此外,我们假设该组件的构造函数初始化它们:
constructor(props) {
super(props);
this.state = {
value: ''
};
this.length = 0;
}
Run Code Online (Sandbox Code Playgroud)
此外,假设状态因为用户操作而及时发展
onChange = (e) => {
this.setState({value: e.target.value}
this.length = e.target.value.length;
}
Run Code Online (Sandbox Code Playgroud)
我可以,或者我不能,假设这个实例不会在React框架的一时兴起被杀死和重建吗?上面的组件不是"功能性的",因为它具有内部状态,作为开发人员,我认为即使在协调期间组件树的较高部分发生了复杂的事情,也会以某种方式"保留".
从文档和Web中的许多示例中,我理解,社区假定实例的状态和私有属性不会重置,除非父级显式更改key属性,或者删除子级,并实例化后来新的.但这些假设是否在文档中明确说明了?
而另一方面的问题是:改变一个key保证创建一个新实例的孩子,或者可以做出反应决定用一个不同的密钥重用一些旧实例(从而重用它的状态)?换句话说:是保证工作的关键技巧还是仅仅是一个黑客攻击?
编辑 一个有问题的情况的例子:https://codesandbox.io/s/9rqrPJnLD.这里我们有一个有状态的组件:
class Stateful extends React.Component{
state = { now: new Date()};
render(){
return <div>{this.state.now.toString()}</div>
}
}
Run Code Online (Sandbox Code Playgroud)
生活在充满敌意的环境中,父母常常改变对布局的看法,而孩子有时会嵌套在div中,有时不会:
class App extends React.Component{
state = { div: true}
componentDidMount(){
setInterval(()=>{
this.setState(state => {
return {div: !state.div}
});
},2000)
}
render(){
return React.createElement(this.state.div ? 'div' : 'span',null,React.createElement(Stateful))
}
}
Run Code Online (Sandbox Code Playgroud)
似乎每次父级更改布局时都会重新实例化子级,并且在发生状态时不会保留状态.这部分回答了我自己的问题.未解决的部分是:对帐算法难以处理的其他情况是什么.
| 归档时间: |
|
| 查看次数: |
726 次 |
| 最近记录: |