React获取环境变量

1、首先，运行脚本npm run eject把webpack配置解封出来

注意：谨慎使用npm run eject，一旦解封无法还原

2、在scripts目录下找到分别对应开发、测试、生产环境的构建文件

测试

开发

最后，在项目逻辑中 consolelog(processenv) 即可

第1、2步骤同上。

3、添加自定义的根据环境变化的内容

startjs文件

testjs文件

buildjs文件

4、在项目中拿到环境值

1 由于每次服务器返回的都是HTML模板，存储在前端的数据内容不能方便地持久化，因此前端状态的维护很麻烦。

2 使用LocalStorage或者Cookie来存储数据的安全性比较低，而且不灵活，比如存储的数据删除或者更改需要通过浏览器来解决。

3 基于React的服务端数据持久化方案的开发过程比较复杂，需要考虑到设计模式，路由管理，数据库以及安全等因素。

之前我们已经掌握了useState的使用，在 class 中，我们通过在构造函数中设置 thisstate 为 { count: 0 } 来初始化 count state 为 0 ：

在函数组件中，我们没有 this ，所以我们不能分配或读取 thisstate 。我们直接在组件中调用 useState Hook：

既然我们知道了 useState 的作用，那么掌握 useEffect 就更容易，函数组件中没有生命周期，那么可以使用 useEffect 来替代。如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount ， componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

使用 Hook 的示例

默认情况下，它在第一次渲染之后和每次更新之后都会执行。你可能会更容易接受 effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。

数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。有些副作用可能需要清除，所以需要返回一个函数，比如挂载时设置定时器，卸载时取消定时器。

使用 Hook 的示例

你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可，如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（ [] ）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。

通过跳过 Effect 进行性能优化，在某些情况下，每次渲染后都执行清理或者执行 effect 可能会导致性能问题。在 class 组件中，我们可以通过在 componentDidUpdate 中添加对 prevProps 或 prevState 的比较逻辑解决：

这是很常见的需求，所以它被内置到了 useEffect 的 Hook API 中。如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可：

你已经学习了 State Hook 和 Effect Hook，将它们结合起来你可以做很多事情了。它们涵盖了大多数使用 class 的用例。

useState()是改变状态的开关，将状态添加到函数组件需要4个步骤:启用状态、初始化、读取和更新。

要将<Bulbs> 转换为有状态组件，需要告诉 React：从'react'包中导入useState钩子，然后在组件函数的顶部调用useState()。

在Bulbs函数的第一行调用useState()，在组件内部调用会使该函数成为有状态的函数组件。

启用状态后，下一步是初始化。

useState(false)用false初始化状态。

on状态变量保存状态值。

状态已经启用并初始化，现在可以读取它了。但是如何更新呢再来看看useState(initialState)返回什么。

useState(initialState)返回一个数组，其中第一项是状态值，第二项是一个更新状态的函数。

状态一旦改变，React 就会重新渲染组件，on变量获取新的状态值。

状态更新作为对提供一些新信息的事件的响应。这些事件包括按钮单击、>

以上就是关于React获取环境变量全部的内容，包括:React获取环境变量、react数据持久化缺点、React中useEffect使用等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！