react hooks学习总结

￡神魔★判官ぃ 2023-07-21 15:29 10阅读 0赞

## react hooks学习总结 ##

#### react hooks优点 ####

1：解决了class组件状态逻辑难以复用的问题  
2：解决了class组件复杂难以维护的问题

*  生命周期函数中包含了很多不相干的逻辑，比如componentDidUpdate中只要一个字段发生变化都会触发，为了优化这种场景会写很多的优化逻辑；
 *  类组件中到处都是对状态的访问和处理，导致组件难以拆分成更小的组件；

3：解决了类组件中this的问题  
4：解决了函数组件中不能有自己状态的问题

#### 常用的hooks ####

**useState,**  
const \[status, setStatus\] = useState(initState);  
当使用多个useState的时候必须保证每次他们的调用顺序是一样的；  
initState可以是一个函数，用来处理initState需要经过复杂计算得到；

**useEffect,**

useEffect(() => { 
    return () => { };
    }, [a, b]);

*  第一个参数相当于class组件的componentDidMount和componentDidUpdate，return值相当于componentWillUnmount,第二个参数是一个数组，表示依赖项，只有依赖项发生改变时，第一个函数参数才会执行；
 *  每次组件重新运行effect都会清除上一个effect，组件卸载的时候也会执行清除副作用的函数；
 *  当第二个参数不传递时，每次组件重新渲染都会重新运行effect（默认是依赖所有）; useEffect会在dom更新完成后才会执行；
 *  useEffect的返回值要么是一个函数要么什么都不返回，不能是async函数，他的返回值是一个promise；

import React, {  useState, useEffect } from "react";
    import ReactDOM from "react-dom";
    import "./styles.css";
    
    const BlinkyRender = () => { 
      const [value, setValue] = useState(0);
    
      useEffect(() => { 
        if (value === 0) { 
          setValue(10 + Math.random() * 200);
        }
      }, [value]);
    
      console.log("render", value);
    
      return (
        <div onClick={ () => setValue(0)}>value: { value}</div>
      );
    };
    
    ReactDOM.render(
      <BlinkyRender />,
      document.querySelector("#root")
    );

**useLayoutEffect,**  
useLayoutEffect和useEffect函数签名一致，区别是所有的effect会在组件渲染之后浏览器绘制之前同步执行；而useEffect是异步的，不会阻塞渲染

import React, {  useState, useLayoutEffect } from "react";
    import ReactDOM from "react-dom";
    import "./styles.css";
    
    const BlinkyRender = () => { 
      const [value, setValue] = useState(0);
    
      useLayoutEffect(() => { 
        if (value === 0) { 
          setValue(10 + Math.random() * 200);
        }
      }, [value]);
    
      console.log("render", value);
    
      return (
        <div onClick={ () => setValue(0)}>value: { value}</div>
      );
    };
    
    ReactDOM.render(
      <BlinkyRender />,
      document.querySelector("#root")
    );

**useReducer,**

const [state, dispatch] = useReducer(reducer, initialArg, init);

reducer类似于redux中的reducer，

const reducer = (state, action) { 
      switch (action.type) { 
        case 'increment':
          return { count: state.count + 1};
      }
    }

initialArg用来初始化state；  
如果设置了第三个参数init函数，那么state的初始值会被设置为init(initArg)  
dipatch是一个引用类型，会一直保持不变；  
useReducer中每次取到的state都是最新的值；

**useMemo,**

const f2 = useMemo(() => { }, [a, b])

只要a和b的值保持不变，f2的值一直保持不变，一直是第一个入参函数的调用值，第一个入参函数一直不会执行；

**useCallback,**

const f1 = useCallBack(() => { }, [a, b]);

只要依赖项a和b保持不变，函数f1一直保持不变，也即是f1一直是第一个入参函数  
一般用来缓存一些计算量比较大的运算，节省内存

**useContext,**  
接收context对象（React.creatContext(\{\})创建的对象），并返回该对象的当前值；  
useContext用来获取context的值并且订阅context的变化；  
使用示例

**useRef**

const refContainer =  useRef(initialValue);

refContainer保存的是一个可变的值， 在整个组件的生命周期内保持不变，是一个引用类型;  
initialValue是refContainer.current初始值；  
通过改变refContainer.current的值来解决一些react hooks开发过程中遇到的闭包问题；[参考文章][Link 1]

**useRef+forwardRef+useImperativeHandle**

const  = useImperativeHandle(ref, createHandle, [deps]);

通过useRef+forwardRef+useImperativeHandle来控制暴露给父组件的ref值；

**//下面两个hooks是react-redux中提供的hooks**

**useSelector**

import { useSelector} from 'react-redux';
    const state = useSelector(state => state.someState)

**useDispatch**

import { useDispatch} from 'react-redux';
    const dispatch = useDispatch();

**自定义hook：**  
以use开头并且使用了其他hook

#### hooks使用注意事项 ####

hooks只能在react 函数组件中以及自定义hooks中使用， 不能用在js普通函数以及类组件中；  
hooks只能用在函数顶部，保证每次组件渲染时hooks的执行顺序是一样的，不能用在条件语句，循环语句以及嵌套函数中；

#### hooks原理简介 ####

todo：

#### eslint规则校验 ####

npm install eslint-plugin-react-hooks --save-dev  
// 你的 ESLint 配置

{ 
     "plugins": [
       // ...
       "react-hooks"
     ],
     "rules": { 
       // ...
       "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
       "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
     }
    }

#### 高阶组件Hoc，renderProps和hooks的区别？ ####

Hoc:一个纯函数，接收一个组件并返回另一个组件；redux的connect就是通过高阶组件实现的；

withMouse(withPage(MyComponent))

缺点：组件参数容易被串改（组件本身容易被改写，组件参数统一高阶组件覆盖）；包装组件参数不知道数据来源比较难调试；

const MyComponent = () => {
      return (
        <Mouse>
          {({ x, y }) => (
            <Page>
              {({ x: pageX, y: pageY }) => (
                <Connection>
                  {({ api }) => {
                    // yikes
                  }}
                </Connection>
              )}
            </Page>
          )}
        </Mouse>
      )

renderProps: 该组件通过属性函数（render或者children）返回一个react元素实现自己的渲染逻辑；react-router是通过renderProps实现的；  
缺点：容易造成嵌套地狱；

<Mouse>
     { 
       (position) => { 
         return <Cat position={ position} />
       }
     }
    </Mouse>
    class Mouse extends React.PureComponent { 
     ...逻辑
     return (
       this.props.children(data)
     )
    }

#### 参考文章 ####

https://juejin.im/post/5dbbdbd5f265da4d4b5fe57d\#heading-30

[Link 1]: https://overreacted.io/zh-hans/making-setinterval-declarative-with-react-hooks