hooks的故事（1）

对于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({
document.documentElement.clientWidth,
height: document.documentElement.clientHeight
});
const onResize = useCallback(() => {
setSize({
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

Now: {count}, before: {prevCount}

}
（4）强制更新

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