hooks使用的一些注意点

对于react hooks刚开始使用的开发者，为了保证不误用，官方建议装上eslint-plugin-react-hooks

先

npm install eslint-plugin-react-hooks

在.eslintrc.js文件里添加：

{
"plugins": [
"react-hooks"
],
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
}
}

1.组件里有默认参数而且需要根据入参的变化而变化时使用函数 ()=>{} 传参：

function App(props) {
  const [count, setCount] = useState(() => {
    return props.defaultCount || 0;
  })
}

2.useMemo(() => fn) 等价于 useCallback(fn)

const double = useMemo(() => {
  return count * 2;
}, [count === 3]);

const onClick = useCallback(() => {
  setClickCount(clickCount => clickCount + 1)
}, []);

3.useRef的两种使用场景：

（1）相当于class component里的createRef

（2）想当于class component里的常量

const counterRef = useRef();
const onClick = useCallback(() => {
  counterRef.current.speak();
}, [counterRef]);

function useCount(defaultCount) {
  const [count, setCount] = useState(defaultCount)
  const it = useRef();
  useEffect(() => {
    it.current = setInterval(() => {
      setCount(count => count + 1) }, 1000) }, []); useEffect(() => { if(count >= 10) { clearInterval(it.current); } }, []); return [count,setCount] }

4.函数作为参数传递时加useCallback

function useSize(){
  const [size, setSize] = useState({
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  });
  const onResize = useCallback(() => {
    setSize({
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    })
  }, []);
  useEffect(() => {
    window.addEventListener('resize', onResize, false);
    return () => {
      window.removeEventListener('resize', onResize, false);
    }
  }, [])
}

5.function component有了hooks的支持后有了类的功能

　（1）生命周期映射

useEffect(() => {
  //componentDidMount
  return () => {
  //componentWillUnmount
  }
}, [])

let renderCounter = useRef(0);
renderCounter.current++;

useEffect(() => {
  if(renderCounter > 1) {
    //componentDidUpdate
  }
})

（2）类成员映射

class App{
  it = 0;
}

function App() {
  const it = useRef(0)
}

（3）历史props和state

function Counter() {
  const [count,setCount] = useState(0);
  const prevCountRef = useRef();
  useEffect(() => {
    prevCountref.current = count;
  })
  const prevCount = prevCountref.current;
  return <h1>Now: {count}, before: {prevCount}</h1>
}

（4）强制更新

　　定义一个额外变量,让函数依赖这个额外变量，这个额外变量变化时会执行更新

hooks使用的一些注意点

猜你喜欢