react hooks学习总结

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的变化；
使用示例

const themes = {
 light: {
   foreground: "#000000",
   background: "#eeeeee"
 },
 dark: {
   foreground: "#ffffff",
   background: "#222222"
 }
};
 
const ThemeContext = React.createContext(themes.light);
function App() {
 return (
   <ThemeContext.Provider value={themes.dark}>
     <ThemedButton />
   </ThemeContext.Provider>
 );
}
function ThemedButton() {
 const theme = useContext(ThemeContext);
 return (
   <button style={{ background: theme.background, color: theme.foreground }}>
     I am styled by theme context!
   </button>
 );
}

useRef

const refContainer =  useRef(initialValue);

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

useRef+forwardRef+useImperativeHandle

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

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

function Child(props, ref) {
 const inputRef = useRef();
 useImperativeHandle(ref, () => ({
   focus: () => {
     inputRef.current.focus();
   }
 }));
 return <input ref={inputRef} />;
}
Child = forwardRef(Child);
function Parent() {
 const parentRef = useRef();
 const handleClick = () => {
   parentRef.current.focus();
 }
 return (
   <div>
     <Child  ref={parentRef}/>
     <Button onClick={handleClick}>点我</Button>
   </div>
 );
}

//下面两个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