React hooks数据状态管理

自从去年年底React发布16.8后，React hooks已成为替换render props和HOC代码复用方案。
本文通过一些例子来体验一下hooks的灵活和强大。

1. 如何做一个开关组件?

老方法用renderProps实现代码：

function App() {
  return (
    <Toggle initial={false}>
      {({ on, toggle }) => (
        <Button type="primary" onClick={toggle}> Open Modal </Button>
        <Modal visible={on} onOk={toggle} onCancel={toggle} />
      )}
    </Toggle>
  )
}

用hooks来实现:

function App() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        visible={open}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
      />
    </>
  );
}

对比两种实现方式hooks没有了多余的嵌套组件Toggle，通过一个外部类似全局变量的方式useState让函数组件也能轻松拥有state。

2. 抽象分页

相信前端开发分页是一个最为常用的组件，分页需要哪些状态呢？需要一个当前页current，数据总条数total，每页数据数量 pageSize。
如果实现交互？通过点击上一页，下一页，或者页码来完成页码的跳转，我们需要一个 click的回调函数来改变分页的状态，实现页面的数据刷新。
这样一个业务逻辑，相信做过前端开发的同学再熟悉不过了，通过hooks可以让这部分分页的逻辑代码得到重用代码如下：

function usePager({current=1,pageSize=10}){
  const [pager, setPager] = useState({current ,pageSize });
  const handleChange=({current,pageSize})=>{
         setPager({current ,pageSize });
  };
return {pager,handleChange};
}

// 调用方组件
function App (){
const {pager,handleChange}=usePager({});
<Pagination  data={...pager} />
}

3. 实现复杂的状态管理

假设一个组件和子组件状态比较复杂，这个时候可以利用useReducer来管理状态，useReducer实际上就是一个内置的Redux，下面是一个计数器的例子。

import React, {useReducer} from 'react';

const reducer = (state, action) => {
  switch(action.type) {
    case 'inc': return state + 1;
    case 'dec': return state + 1;
  }
  return state;
};

const Counter = () => {
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch({type: 'inc'})}>+</button>
      <button onClick={() => dispatch({type: 'dec'})}>-</button>
    </div>
  );
};

最后编辑于：2019.03.28 21:40:50