千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版
# React hooks
函数组件
1. 函数组件没有state，没有this指向
2. 函数组件没有生命周期
## userState使用
函数组件没有state，提供了useState并提供读、写2个参数,可以对数据进行读、写操作。
使用代码
```js
import React ,{useState}from 'react' //先引入
export default function Fun() {
const [name, setname] = useState("zs");//可以通过第一个参数读取数据，第二个参数是用来改变第一个参数的数据
const [age, setage] = useState(10);
return (
<div>
<div>姓名:{name}</div>
<button onClick={() => {
setname("ls")
}}>changename</button>
<div>年龄:{age}</div>
<button onClick={() => {
setage(age + 1)
}}>changeage</button>
</div>
)
}
```
## useEffect(副作用函数)
1. 函数组件不存在生命周期 useEffect可以配合逻辑和依赖模拟类中生命周期概念 但是useEffect!=类的生命周期
2. useEffect调用会默认执行一次，接受两个参数，第一个参数是一个回调函数，第二个参数是一个数组
### useEffect中第二个参数数组为空和不为空的区别？
1. 传空数组表示副作用函数不依赖于任何状态，状态发生改变，不会影响到useEffect，并且useEffect只会执行一次
2. 不传空数组表示在useEffect中使用了这个变量，并且在数组中申明了依赖，当依赖的变量状态发生改变时,useEffect会执行，数据状态再次改变，useEffect会判断状态有没有重复执行，重复了，不会再次执行，没重复，useEffect不会重复执行，如果使用了变量不申明，会有eslint警告，useEffect再也不会执行,
### useffect使用
```js
import React ,{useEffect,useState}from 'react'
export default function Fun() {
const [name, setname] = useState("zhangshan");
useEffect(()=>{
setname(name.slice(0,1).toUpperCase()+name.slice(1))
}, [name]);
return (
<div>Fun--{name}
<button onClick={()=>{
setname("lisi")
}}>changename</button>
</div>
)
}
```
### useEffect模拟销毁组件
通过传入的函数return ()=>{} 进行销毁
### useEffect注意点
1. 使用次数？可以使用多次，可以写多个useEffect函数
2. useEffect和useLayoutEffect的区别？
a. 调用的时机不一样，useLayoutEffect更加类似于componentDidMount和componentDidMount操作,在DOM完成更新后会立即调用函数，会阻塞页面渲染，useEffect会在整个页面都跟新完成之后执行
b. useEffect在实际使用中会导致页面抖动，可以把需要操作的dom代码放在useLayoutEffect中，进行dom操作，修改的dom会和react作出更改一起被渲染在页面上，只有一次回流，重绘的代价
