React Hooks简单总结

超、凢脫俗 2023-01-05 14:11 140阅读 0赞

# 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