为什么我应该在类中声明 var、let 和 const,并要求整个类使用关键字 this
来引用这些变量,而不是仅仅在文件顶部的类,以避免需要使用 this
。我明白了我将多次重复使用的类的实例变量的要点,但如果它只是我网站的一个页面,是否需要在类中声明变量。谢谢。
最佳答案
这是一个共享内存(闭包和上下文)的问题。
当您使用实例存储数据(并通过 this
引用它)时,您无法在安装过程中保留数据(当组件重新安装时)。
当您使用“外部”变量时,数据将持续存在。
这是一个小例子,只需单击按钮几次,看看外部变量的数量如何增加,而实例变量在每次安装时重置:
let externalCounter = 0;
class Test extends React.Component {
componentDidMount() {
externalCounter += 1;
this.myCounter += 1;
}
myCounter = 0;
render() {
return <div>{`external counter is ${externalCounter} and myCounter is ${
this.myCounter
}`}</div>;
}
}
class App extends React.Component {
state = { mount: true };
toggleMount = () => this.setState(({ mount }) => ({ mount: !mount }));
render() {
const { mount } = this.state;
return (
<div>
<button onClick={this.toggleMount}>toggle mount</button>
{mount && <Test />}
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />
当然,我的印象是您正在使用某种模块导出,并且“外部”变量是在模块范围内声明的。
编辑
作为以下评论和问题的后续:
so two classes in separate files. One parent, one child. The child's module level variable will not persist across mounting and mounting.
这并不完全正确。
给定这个模块:
let externalCounter = 0;
class Test extends React.Component {
componentDidMount() {
externalCounter += 1;
this.myCounter += 1;
}
myCounter = 0;
render() {
return <div>{`external counter is ${externalCounter} and myCounter is ${
this.myCounter
}`}</div>;
}
}
export defualt Test;
将其视为具有嵌套函数的大函数:
function SomeModule(){
let externalCounter = 0;
function Test(props){
// some logic
}
return Test;
}
当您在另一个模块(文件)中导入 Test
时,您实际上获取了内部函数 Test
,并且每当 React 重新挂载此组件时,它都会被重新调用,但这并不意味着 SomeModule
函数将被重新调用,它不会。因此,externalCounter
将在调用 Test
函数时保留数据。
这实际上是一个closure .
关于javascript - 为什么不在类外部/顶部声明变量以避免使用此关键字?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52842417/