React函数式组件 ，如果是不需要显示在页面的状态，是不是定义在函数外面比较好?

Question

比如test并不需要显示在页面 但是在组件App中会用到，是不是定义在App组件外部比较好，这样可以减少App组件渲染次数，而count是状态所以通过useState定义在函数内部？

let test = 1;
// App组件
const App = () => {
    const [count, setCount] = useState(0)
    return (
        <span>{count}</span>
    )
}

Answer 1

其实变量是否影响性能，不是看它的值或者它所引用的值是否会被渲染到页面里，因为有很多数据都需要渲染，多来点数据，影响不大。
能影响性能的参数会有如下特征中的一个或多个：

1. 取值频繁变化，进而频繁触发渲染；
2. 被很多地方引用，每次变化会引起很大的变动；
3. 它的变化会引发一系列复杂的运算；
4. 数据量很大，并且都需要实时运算（这条特征和 3 有点交集，但是优化方式有所不同）。

不管是上面的哪一种，都有两个共性：1. 会影响渲染; 2. 会变化。实际上。任何具备这两个共性的参数，不管放到哪里，都有影响性能的潜力；反之，只要不具备其中任何一条，都 可以 (而不是一定)不放进 state。

---

那么，什么样的数据适合独立到 state 之外来维护呢？两种情况：

1. 配置性的参数，比如交给运营人员维护的官网主题色，它影响渲染，但是在组件的整个生命周期里基本不会变化，可视为不变；
2. 常量、魔数等，比如混淆用户口令时用的 salt ，它的取值不会影响渲染。