react学习之useState和useEffect

 useState

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

 setstate()中回调函数的返回值将会成为新的state值回调函数实行时，
  React会将最新的state值作为参数转达

2. const AddLess = ()=>{
4. const [num,setNum]  = useState(1)
5. const add = ()=>{
6.         setNum((pre)=>{
7.             return pre+1
8.         } )
9.         console.log('num',num)
10.    }
11. const less =()=>{
12.         /**
13.          * 当前例子就是 less方法是 拿到返回的值减一 成为新的数 赋给num
14.          */
15.         setNum((pre)=>pre-1)
16.         console.log('num',num)
17.    }
19. return <div className="addLessBox">
20.         <p className="num">{num}</p>
21.         <div>
22.             <button onClick={add}>＋</button>
23.             <button onClick={less}>－</button>
24.         </div>
26.         <div>
27.             {/* 不允许直接渲染 对象 直接写写{userinfo}会报错 */}
28.             <p ref={refele} className='user'>{userinfo.name} --- {userinfo.age}</p>
29.             <button onClick={handleInfo}>修改</button>
30.             <button onClick={handleRef}>ref修改</button>
31.         </div>
32.     </div>
33. }

复制代码

 当state的值是一个对象时，修改时是利用新的对象去更换已有对象
   -setState()会触发组件的重新消染，它是异步的
            以是当调用setstate()须要用旧state的值时，肯定要留意有大概出现盘算错误的环境
            为了克制这种环境，可以通过为setState()转达回调函数的情势来修改

2. const AddLess = ()=>{
3. const [userinfo,setuser] = useState({name:'react',age:18})
4. const handleInfo = ()=>{
5.         
6.         setuser({...userinfo,name:'react18'})
7.     }
8. return <div className="addLessBox">
9.         <p className="num">{num}</p>
10.         <div>
11.             <button onClick={add}>＋</button>
12.             <button onClick={less}>－</button>
13.         </div>
15.         <div>
16.             {/* 不允许直接渲染 对象 直接写写{userinfo}会报错 */}
17.             <p ref={refele} className='user'>{userinfo.name} --- {userinfo.age}</p>
18.             <button onClick={handleInfo}>修改</button>
19.         </div>
20.     </div>
21. }

复制代码

 当state的值是一个数组时，怎样向数组里添加数据

2. const App = ()=>{
3. const [data,setData] = useState([
4.         {
5.             id:'001',
6.             date:'七',
7.             title:'学习',
8.             content:'react'
9.         },
10.         {
11.             id:'002',
12.             date:'七',
13.             title:'学习',
14.             content:'nuxt'
15.         },
16.     ])
18. //接收子组件传来的值
19.     const handleData = (sondata)=>{
20.         console.log("data",sondata)
21.         sondata.id = Date.now() + ''
22.         setData([sondata,...data])
23.     }
24. return <div>
25.         <LogForm onhandleData={handleData}/>
26.     </div>
27.    
28.    
29.    
30. }

复制代码

上面的例子都是setState的操纵都是放在详细的方法中，没有直接在函数体中调用。那可不可以在函数体里直接调用setState呢？答案是不可以
为什么呢？
当我们直接在函数体中调用setState时，就会触发错误  ---  too many re-renders

 

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

---

useEffect

办理代码中的副作用 比方上面提到的在函数体里直接操纵setState
 语法

2. useEffect(()=>{
3.     return destory
4. },dep)

复制代码

 useEffect()是一个钩子函数，须要一个函数作为第一个参数
        这个作为参数的函数，将会在组件渲染完毕后实行
         默认环境下，useEffect()中的函数，会在组件渲染完成后调用，而且是每次渲染完成后都会调用
 在 useEffect()可以转达第二个参数
        第二个参数是一个数组，在数组中可以指定effect的依靠项
        指定后，只有当依靠发生厘革时，effect才会被触发
        如果依靠项设置一个空数组，则意味Effect只会在组件初始化触发一次，背面都不会触发了；不设置第二个参数，那么每次组件渲染effect也跟着渲染

2. function App() {
3.      const [count,setCount] = useState(0)
4.     const [count2,setCount2] = useState(0)
5. const changeCount = ()=>{
6.         setCount(1)
7.     }
9.   useEffect(()=>{
10.         console.log("effect执行")
11.         setCount2(pre=>++pre)
12.     },[count])
13.   return (
14.         <div>
15.             <p>count:{count}</p>
16.             <p>count2:{count2}</p>
17.             <button onClick={changeCount}>修改count</button>
18.          </div>
19.       
20.       
21.     );
22. }

复制代码