react学习之useState和useEffect

 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>);
}