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

React Hooks :为什么将set state函数传递给子组件是不好的做法?

将setState函数直接传递给子组件是不好的做法,原因如下:

  1. 违反了单一数据源原则:React中推崇单一数据源的原则,即所有的状态都应该由父组件管理和控制。将setState函数传递给子组件后,子组件就可以直接修改父组件的状态,导致状态的管理变得混乱不清。
  2. 破坏了组件的封装性:组件应该是独立、可复用的,将setState函数传递给子组件后,子组件就依赖于父组件的具体实现细节,无法独立存在。这样一来,如果父组件的实现发生变化,就需要修改所有使用该子组件的地方,增加了维护成本。
  3. 可能引发性能问题:setState函数的调用会触发组件的重新渲染,如果将setState函数传递给子组件,子组件可能会频繁地调用该函数,导致不必要的重新渲染,影响性能。

为了避免上述问题,可以采用以下替代方案:

  1. 使用props传递数据:父组件可以通过props将需要的数据传递给子组件,子组件通过props接收数据并进行相应的操作,但不能直接修改父组件的状态。
  2. 使用回调函数:父组件可以定义一个回调函数,将该函数传递给子组件,子组件可以通过调用该回调函数来通知父组件需要修改状态。这样可以保持单一数据源原则,并且提供了一种可控的方式来管理状态。

综上所述,将setState函数直接传递给子组件是不好的做法,应该通过props传递数据或使用回调函数来实现组件之间的通信和状态管理。

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

相关·内容

社招前端react面试题整理5失败

,只有第一次生效,后期需要更新状态,必须通过useEffectTableDeail一个公共组件,在调用它组件里面,我们通过set改变columns值,以为传递给TableDeail columns...即:Hooks 组件(使用了Hooks函数组件)有生命周期,而函数组件(未使用Hooks函数组件没有生命周期。...下面具体 class 与 Hooks 生命周期对应关系:constructor:函数组件不需要构造函数,可以通过调用 **useState 来初始化 state**。...Reactprops为什么只读?this.props组件之间沟通一个接口,原则上来讲,它只能从父组件流向组件React具有浓重函数式编程思想。提到函数式编程就要提一个概念:纯函数。...hooks父子值父传子在父组件中用useState声明数据 const [ data, setData ] = useState(false)把数据传递给组件<Child data={data} /

4.6K30

一道React面试题把我整懵了

原因就是我们每次执行render,传递给组件options,onSelect一个新对象/函数。这样在做shallowEqual时,会认为有更新,所以会更新List组件。...hooks父子值父传子在父组件中用useState声明数据 const [ data, setData ] = useState(false)把数据传递给组件<Child data={data} /...,组件第二次接收到props时候为什么 React 要用 JSX?...,只有第一次生效,后期需要更新状态,必须通过useEffectTableDeail一个公共组件,在调用它组件里面,我们通过set改变columns值,以为传递给TableDeail columns...React Hooks 和生命周期关系?函数组件 本质函数,没有 state 概念,因此不存在生命周期一说,仅仅是一个 render 函数而已。

1.1K40

阿里前端二面必会react面试题总结1

state、 各种组件生命周期钩子等,但是在函数定义中,我们却无能为力,因此 React 16.8 版本推出了一个新功能 (React Hooks),通过它,可以更好函数定义组件中使用 React...参考 前端进阶面试题详细解答hooks父子值父传子在父组件中用useState声明数据 const [ data, setData ] = useState(false)把数据传递给组件<Child...父子父可以通过事件方法值,和父传子有点类似。...Reactprops为什么只读?this.props组件之间沟通一个接口,原则上来讲,它只能从父组件流向组件React具有浓重函数式编程思想。提到函数式编程就要提一个概念:纯函数。...提供了一种节点渲染到存在于父组件以外 DOM 节点优秀方案Portals React 16提供官方解决方案,使得组件可以脱离父组件层级挂载在DOM树任何位置。

2.7K30

关于前端面试你需要知道知识点

React Hooks 限制主要有两条: 不要在循环、条件或嵌套函数中调用 Hook; 在 React 函数组件中调用 Hook。 那为什么会有这样限制呢?...React Hooks 和生命周期关系? 函数组件 本质函数,没有 state 概念,因此不存在生命周期一说,仅仅是一个 render 函数而已。...即:Hooks 组件(使用了Hooks函数组件)有生命周期,而函数组件(未使用Hooks函数组件没有生命周期。...这样好处,可以数据请求放在这里进行执行,需要参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。...父子值 父传子 在父组件中用useState声明数据 const [ data, setData ] = useState(false) 把数据传递给组件 <Child data={data}

5.4K30

【愚公系列】2023年03月 其他-Web前端基础面试题(react专项_35道)

state)和属性(props)之间有何不同 4、什么高阶组件 5、为什么建议传递给 setState 参数一个 callback 而不是一个对象 6、(在构造函数中)调用 super(props...State 可能会随着时间推移而发生突变,但多数时候作为用户事件行为结果。 Props则是组件配置。props 由父组件递给组件,并且就组件而言,props 不可变。...状态改变时,组件通过重新渲染做出响应 11、React这三个点(…)做什么 扩展值符号,把对象或数组里每一项展开,属于ES6语法 12、简单介绍下react hooks 产生背景及...hooks优点 hooks针对在使用react时存在以下问题而产生组件之间复用状态逻辑很难,在hooks之前,实现组件复用,一般采用高阶组件和 Render Props,它们本质复用逻辑提升到父组件中...开发者总是可以查找 next-higher 函数语句,以查看 this 值 30、为什么建议传递给 setState 参数一个 callback 而不是一个对象 因为 this.props 和 this.state

7.6K10

【面试题】412- 35 道必须清楚 React 面试题

问题 4:在 React 中如何处理事件 主题: React 难度: ⭐⭐ 为了解决跨浏览器兼容性问题,SyntheticEvent 实例将被传递给事件处理函数,SyntheticEvent React...基本上,这是一个模式,React 组合特性中衍生出来,称其为纯组件,因为它们可以接受任何动态提供组件,但不会修改或复制输入组件任何行为。... props 参数传递给 super() 调用主要原因构造函数中能够通过this.props来获取传入 props。 传递 props ? 没传递 props 上面示例揭示了一点。...这种方式很少被使用,咱们可以一个函数递给setState,该函数接收上一个 state 值和当前props,并返回一个新状态,如果咱们需要根据以前状态重新设置状态,推荐使用这种方式。...主题: React 难度: ⭐⭐⭐⭐ 通常,render props和高阶组件仅渲染一个组件React团队认为,Hooks 服务此用例更简单方法。

4.3K30

react常见面试题

组件之间值父组件组件值 在父组件中用标签属性=形式值 在组件中使用props来获取值组件给父组件值 在组件中传递一个函数组件中用props来获取传递函数,然后执行该函数...在执行函数时候把需要传递值当成函数实参进行传递兄弟组件之间值 利用父组件 先把数据通过 【组件】===》【父组件】 然后在数据通过 【父组件】===〉【组件】 消息订阅 使用PubSubJs...React-Hooks 一套能够使函数组件更强大、更灵活“钩子”。函数组件比起类组件少了很多东西,比如生命周期、对 state 管理等。...如果说函数组件一台轻巧快艇,那么 React-Hooks 就是一个内容丰富零部件箱。... props 参数传递给 super() 调用主要原因构造函数中能够通过this.props来获取传入 props传递了propsclass MyComponent extends React.Component

1.5K10

前端二面react面试题整理

在父组件中用标签属性=形式值 在组件中使用props来获取值组件给父组件值 在组件中传递一个函数组件中用props来获取传递函数,然后执行该函数 在执行函数时候把需要传递值当成函数实参进行传递兄弟组件之间值...利用父组件 先把数据通过 【组件】===》【父组件】 然后在数据通过 【父组件】===〉【组件】 消息订阅 使用PubSubJs插件使用 React Hooks 好处啥?...什么 React HooksHooks React 16.8 中新添加内容。它们允许在不编写类情况下使用state和其他 React 特性。...参考 前端进阶面试题详细解答调和阶段 setState内部干了什么当调用 setState 时,React会做第一件事情递给 setState 对象合并到组件的当前状态这将启动一个称为和解(reconciliation...想象一下这个场景:父组件把它 setState 函数递给组件组件调用了它。这时候更新组件触发,但是要渲染就只有那个组件么?明显不是,还有它组件

1.1K20

react面试题整理2(附答案)

组件中使用props来获取值组件给父组件值 在组件中传递一个函数组件中用props来获取传递函数,然后执行该函数 在执行函数时候把需要传递值当成函数实参进行传递兄弟组件之间值...如果现用现取称为非受控组件,而通过setState输入值维护到了state中,需要时再从state中取出,这里数据就受到了state控制,称为受控组件。...、Render props、hooks 有什么区别,为什么要不断迭代这三者目前react解决代码复用主要方式:高阶组件(HOC) React 中用于复用组件逻辑一种高级技巧。...缺点∶ hoc传递给被包裹组件props容易和被包裹后组件重名,进而被覆盖(2)Render props 官方解释∶"render prop"指一种在 React 组件之间使用一个值为函数 prop...>)}/>由此可以看到,render props优缺点也很明显∶优点:数据共享、代码复用,组件state作为props传递给调用者,渲染逻辑交给调用者。

4.3K20

前端react面试题合集_2023-03-15

(1)React16.8 加入hooks,让React函数组件更加灵活,hooks之前,React存在很多问题:在组件间复用状态逻辑很难复杂组件变得难以理解,高阶组件函数组件嵌套过深。...为什么使用jsx组件中没有看到使用react却需要引入react?本质上来说JSXReact.createElement(component, props, ...children)方法语法糖。...hooks父子值父传子在父组件中用useState声明数据 const [ data, setData ] = useState(false)把数据传递给组件<Child data={data} /...修改由 render() 输出 React 元素树react 父子值父传子——在调用组件上绑定,组件中获取this.props 父——引用组件时候传过去一个方法,组件通过this.props.methed... props 参数传递给 super() 调用主要原因构造函数中能够通过this.props来获取传入 props传递了propsclass MyComponent extends React.Component

2.8K50

一文总结 React Hooks 常用场景

在我看来,使用 React Hooks 相比于从前组件有以下几点好处: 代码可读性更强,原本同一块功能代码逻辑被拆分在了不同生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks...可以功能代码聚合,方便阅读维护; 组件树层级变浅,在原本代码中,我们经常使用 HOC/render props 等方式来复用组件状态,增强功能等,无疑增加了组件树层数及渲染,而在 React Hooks...state 逻辑抽离; (3)调用 State Hook 更新函数并传入当前 state 时,React 跳过组件渲染及 effect 执行。...props 和 state 很难,这也是为什么 通常你会想要在 effect 内部 去声明它所需要函数。...,触发父组件重新渲染;父组件渲染,const info = { name, age } 一行会重新生成一个新对象,导致传递给组件 info 属性值变化,进而导致组件重新渲染。

3.4K20

前端一面react面试题总结

参考 前端进阶面试题详细解答React 高阶组件、Render props、hooks 有什么区别,为什么要不断迭代这三者目前react解决代码复用主要方式:高阶组件(HOC) React 中用于复用组件逻辑一种高级技巧...>)}/>由此可以看到,render props优缺点也很明显∶优点:数据共享、代码复用,组件state作为props传递给调用者,渲染逻辑交给调用者。...,只有第一次生效,后期需要更新状态,必须通过useEffectTableDeail一个公共组件,在调用它组件里面,我们通过set改变columns值,以为传递给TableDeail columns...React Hooks 限制主要有两条:不要在循环、条件或嵌套函数中调用 Hook;在 React 函数组件中调用 Hook。那为什么会有这样限制呢?...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢?因为 Hooks 设计基于数组实现。在调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误 Hook。

2.8K30

超实用 React Hooks 常用场景总结

在我看来,使用 React Hooks 相比于从前组件有以下几点好处: 代码可读性更强,原本同一块功能代码逻辑被拆分在了不同生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks...可以功能代码聚合,方便阅读维护; 组件树层级变浅,在原本代码中,我们经常使用 HOC/render props 等方式来复用组件状态,增强功能等,无疑增加了组件树层数及渲染,而在 React Hooks...state 逻辑抽离; (3)调用 State Hook 更新函数并传入当前 state 时,React 跳过组件渲染及 effect 执行。...外部函数使用了哪些 props 和 state 很难,这也是为什么 通常你会想要在 effect 内部 去声明它所需要函数。...,触发父组件重新渲染;父组件渲染,const info = { name, age } 一行会重新生成一个新对象,导致传递给组件 info 属性值变化,进而导致组件重新渲染。

4.6K30

35 道咱们必须要清楚 React 面试题

基本上,这是一个模式,React 组合特性中衍生出来,称其为纯组件,因为它们可以接受任何动态提供组件,但不会修改或复制输入组件任何行为。... props 参数传递给 super() 调用主要原因构造函数中能够通过this.props来获取传入 props。...主题: React 难度: ⭐⭐⭐ 请看下面的代码: 答案: 1.在构造函数没有 props 传递给 super,它应该包括以下行 constructor(props) { super(props...这种方式很少被使用,咱们可以一个函数递给setState,该函数接收上一个 state 值和当前props,并返回一个新状态,如果咱们需要根据以前状态重新设置状态,推荐使用这种方式。...主题: React 难度: ⭐⭐⭐⭐ 通常,render props和高阶组件仅渲染一个组件React团队认为,Hooks 服务此用例更简单方法。

2.5K21

react】203-十个案例学会 React Hooks

可以功能代码聚合,方便阅读维护 组件树层级变浅,在原本代码中,我们经常使用 HOC/render props 等方式来复用组件状态,增强功能等,无疑增加了组件树层数及渲染,而在 React Hooks...SomeComponent 重新渲染,倘若 SomeComponent 一个大型组件树,这样 Virtual Dom 比较显然很浪费,解决办法也很简单,参数抽离成变量。...所以函数组件在每次渲染时候如果有传递函数的话都会重渲染组件。...所以在前面的例子中,可以返回 handleClick 来达到存储函数目的。 所以 useCallback 常用记忆事件函数,生成记忆后事件函数并传递给组件使用。...useImperativeHandle 透 Ref 通过 useImperativeHandle 用于让父组件获取组件索引 在线 Demo import React, { useRef, useEffect

3K20

React学习笔记(四)—— 组件通信与状态管理、Hooks、Redux、Mobe

1.2、父依然使用props,父组件先给组件传递一个回调函数组件调用父组件回调函数传入数据,父组件处理数据即可。...方法新添加用户信息发送给父组件完成添加功能,所以这里实现了父功能。  ...* UserListContainer中包含UserList组件,所以UserListContainer组件,而UserList组件  * 组件通过调用父组件onAddUser方法输入用户添加到集合中...2.2、Hooks基础 Hook  React 16.8 新增特性。它可以让你在不编写 class 情况下使用 state,一般搭配函数组件使用。...2.2.1、useState() hooks状态钩子 搭配函数组件,主要是可以进行组件状态管理,好处不像传统state需要注意this指向(函数组件中没有this)。

4.6K40

美团前端一面必会react面试题4

(1)propsprops一个从外部组件参数,主要作为就是从父组件组件传递数据,它具有可读性和不变性,只能通过外部组件主动传入新props来重新渲染组件,否则组件props以及展现形式不会改变...(3)区别props 递给组件(类似于函数形参),而state 组件内被组件自己管理(类似于在一个函数内声明变量)。...props 不可修改,所有 React 组件都必须像纯函数一样保护它们 props 不被更改。state 组件中创建,一般在 constructor中初始化 state。...如果现用现取称为非受控组件,而通过setState输入值维护到了state中,需要时再从state中取出,这里数据就受到了state控制,称为受控组件。...(2)父组件递给组件方法作用域组件实例化对象,无法改变。(3)组件事件回调函数方法作用域组件实例化对象(绑定父组件提供方法就是父组件实例化对象),无法改变。

3K30

2023前端二面react面试题(边面边更)

父子值父传子在父组件中用useState声明数据 const [ data, setData ] = useState(false)把数据传递给组件组件接收...在父组件中用useState声明数据 const [ data, setData ] = useState(false)把更新数据函数递给组件...react 父子值父传子——在调用组件上绑定,组件中获取this.props 父——引用组件时候传过去一个方法,组件通过this.props.methed()传过去参数connectionReact...(1)React16.8 加入hooks,让React函数组件更加灵活,hooks之前,React存在很多问题:在组件间复用状态逻辑很难复杂组件变得难以理解,高阶组件函数组件嵌套过深。...React官方对Fragment解释:React一个常见模式一个组件返回多个元素。Fragments 允许你列表分组,而无需向 DOM 添加额外节点。

2.4K50
领券