如果在 React 函数组件上方或内部声明常量，会发生什么变化？

Question

我的问题是，如果您在 React 函数组件（或类组件）上方或内部声明一个常量，会发生什么变化？ 例如，如果我这样做有什么区别：

const myName = "Olivier";
const myReactComponent = () => {
  const whatsMyName = (name) => console.log(name);
  whatsMyName(myName);
  return <div></div>;
};

或

const myReactComponent = () => {
  const myName = "Olivier";

  const whatsMyName = (name) => console.log(name);
  whatsMyName(myName);
  return <div></div>;
};

如果有人可以向我解释其中的区别，那就太好了！ 又例如，我可以将上面的

whatsMyName

函数也移动吗？ 我的猜测是它与反应生命周期有关。

Answer 1

主要区别在于重新渲染。

在组件外部设置的变量不会触发重新渲染，而在组件内部设置的变量则会触发重新渲染。

一般来说，由于这个原因，您不会在组件内部设置常量...如果您有一个常量，请将其放入常量文件中并根据需要调用 - 这样您就不会出现任何意外的重新渲染。

如果您需要更新变量，请使用

useState

钩子来管理它：

const [name, setName] = useState('Tom');

当您使用

name

更新

setName('New Name')

时，它将触发重新渲染。