只须要了解经常使用的4个api, 就能深刻理解React Hooks

Hooks的出现，想必你们有所了解。若是你是一个Hooks新手,想用Hooks去构造你的应用程序。不要心急，你只须要跟着我一块儿学习hooks，半个小时你就能掌握React Hooks,并用Hooks去重构你的项目

• 首先咱们要了解Hooks的API
• 吃透经常使用的四种API
• 自定义Hooks
• 比较好用的Hooks库
• 其余的API和有价值的文档

首先咱们要了解Hooks的API

1. 基础API
   • useState
   • useEffect
   • useContext
2. 其余的API
   • useReducer
   • useCallback
   • useMemo
   • useRef
   • useImperativeMethods
   • useLayoutEffect

吃透经常使用的四种

• useState
• useEffect
• useCallback
• useRef

useState

const [state, setState] = useState(initialState);
复制代码

在初始渲染的时候，返回的状态( state )与做为第一个参数( initialState )传递的值相同。

setState 函数用于更新 state(状态) 。它接受一个新的 state(状态) 值，并将组件排入从新渲染的队列。

useEffect

const id = props;
const [value, setValue] = useState(1)
useEffect(() => {
    dosomething();
},[id, value]);
复制代码

useEffect 这个反作用函数在react全生命周期中扮演着很重要的角色，与 componentDidMount 和 componentDidUpdate 不一样，传递给 useEffect 的函数在延迟事件期间在 layout(布局) 和 paint(绘制) 后触发。咱们也能够把useEffect看做是生命周期函数的一个集合，以前在生命周期中didMount,didUpdate,WillReceiveProps,WillUnmount均可以将函数做为第一个参数dosomething在useEffect执行。
第一个参数为函数dosomething()，第二个参数为一个数组,数组里面的id和value只要有一个改变都会执行dosomething()。

useCallback

useEffect(() => {
    getDeviceSituation(projectId);
}, [getDeviceSituation, projectId]);

const getDeviceSituation = useCallback((id) => {
  dispatch({
    type: 'runTimeCenter/getDeviceSituation',
    payload: {
      projectId: id,
    },
  });
}, [dispatch]);

const onClickTag = () => {
    getDeviceSituation(projectId);
 };
 return (
    <div onclick = {onClickTag}></div>
 )
复制代码

1. useEffect里面要执行外部封装的方法时，外部封装的方法必须要用useCallback包裹一层，第二个参数为对该状态值的监听。
2. useCallback返回的是一个函数，该函数中有对状态值的监听，实际上能够理解成一个有函数返回值的useEffect。

useRef

两种用途

1. DOM操做（与render props 用法相似）,useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数（initialValue）。返回的对象将存留在整个组件的生命周期中。

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
复制代码

2.实例化字段，方便保留任何可变值

const string = useRef('aaa');
复制代码

自定义Hooks

function useInputValue(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = (event) =>  {
    setValue(event.currentTarget.value);
  };

  return {
    value,
    onChange
  };
}
function Demo(props){
   const name = useInputValue('sss') 
    return (
        <input {...name} />
    ) 
}

复制代码

是否是感受代码很清爽，这样我就能够将全部的组件Hooks化，说白了自定义Hooks,也就是自定义组件。

比较好用的Hooks库

1. ESlint插件 react-hooks 规则

   

2. react 自定义hooks库
3. react native 自定义hooks组件库

其余的API和有价值的文档

另外五种API可去官网查看其用法，这里我就不介绍了。

Hooks 原著者Dan useEffect 完整指南