Reactjs const 或 let 在 React 组件中

发布于11月27日

假设我有一个React组件——不管它是否愚蠢——我想从存储中获取一些东西，并将其放入一个变量中，使我的代码更加简洁.我应该使用const还是let？很明显，国家会改变.

这是我所说的一个例子.我想再次强调，随着用户与我的应用程序交互，我的价值观将发生变化.

class MyComponent extends Component {

    render() {

        // Here, should I use const or let?
        const myValues = this.props.someData;

        return(
            <div>

            {myValues.map(item => (
                    <SomeOtherComponent key={item.id} data={item} />
                ))}

            </div>
        );
    };
}

function mapStateToProps(state) {
    return {
        someData: state.someValuesComingFromApi
    }
}

export default connect(mapStateToProps)(MyComponent)

推荐答案

const vs let主要与代码块中的"更改"有关.只有在这样的情况下才重要:

const myValues = this.props.someData;
if (*some condition*) {
  myValues = [];
}

在这种情况下，您需要使用let，因为您正在更改分配给变量myValues的值:

let myValues = this.props.someData;
if (*some condition*) {
  myValues = [];
}

如果props.someData正在更改，它将触发组件的重新渲染.所以const vs let不是来玩的.整个render方法将重新运行.

也就是说，我在你描述的情况下使用const.除非您直接操作变量的值，否则请使用const.

Reactjs相关问答推荐

有没有方法覆盖NextJS 14中的布局？

以下代码是否存在安全问题？

无法将react 路由状态从路由传递给子组件

react '；S使用状态不设置新状态

如何从Reaction-Arborist树获取排序数据

当我无法引用模态组件时，如何使模态组件在 Next.js/React 中管理自己的状态？

如何清除过滤器搜索的状态

PWA：注册事件侦听器不会被触发

使用获取的数据更新状态，但在try console.log 时它给出未定义

React Context API 在 Next.js 中更改路由时获取默认数据

组件安装后调用自定义钩子

使用 React Router v6 监听来自不同组件的组件状态变化

如何在 MUI 数据网格中的 renderCell 组件之间传递状态

谁能根据经验提供有关 useEffect 挂钩的更多信息

React Router 6.4CreateBrowserRouter子元素不显示

如何解决在 react.js 中找不到模块错误

如何使用react 路由将 url 参数限制为一组特定的值？

调用 Jest 和服务方法的问题

渲染的钩子比预期的少.这可能是由 React Hooks 中意外的提前返回语句引起的

加密 Django Rest Framework API 响应 + 解密响应应用程序中的响应

实用课程推荐