react hooks使用小结

1.useRef():返回一个只有current属性的对象，并且这个对象在组件的整个生命周期中保持不变。并且当我们更新current属性中的值时，并不会触发组件的re-render。一般来说，改变属性值之后都会进行setState()，使组件re-render。

初始化: <> 括号里面的是类型

const ref1 = useRef<Input>(null);

jsx: 使用的是antd的input组件

<Input ref={ref1} placeholder='请输入任务名称,按回车键添加任务.....' onKeyDown={onAdd} />

事件:

const onAdd = (e: ISafeAny) => {
    if (e.keyCode === 13) {
        if (!e.target.value) {
            message.warning('名称不可以为空');
            return;
        }
        const item: IListItem = {
            id: uuid(),
            value: e.target.value,
            isCompleted: false
        };
        store.addItem(item);
        ref1.current && ref1.current.setValue('');
    }
};

2.useMemo():可以用做缓存，在函数里面进行复杂计算，当依赖项改变时才重新计算。

简单使用(求年龄之和):

const total = useMemo(() => {
    return stu.reduce((total, item) => {
        total += item.age;
        return total;
    }, 0);
}, [stu]);

3.useContext(): 解决组件间使用props传递值嵌套层数过多的问题。

根组件或者每某一个父组件: 我这里传入的是一个数组，其实可以尝试传入类对象，里面包含数据和操作方法(可以使用mobx以及mobx-react来管理状态(比较简单易上手的状态管理工具))

export const TestContext = createContext<{ colors: string[] }>({ colors: [] });
function Parent() {
    const [colors, setColors] = useState<string[]>([]);
    const changeColors = () => {
        const list = [];
        for (let i = 0; i < 4; i++) {
            let r = 0,
              g = 0,
              b = 0;
            r = Math.floor(Math.random() * 255);
            g = Math.floor(Math.random() * 255);
            b = Math.floor(Math.random() * 255);
            const str = `rgb(${r},${g},${b})`;
            list.push(str);
        }
        setColors(list);
    };

  useEffect(() => {
    changeColors();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
      <>
          <TestContext.Provider value={{ colors: colors }}>
              <ColorList />
          </TestContext.Provider>
      </>
  );
}

子组件或子孙组件:

function ColorList() {
    const { colors } = useContext(TestContext);
    //...取出共享数据后就可以正常使用了
}

4.useState(): 管理组件的状态。

使用: list是数据而setList是为list赋值的函数

function ProgressList() {
    const [list, setList] = useState<IProgress[]>([]);
    useEffect(() => {
        const _list = [
          { num: 25, id: 1 },
          { num: 50, id: 2 },
          { num: 75, id: 3 }
        ];
        setList(_list);
        // 有时候需要这样做才可以取到正确的值(比如setInterval里面赋值时)
        //setList(preList => {
            //return preList.map((item) => {
                //return {
                    //id: item.id,
                    //num: item.num + 1
                //};
            //})
        //});
    }, []);
    return (
        <>
            {list.map() ... }
        </>
    );
}