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