useState
useState是React的一个Hook，它是一个方法，可以传入值作为state的默认值，返回一个数组，数组的第一项是对应的状态(默认值会赋予状态)，数组的第二项是更新状态的函数。
- 实现一个加1的组件
import React,{useState} from 'react';
const UseState = () => {
const [count,setCount] = useState(1) // 1是初始值,setCount是设置count的方法
const [istrue,setIstrue] = useState(true) // true 是初始值
// 设置count
const add = () => {
setCount(count+1)
}
return (
<>
{/* 这里直接使用state */}
{istrue ?<h1>{count}</h1>:'' }
<button onClick={() => {setIstrue(!istrue)}}>change</button>
// 第一种：函数直接写在dom中
<button onClick={() => setCount(count + 1)}>+</button>
// 第二种：函数写在add ，dom外
<button onClick={add}>+</button>
</>
)
}
export default UseState;
useEffect
React Hooks 提供了 Effect Hook，可以在函数组件中执行副作用操作，并且是在函数渲染DOM完成后执行副作用操作
useEffect这个方法传入一个函数作为参数，在函数里面执行副作用代码，并且useEffec的第一个参数还支持返回值为一个函数，这个函数执行相当于组件更新和卸载。
- 最常见的做法就是就是在函数参数中写事件注册，在函数的返回函数中写事件销毁
import React,{useState,useEffect} from 'react';
const UseEffect = () => {
// React Hooks 提供了 Effect Hook，可以在函数组件中执行副作用操作，并且是在函数渲染DOM完成后执行副作用操作
// useEffect这个方法传入一个函数作为参数，在函数里面执行副作用代码，并且useEffec的第一个参数还支持返回值为一个函数，这个函数执行相当于组件更新和卸载。
// 最常见的做法就是就是在函数参数中写事件注册，在函数的返回函数中写事件销毁
const [width,setWidth ] = useState(window.innerWidth)
const resizeHandle = () => {
setWidth(window.innerWidth)
}
useEffect(() => {
// 相当于componentDidMount和componentDidUpdate
window.addEventListener('resize',resizeHandle)
// 相当于componentWillUnmount
return () => {
window.removeEventListener('resize',resizeHandle)
}
})
return (
<h1>{width}</h1>
)
}
export default UseEffect;
当改变浏览器宽度的适合，width值会随之改变。
-
useEffect第二个参数效果
- useEffect的第二个参数是一个数组，表示以来什么state和props来执行副作用。
- 数组为空的时候，useEffect就相当于componentDidMoubt和componentWillUnmount这两个生命周期，只在首次渲染和卸载的时候执行
- 当数组中值是状态的时候，就会只监听这一个状态的变化。当然数组中可以多个值，监听存放state的变化。
import React,{useState,useEffect} from 'react';
const UseEffect = () => {
// useEffect的第二个参数,useEffect的第二个参数是一个数组，表示以来什么state和props来执行副作用。
// 数组为空的时候，useEffect就相当于componentDidMoubt和componentWillUnmount这两个生命周期，只在首次渲染和卸载的时候执行
// 当数组中值是状态的时候，就会只监听这一个状态的变化。当然数组中可以多个值，监听存放state的变化。
const [count, setCount] = useState(1);
const [num, setNum] = useState(2);
useEffect(() => {
console.log("count状态更新");
return () => {
console.log("useEffect卸载")
}
},[count])
return (
<>
<h1>{count}</h1>
<button onClick={() => {setCount(count + 1)}}>+</button>
<h1>{num}</h1>
<button onClick={() => {setNum(num + 1)}}>+</button>
</>
);
}
export default UseEffect;
从代码中看出useEffect的第二个参数是count，也就是当count变化的时候，console.log才会执行.
- 多个useEffect
React Hook 允许函数式组件中定义多个useEffect(和useState类似)，多个useEffect互相不受干扰。
import React,{useState,useEffect} from 'react';
const UseEffect = () => {
// 写多个useEffect
// React Hook 允许函数式组件中定义多个useEffect(和useState类似)，多个useEffect互相不受干扰。
const [count, setCount] = useState(1);
const [num, setNum] = useState(2);
useEffect(() => {
console.log("count状态更新");
return () => {
console.log("count卸载")
}
},[count])
useEffect(() => {
console.log("num状态更新");
return () => {
console.log("num卸载")
}
},[num])
return (
<>
<h1>{count}</h1>
<button onClick={() => {setCount(count + 1)}}>+</button>
<h1>{num}</h1>
<button onClick={() => {setNum(num + 1)}}>+</button>
</>
);
return (
<>
<h1>{count}</h1>
<button onClick={() => {setCount(count + 1)}}>+</button>
<h1>{num}</h1>
<button onClick={() => {setNum(num + 1)}}>+</button>
</>
);
}
export default UseEffect;
