首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

把"this.setState“方法放在一行是不是很糟糕?

把"this.setState"方法放在一行是不太理想的做法。这种写法虽然简洁,但可读性较差,不利于代码的维护和调试。

将"this.setState"方法放在一行的问题在于,它可能会导致代码行过长,超出编辑器的可视范围,使代码难以阅读。此外,如果在一行中同时调用多个"this.setState"方法,会使代码更加混乱。

为了提高代码的可读性和可维护性,建议将"this.setState"方法拆分成多行,每个属性或状态更新占据一行。这样可以清晰地展示每个状态的更新,方便其他开发人员理解代码意图,并且便于后续的修改和调试。

以下是一个示例,展示了将"this.setState"方法拆分成多行的做法:

代码语言:txt
复制
this.setState({
  property1: value1,
  property2: value2,
  property3: value3
});

在这个示例中,每个属性和对应的值都占据一行,使代码更加清晰易读。

总结起来,将"this.setState"方法放在一行虽然可以节省代码行数,但会降低代码的可读性和可维护性。因此,建议将其拆分成多行,以提高代码的可读性和可维护性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【react】关于react框架使用的一些细节要点的思考

你可能又会问了:要是我在render()前多次调用this.setState()改变同一个值呢?...这是我们经常会遇到的问题之一,解决办法是:在父组件中写一个能改变父组件state的方法,并通过props传入子组件中 class Son extends React.Component{ render...context的运用,避免“props传递地狱” 3.1假设一个比较极端的场景:你需要从你的子组件里调用父父父父父组件的属性或方法,怎么办!...这个时候你发现,我们在组件和组件中都没有向下传递props,我们就从最下层的Son组件中获取了gene属性,是不是方便!...这得根据它是否需要实时的重渲染决定,如果该变量需要同步到变化的UI中,你应该放在this.state对象中,如果不需要的话,则放在this中(无代码无demo) 【完】--喜欢这篇文章的话不妨关注一下我哟

2K80
  • 为什么说Suspense是一种巨大的突破?

    我不会说这种方法本身是不好的(它能够满足简单用例的需要,而且我们显然可以轻松地对其进行优化,例如将实际的data fetcing抽象到单独的方法中)。...但是这种方式要想规模化(scale)非常难,开发体验也很糟糕。我们可以看到这种方式有如下几个问题: ?...闪烁的loading→糟糕的用户体验 如果用户的互联网连接足够快,显示loading只有几毫秒甚至比完全没有显示任何东西更糟糕,这会使你的应用程序感觉更加笨拙和慢。 你能看到这种模式吗?...此外,还能通过provider对外暴露的方法来执行data fetching,以便我们的组件只要调用了该方法,就能更新context中存储的信息。...理想情况下,我们的组件可以独立工作,因此可以将它们放在任何位置,而不必依赖于其周围组件树中特定位置的其他组件。 但至少现在我们将所有数据和加载状态放在一个中心位置,这是一种改进。

    1.6K30

    48. 精读《Immer.js》源码

    别扭的 setState 我们都知道,react 框架中,setState 支持函数式写法: this.setState(state => ({ ...state, isShow: true }...我们就要默默忍受 “糟糕的 Immutable” 了: this.setState(state => { const cloneProducts = state.products.slice()...所以我们也可以直接两个参数一次性消费: const oldObj = { value: 1 } const newObj = produce(oldObj, draft => (draft.value...这样就完成了最重要的 Immutable 过程,而且浅拷贝并不是消耗性能,加上是按需浅拷贝,因此 Immer 的性能还可以。...draft 的 finalized 都是 false,copy 内部可能还存在大量 draft 属性,因此递归 base 与 copy 的子属性,如果相同,就直接返回;如果不同,递归一次整个过程(从这小节第一行开始

    64830

    给女朋友讲React18新特性:Automatic batching

    今天,在一口气《致命女人2》存货都看完后,可能是感受到了单调乏味,她跑来问我技术问题。 ? 铁憨憨:卡卡,最近好多同事都在聊React18,你给我讲讲呗?...我要你用最通俗的语言最底层的知识讲明白,老娘的时间宝贵的。 ? 我:好啊,难得你要学习,这是18所有新特性,你想先看哪个? 说着,我屏幕转向她。...铁憨憨:“这个名字最长,一串英文一看就很厉害” 我一看,她指着Automatic batching(自动批处理) 什么是批处理 铁憨憨:“批处理,是不是和批发市场搞批发一个意思?” ?...脑补批发市场 虽然对这个比喻无语,但不得不承认:还真挺像! 在React中,开发者通过调用this.setState(或useState的dispatch方法)触发状态更新。...原因在于batchedUpdates方法是同步调用的。

    93240

    Rreact原理

    而是这个对象放到一个更新队列里面 3. 稍后才会从队列当中新的状态提取出来合并到 state 当中,然后再触发组件更新。...state 中,比如定时器 id等 对于这种需要在多个方法中用到的数据,应该直接放在 this 中 this.xxx = ‘bbb’ this.xxx class Hello extends...this.timerId) } render() { … } } vue中不要把和渲染无关的数据放到data中 避免不必要的重新渲染 组件更新机制:父组件更新会引起子组件也被更新,这种思路清晰...创建新数据 // 不要用数组的push / unshift 等直接修改当前数组的的方法 // 而应该用 concat 或 slice 等这些返回新数组的方法 this.setState({ list:...创建新数据 // 不要用数组的push / unshift 等直接修改当前数组的的方法 // 而应该用 concat 或 slice 等这些返回新数组的方法 this.setState({ list

    1.1K30

    常见react面试题(持续更新中)

    可以将数据请求放在这里进行执行,需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。...在React中遍历的方法有哪些?...使用 React 有何优点只需查看 render 函数就会容易知道一个组件是如何被渲染的JSX 的引入,使得组件的代码更加可读,也更容易看懂组件的布局,或者组件之间是如何互相引用的支持服务端渲染,这可以改进...注意事项:key值一定要和具体的元素—一对应;尽量不要用数组的index去作为key;不要在render的时候用随机数或者其他操作给元素加上不稳定的key,这样造成的性能开销比不加key的情况下更糟糕。...可以是带有一个render()方法的类,简单点也可以定义为一个函数。这两种情况下,它都属性props作为输入,返回的一棵元素树作为输出。

    2.6K20

    【React总结(二)】使用 Render props 复用代码

    一般情况下,我们会把组件的 js,和 css 放在一个地方,并且像 Linux 的哲学一样,一个组件只做一个事情。...从 Javascript 的代码复用谈起 现在如果要写一个加法计算器,并且输出打印在控制台,你会怎么写?...其实说白了,就是在父组件有个 render 的属性,然后 render 属性你可以理解为一个回调函数,父组件通过调用 render 方法父组件里面的数据(一般是 state )带出来让业务组件使用,...> ( Hello {data.target} )}/> 例子 React 通过组件来复用代码,但如何共享状态或一个组件的行为封装到其他需要相同状态的组件中,做法却说明得不是清楚...请看代码,我们可以封装一个 Toggle的组件 复用上面三个方法

    1.7K120

    前端工程师彻底征服树结构组件的秘籍

    {"name":"番禺区","id":8},{"name":"海珠区","id":9}]}]}] 递归渲染与记录节点信息 递归就是最常规的方式了,以antd的tree组件为例,大家都会这样做: // 放在...是不是会写一个搜索算法,传入当前节点id,然后回溯去记录路径展示出来?...这虽然可以做到,但显然是不优雅的,我们只需要牺牲空间换时间的方法就可以大大优化这个过程,即是在遍历的过程中节点信息带到下一个递归函数里面去。...基于前面的bfs,可以容易过渡到基于循环实现的dfs function dfs(target, name) { const quene = [...target] do { const...这种方案满足的场景是:只能操作该节点的归属路径,比如只能操作广东和深圳两个节点其他节点disabled 自上而下dfs和自下而上dfs 先提一下,二叉树前中后序遍历,在代码上的差别就在于处理语句放在哪个位置

    52310

    提示

    {"name":"番禺区","id":8},{"name":"海珠区","id":9}]}]}] 递归渲染与记录节点信息 递归就是最常规的方式了,以antd的tree组件为例,大家都会这样做: // 放在...是不是会写一个搜索算法,传入当前节点id,然后回溯去记录路径展示出来?...这虽然可以做到,但显然是不优雅的,我们只需要牺牲空间换时间的方法就可以大大优化这个过程,即是在遍历的过程中节点信息带到下一个递归函数里面去。...基于前面的bfs,可以容易过渡到基于循环实现的dfs function dfs(target, name) { const quene = [...target] do { const...image.png 这种方案满足的场景是:只能操作该节点的归属路径,比如只能操作广东和深圳两个节点其他节点disabled 自上而下dfs和自下而上dfs 先提一下,二叉树前中后序遍历,在代码上的差别就在于处理语句放在哪个位置

    1.5K10

    React后台管理前端系统(基于开源框架开发)起步式

    这样算下来,整个系统搭建时间不会超过半天,而且这个开源框架我已经玩的溜了,后期开发完全不费事.但是,这个方案被我拒绝了。为什么那?...因为我想跳出舒适区.接受更大的挑战,目前和vue并驾齐驱的React项目也流程,很多公司也在使用.于是乎,技术栈就是用React了。...是不是很简单.这是大致的思路.不过有的框架有权限拦截,新的页面路由可能需要给登录的人赋权限才能出现. 等下我会以具体页面案例来做个演示....其他组件和工具库都是这样.假如你页面头部的import 的东西有了大致了解,就继续往下看....,用法.这也不失为一种好的快速上手的方法

    1.9K20

    本周日先行者视频“React多级菜单

    getDefaultProps:顾名思义,这里会初始化一些默认的属性,通常会将固定的内容放在这个过程中进行初始化和赋值,一个控件可以利用this.props获取在这里初始化它的属性,由于组件初始化后,这个方法就不会再调用了...,可以通过this.state来获取值,通过this.setState来修改state值,修改方式如下: 1. function() { 2....this.setState({ 3....showText: 'Hello' 4. }); 5. } 值得注意的是,一旦调用了this.setState方法,控件必将调用render方法,对控件进行再次的渲染,不过,如果React...菜单的存在是一级一级的,在JSON的设计上,可以这样, 先从下到下,写出第一列JSON;然后在它的某一行的右边写出第二列JSON;然后再在第二列的某一行的右边写出第三列JSON。

    1K90
    领券