react Hooks :useState的使用,以及设置回调

react普通class组件

import React, { Component} from 'react'

export default class App extends Component {
  state = {
    count: 0
  }
  render() {
    const { count } = this.state
    return (
      <div>
        <button
          type="button"
          onClick={() => { this.setState({ count: count + 1 }) }}>
          Click:{count}
        </button>
      </div>
    )
  }
}

使用react Hooks 的函数式组件

import React, { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  //useState(),返回值是一个只有两个成员的数组,第一个是count本身,第二个是设置count的方法
  return (
    <div>
      <button
        type="button"
        onClick={() => setCount(count + 1)}>
        Click:{count}
      </button>
    </div>
  );

}
export default App

如果需要setCount后直接使用count数据,使用的还是旧的count数据,要想使用最新的count数据,必须配合useEffect这个 hook,在 useEffect 的第二个参数中传count就行了,变相的实现了设置回调的效果

useEffect(() => {console.log(count)}, [count]) 

[count]作为第二个参数,组件重渲染的时候,React 将对前一次渲染的 [count] 和后一次渲染的 [count] 进行比较,如果发生改变,则执行effect,否则就跳过effect

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Hooks 中的 `setState` 并没有提供直接的回调函数参数,与 Class 组件中的 `setState` 不同。在处理需要在 `setState` 完成后执行回调的情况下,可以使用 `useEffect` 钩子来模拟实现。 以下是一个示例代码,展示了如何在 `setState` 完成后执行回调函数: ```jsx import React, { useState, useEffect } from 'react'; function App() { const [count, setCount] = useState(0); const handleButtonClick = () => { setCount(prevCount => prevCount + 1); }; useEffect(() => { // 这里的回调函数会在每次 count 更新后执行 console.log('Count updated:', count); }, [count]); return ( <div> <button onClick={handleButtonClick}>Increment</button> <p>Count: {count}</p> </div> ); } export default App; ``` 在上述代码中,我们通过 `useState` 定义了一个名为 `count` 的状态变量,并使用 `setCount` 进行更新。在 `handleButtonClick` 函数中,我们通过传递一个回调函数给 `setCount` 来进行更新。这个回调函数接收前一个状态值作为参数,并返回新的状态值。 在函数组件中使用 `useEffect` 钩子,并将 `count` 添加为依赖项。当 `count` 发生变化时,`useEffect` 的回调函数会被触发执行。这就实现了在 `setState` 完成后执行回调的效果。 请注意,`useEffect` 的回调函数会在组件渲染之后执行,并且每次 `count` 更新时都会触发。如果只想在组件挂载或卸载时执行一次回调,可以将依赖项数组留空。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值