hooks基础教程地址
https://www.bilibili.com/video/BV1y4411Q7yH?p=1
react hooks
react hooks必须在react 16.8及其以上版本才能生效
useState
const [count, setCount] = useState(0); // 数组解构
// 等同于
const _useState = useState(0);
const count = _userState[0];
const setCount = _userState[1];
// useState不能写在条件语句里面,它只能顺序执行
useEffect
useEffect 等同于componentDidMount(组件挂载的时候)和componentDidUpdate(组件更新的时候)与componentWillUnMount(组件被销毁前执行)三个个生命周期函数。
useEffect 是异步的,它不影响我们的render更新,但是实时计算页面大小就会出现问题,因为它是异步的。
const [count, setCount] = useState(0);
useEffect(() => {
console.log('test content');
return () => {
consolo.log('count状态发生改变执行销毁');
};
}, [count]);
// 如果不设置[]或者[count],那么只要组件被更新都会执行componentWillUnMount,[]为当前组件被销毁前执行
组件通信
https://www.yuque.com/senkita/reviews/gbipsa
useReducer
useReducer更像是reducer的缩减实现方法
import React, {useReducer} from 'react';
function reducerDemo() {
const [count, dispatch] = useReducer((state, action) => {
switch(action) {
case 'add':
return state++;
case 'sub':
return state--;
default:
return state;
}
}, 0)
return (
<div>
<h1>{count}</h1>
<button onClick={() => dispatch('add')}>add</button>
<br />
<button onClick={() => dispatch('sub')}>sub</button>
</div>
);
}
export default reducerDemo;
useReducer + useContext实现redux
https://blog.csdn.net/pz1021/article/details/104763207
useMemo实现shoudComponentUpdate
https://blog.csdn.net/pz1021/article/details/104763207
useRef获取Dom,和input实现双向数据绑定并且赋值给变量
https://blog.csdn.net/pz1021/article/details/104763207
自定义Hooks函数
https://blog.csdn.net/pz1021/article/details/104763207