useState
useState 的使用非常简单,我们从 React 中拿到 useState 后,只需要在使用的地方直接调用 useState 函数就可
userState 里边类型是泛型 可以存入任意类型的数据 在定义一个接收值时 会返回一个数组 数组中第一个值是定义的变量名来接收state数据, 第二个是一个函数 用来修改state的数据 返回值是修改后的state
例如图中的let [n,setN] = useState(0)
- 这里usestate中的0就是state的默认值 也就是初始值
- n来接收当前state的值
- setN就是用来修改state的 返回值是修改后的state
useEffect 生命周期
如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
以往我们在绑定事件、解绑事件、设定定时器、查找 dom 的时候,都是通过 componentDidMount、componentDidUpdate、componentWillUnmount 生命周期来实现的,而 useEffect 会在组件每次 render 之后调用,就相当于这三个生命周期函数,只不过可以通过传参来决定是否调用
其中注意的是,useEffect 会返回一个回调函数,作用于清除上一次副作用遗留下来的状态,如果该 useEffect 只调用一次,该回调函数相当于 componentWillUnmount 生命周期
useEffect 的第二个参数
useEffect 的第二个参数,有三种情况
- 什么都不传,组件每次 render 之后 useEffect 都会调用,相当于 componentDidMount 和 componentDidUpdate
- 传入一个空数组 [], 只会调用一次,相当于 componentDidMount 和 componentWillUnmount
- 传入一个数组,其中包括变量,只有这些变量变动时,useEffect 才会执行