React Function Component使用变量(而非状态)

Question

使用React class组件，我使用一些变量(而不是this.state(来帮助我的控制逻辑。示例：this.isPressBackspace = false，当我设置变量时，不要使组件重新渲染(例如：this.isPressBackspace = true(。

这在类组件中运行得很好，但当我更改为函数组件时，我不知道this.isPressBackspace该放在哪里。

这是我在codesandbox中的例子。https://codesandbox.io/s/function-component-example-3h98d

Answer 1

useRef返回一个可变ref对象，其当前属性初始化为传递的参数(initialValue(。返回的对象将在组件的整个生存期内持续存在。

const isPressBackspaceRef = React.useRef(false);
const keyDownPositionRef = React.useRef({});
const onKeyDown = (e) => {
// this is wrong syntax
// this.keyDownPosition OR let keyDownPosition
keyDownPositionRef.current = {
start: e.target.selectionStart,
end: e.target.selectionEnd
};
switch (e.key) {
case "Backspace":
isPressBackspaceRef.current = true; // this is wrong syntax ????
break;
default:
break;
}
};
const onChange = (e) => {
const { end } = keyDownPositionRef;
if (isPressBackspaceRef.current) {
const length = end - e.target.selectionEnd;
alert(`You delete ${length} character`);
}
isPressBackspaceRef.current = false;
};

Answer 2

根据我的经验，在处理函数组件时不会使用this关键字。相反，您使用useState这样的钩子。查看以下视频，了解如何开始使用挂钩：https://www.youtube.com/watch?v=O6P86uwfdR0&ab_channel=WebDev简化