当前位置: 首页> 房产> 家装 > react学习之useState和useEffect

react学习之useState和useEffect

时间:2025/7/9 7:28:01来源:https://blog.csdn.net/weixin_42307283/article/details/141453176 浏览次数:0次

 useState

useState 可以使函数组件像类组件一样拥有 state,函数组件通过 useState 可以让组件重新渲染,更新视图。

实际使用

 setstate()中回调函数的返回值将会成为新的state值回调函数执行时,
  React会将最新的state值作为参数传递

const AddLess = ()=>{const [num,setNum]  = useState(1)
const add = ()=>{setNum((pre)=>{return pre+1} )console.log('num',num)}const less =()=>{/*** 当前例子就是 less方法是 拿到返回的值减一 成为新的数 赋给num*/setNum((pre)=>pre-1)console.log('num',num)}return <div className="addLessBox"><p className="num">{num}</p><div><button onClick={add}>+</button><button onClick={less}>-</button></div><div>{/* 不允许直接渲染 对象 直接写写{userinfo}会报错 */}<p ref={refele} className='user'>{userinfo.name} --- {userinfo.age}</p><button onClick={handleInfo}>修改</button><button onClick={handleRef}>ref修改</button></div></div>
}

 当state的值是一个对象时,修改时是使用新的对象去替换已有对象

   -setState()会触发组件的重新消染,它是异步的

            所以当调用setstate()需要用旧state的值时,一定要注意有可能出现计算错误的情况

            为了避免这种情况,可以通过为setState()传递回调函数的形式来修改

const AddLess = ()=>{
const [userinfo,setuser] = useState({name:'react',age:18})
const handleInfo = ()=>{setuser({...userinfo,name:'react18'})}return <div className="addLessBox"><p className="num">{num}</p><div><button onClick={add}>+</button><button onClick={less}>-</button></div><div>{/* 不允许直接渲染 对象 直接写写{userinfo}会报错 */}<p ref={refele} className='user'>{userinfo.name} --- {userinfo.age}</p><button onClick={handleInfo}>修改</button></div></div>
}

 当state的值是一个数组时,如何向数组里添加数据

const App = ()=>{
const [data,setData] = useState([{id:'001',date:'七',title:'学习',content:'react'},{id:'002',date:'七',title:'学习',content:'nuxt'},])//接收子组件传来的值const handleData = (sondata)=>{console.log("data",sondata)sondata.id = Date.now() + ''setData([sondata,...data])}return <div><LogForm onhandleData={handleData}/></div>}

上面的例子都是setState的操作都是放在具体的方法中,没有直接在函数体中调用。那可不可以在函数体里直接调用setState呢?答案是不可以

为什么呢?

当我们直接在函数体中调用setState时,就会触发错误  ---  too many re-renders

 

 

那必须在函数体里直接使用 setState,那就要用到useEffect


useEffect

解决代码中的副作用 例如上面提到的在函数体里直接操作setState

 语法

useEffect(()=>{return destory
},dep)

 useEffect()是一个钩子函数,需要一个函数作为第一个参数

        这个作为参数的函数,将会在组件渲染完毕后执行

         默认情况下,useEffect()中的函数,会在组件渲染完成后调用,并且是每次渲染完成后都会调用

 在 useEffect()可以传递第二个参数

        第二个参数是一个数组,在数组中可以指定effect的依赖项

        指定后,只有当依赖发生变化时,effect才会被触发

        如果依赖项设置一个空数组,则意味Effect只会在组件初始化触发一次,后面都不会触发了;不设置第二个参数,那么每次组件渲染effect也跟着渲染

function App() {const [count,setCount] = useState(0)const [count2,setCount2] = useState(0)const changeCount = ()=>{setCount(1)}useEffect(()=>{console.log("effect执行")setCount2(pre=>++pre)},[count])return (<div><p>count:{count}</p><p>count2:{count2}</p><button onClick={changeCount}>修改count</button></div>);
}

 

关键字:react学习之useState和useEffect

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: