React hooksの試行

React Hooksが出てきてからもう長いので、試す機会がないことに苦しんでいます.今回は知らなくてもいいのでびっくりしましたが、hooksでページやコンポーネントを書くのは本当に爽やかです!冗長なクラスを書く必要はありません.複雑なstateを維持する必要はありません.非同期のsetStateを考える必要はありません.thisの指向を考える必要はありません.どのライフサイクルで複雑な論理を実行するかを細かく考える必要はありません.書くと行雲流水でしか形容できません.もしあなたがまだhooksを使うかどうか迷っているなら、大胆に新鮮なものを食べに行きましょう.(p.s:reactを16.8バージョンにアップグレードしてください)
ここではhooksが何なのかは紹介しませんが、私がプロジェクトでhooksの使い方をいくつか記録しただけです.hooksを詳しく知りたいなら、公式ドキュメントや入門記事を読むことをお勧めします.
転送ゲート:React-ドキュメントHookプロフィール30分React HooksReact 16:Hooks総覧に精通し、関数式を抱擁(これはおそらく最も完全なReact Hooksでしょう)
Hooksは純粋な関数コンポーネントにしか使用できません
以前はコンポーネント通信は,propsを用いて逐次伝達するか,Reduxなどの状態管理アーキテクチャを用いた.これらの方法は冗長で、煩雑で、間違いやすい.
Hooksの出現は、これらの問題を解決するための新しい方法をもたらした.

1.useContextによるコンポーネント間通信

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

//   Context  
const Context = createContext(defaultContext);

//            

    {childrenComponents}


//         

function childComponents() {
    const shareContext = useContext(Context);
}

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 = 'unique_id', WrapDiv, dataProps, callback) {
    const [visible, setVisible] = useState(false);
    
    function showModal() { //   modal
        setVisible(true);
    }
    
    function destory() { //     
        const unmountResult = ReactDOM.unmountComponentAtNode(WrapDiv);
        if (unmountResult && WrapDiv.parentNode) {
          WrapDiv.parentNode.removeChild(WrapDiv);
        }
    }
    
    function onCancel(data, runCallback = false) { //   Modal     
        callback && runCallback && callback(data);
        setVisible(false);
        destroy();
    }
    
    //      hooks Modal  show     props
    return [
        showModal,
        {
            key: id,
            visible,
            onCancel,
            ...dataProps,
        },
    ];
}

useModalを使用して、プラグアンドプレイModalを実装します.

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

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

  return (
    
  );
}

function createDirectiveModal(DirectModal, props) { //    show  
  const WrapDiv = document.createElement('div');
  document.body.appendChild(WrapDiv);

  function render() {
    ReactDOM.render(, WrapDiv);
  }

 //            
  render();
}

export default createDirectiveModal;

4.まとめ

hooksを柔軟に組み合わせて使用すると、プログラミングがより便利になり、コードロジックがより明確で効率的になります.カスタムhooksがもたらす拡張性はさらに潜在力がある.hooksが出てきたときにインターネットを爆発させたのも無理はない.ドキドキして早くあなたのReactを16.8にアップグレードして、hooksの無限の魅力を体験しましょう!