React hooks 的尝试使用

React Hooks出来也已经挺久了，一直苦于没有机会去尝试。此次不用不知道，一用吓一跳，用hooks写页面和组件真的是太爽啦！不再用写冗余的类，不用维护复杂的state和考虑异步的setState，不用考虑this的指向，不用细想在哪一个生命周期里执行复杂的逻辑，写起来只能用行云流水来形容。若是你还在犹豫要不要使用hooks，请大胆的去尝鲜吧！（p.s：记得把react升级到16.8版本）

---

这里就不介绍hooks是什么，只是记录了一些我在项目里hooks的一些用法。若是想详细了解hooks的话，我推荐去看官方文档和一些入门文章

传送门：
React-文档 Hook 简介
30分钟精通React Hooks
React16：Hooks总览，拥抱函数式 (这大概是最全的React Hooks吧)

---

Hooks只能用在纯函数组件里

之前组件通讯，要么使用props一层层传递下去，要么使用Redux等状态管理架构。这些方法冗余，繁琐，易出错。

Hooks的出现，带给了咱们新的解决这些问题的方法。

1.使用useContext实现组件间通讯

import React, { createContext, useContext } from 'react';

// 建立Context  
const Context = createContext(defaultContext);

connt shareContext = {
    name: 'context',
    value: 12,
};

// 顶层组件提供共享值C
<Context.Provider value={shareContext} >
    <ChildrenComponents />
</Context.Provider>

// 子组件经过useContext,和 Context 获取共享值
function ChildrenComponents() {
    const { name, value } = useContext(Context);
    console.log(name); // 'context'
    console.log(value); // 12
}
复制代码

2. 使用useReducer管理多个组件之间的状态

useReducer的基本概念与Redux一致，不了解的能够先去了解一下什么是action，dispatch，reducer之类的。

// actions
const SOME_ACTIONS = 'SOME_ACTIONS';   // 定义action

// reducer
function reducer(state, action) {
    switch(action.type) {
        case SOME_ACTIONS:
            /*handle state with action.payload*/
            return nextState;
        default:
            return state;
    }
}

const iniState = /*初始状态*/

// 组件里使用useReducer

fuction Components() {
    const [state, dispatch] = useReducer(reducer, iniState);
    
    /* state 即为所共享的状态*/
    
    /* 使用 dispatch 经过指定 action 修改 state 的值*/
    
    dispatch({ type: ACTION_TYPE, payload: SOME_PROPS });
}
复制代码

3.使用各类hooks实现一个自定义hooks

咱们能够根据需求设计自定义hooks。注意，自定义hooks必定要以useXXX的格式命名。具体缘由可到官方文档去了解：Building Your Own Hooks

3.1 实现一个即插即用弹窗（基于antd Modal组件）

之前咱们使用Modal组件，老是要本身维护一套state来控制Modal的visible，onCancel等设计比较固定的属性，带来冗余代码和形态万千的实现。并且须要提早引入组件，这会形成某些奇怪的问题和没必要要的渲染。

// 控制Modal生命周期的hooks:

// 组件的惟一id, 包裹组件的div, 组件props，回调函数
function useModal(id = '__YOU_SHOULD_PROVIDE_AN_ID', WrapDiv, dataProps) {
  const [visible, setVisible] = useState(false);

  function showModal() {
    setVisible(true);
  }

  function destroy() {
    const unmountResult = ReactDOM.unmountComponentAtNode(WrapDiv);
    if (unmountResult && WrapDiv.parentNode) {
      WrapDiv.parentNode.removeChild(WrapDiv);
    }
  }

  function closeModal() {
    setVisible(false);
    destroy();
  }

  return [showModal, {
    key: id,
    visible,
    onCancel: closeModal,
    ...dataProps,
  }];
}

function DirectiveModal({ DirectModal, id, WrapDiv, ...props }) {
  const [showModal, ModalProps] = useModal(id, WrapDiv, props);

  useEffect(() => {
    showModal();
  }, []);

  return (
    <DirectModal {...ModalProps} />
  );
}

DirectiveModal.propTypes = {
  id: PropTypes.string,
  DirectModal: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  WrapDiv: PropTypes.object,
  props: PropTypes.any,
  callback: PropTypes.func,
};

function createDirectiveModal(DirectModal, props) {
  const WrapDiv = document.createElement('div');
  document.querySelector('#app').appendChild(WrapDiv);

  function render() {
    ReactDOM.render(
      <DirectiveModal
        DirectModal={DirectModal}
        WrapDiv={WrapDiv}
        {...props}
      />,
      WrapDiv
    );
  }

  render();
}

export default createDirectiveModal;
复制代码

4. 总结

灵活组合使用hooks能使咱们编程更便利，代码逻辑更加清晰高效。自定义hooks带来的可拓展性更是潜力无穷。也难怪当初hooks出来的时候引爆互联网了。心动的快赶快把你的React升级到16.8，去体验hooks的无穷魅力吧！