あなたが見逃したかもしれないヒントとトリックを反応させます

今すぐ私の電子メールリストを購読http://jauyeung.net/subscribe/
に私について来てください
多くの記事https://medium.com/@hohanga
さらに記事http://thewebdev.info/
反応モダンなインタラクティブなフロントエンドのWebアプリを構築するための最も使用されるフロントエンドライブラリです.また、モバイルアプリケーションを構築するために使用することができます.この記事では、我々はいくつかのヒントやトリックを簡単に反応する建物のアプリを作るを見ていきます.

機能部品における反応フックの使用
フックは、反応機能部品をスマートにします.フックがなければ、すべての関数を使用してデータを表示できます.そういうわけで、彼らはステートレスコンポーネントとも呼ばれていました.フックでは、彼ら自身の内部の状態とメソッドを持っています.
例えば、以下のようにフック付きのコンポーネントを書くことができます.

import React from "react";

export default function App() {  
  const [count, setCount] = React.useState(0);  
  return (  
    <div className="App">  
      <button onClick={() => setCount(count + 1)}>Increment</button>  
      <p>{count}</p>  
    </div>  
  );  
}

上のコードでは、我々は、ビルトインの反応useState 私たちを変えるフックcount との状態setCount 関数.
コールsetCount として、onClick ハンドラ.
それは簡単に見えます.我々は参照する必要はありませんthis クラスのコンポーネントと同じように、コールを持っていませんbind 権利を定めるthis クラスコンポーネントと同様です.
それは、仕事にちょうどよりきれいです.また、我々の方法のデータを更新する独自のフックを書くことができます.
関数コンポーネントにはライフサイクルメソッドへのアクセスはありません.ですからスマート関数のコンポーネントを作る方法です.

小道具を渡すための反応文脈APIを使用してください
反応コンテキストAPIでは、関連するコンポーネント間のデータを渡すことができます.機能コンポーネントを使用すると、createContext コンテキストを作成するメソッドです.返されるコンポーネントを使用して、データを共有したいコンポーネントをラップできます.
それから、我々は我々が彼らの間で望むどんなデータでも渡すことができます.コミュニケーションはまだ一つの方法です.データはコンテクストプロバイダーから消費者に渡される.
例えば、以下のコードを書くことでデータを渡すことができます.

import React from "react";  
const CountContext = React.createContext(0);


function Count() {  
  const count = React.useContext(CountContext);  
  return <p>{count}</p>;  
}

export default function App() {  
  const [count, setCount] = React.useState(0);  
  return (  
    <CountContext.Provider value={count}>  
      <div className="App">  
        <button onClick={() => setCount(count + 1)}>Increment</button>  
        <Count />  
      </div>  
    </CountContext.Provider>  
  );  
}

上のコードでは、我々はReact.createContext だから我々はデータを共有することができますCount コンポーネント.
我々はCountContext.Provider コンポーネントは、すべての周りにラップする.それから、我々はcount の値としてvalue PROPは、コールするすべてのコンポーネントと共有するでしょうReact.useContext そして、内部CountContext.Provider コンポーネント.
でCount , コールReact.useContext 我々とCountContext 合格.したがって、count からApp インCount 経由でvalue プロップとレンダリングCount .
したがって、インクリメントをクリックするとcount 値が増加します.

スタイルコンポーネント
反応を使うことの1つの利点は、JSでCSS値をセットするのが非常に簡単です.したがって、コンポーネント内のCSSでスタイルを構成するコンポーネントを作ることは非常に簡単です.
私たちはstyle-components スタイルのコンポーネントを簡単にするライブラリ.コンポーネントに渡すCSS文字列を回すテンプレートタグが付属しています.
例えば、次のように書くことができます.

import React from "react";  
import styled from "styled-components";

const Div = styled.div`  
  background: ${props => (props.primary ? "green" : "white")};  
  color: ${props => props.color};margin: 1em;  
  padding: 0.25em 1em;  
  border: 2px solid green;  
`;

export default function App() {  
  return (  
    <div className="App">  
      <Div background="green" color="white" primary={true}>  
        foo  
      </Div>  
    </div>  
  );  
}

上のコードではprops テンプレート文字列では、コンポーネントを使用するときに渡される小道具です.style.div テンプレートタグです.テンプレートタグは、テンプレート文字列を受け取り、選択したオブジェクトを返す関数です.
この場合、スタイルコンポーネントを返します.style.div propに従ってハードコードまたは設定する型のdivを返します.
それから、我々が参照するときDiv インApp , 我々は、我々が指定したように、白いテキストで緑の箱を見ますcolor プロップを返します.primary 支柱はtrue , style-component 緑に背景色を設定します.

結論
フックのAPIは、コンポーネントをクリーンに理解しやすくなります.機能部品をスマートにします.また、我々の価値について心配する必要はありませんthis またはライフサイクルフックこれ以上.
コンテキストAPIは、2つのコンポーネント間のデータの共有に関係なく、それらの関係に便利です.私たちはuseContext 共有を行うにはフック.
最後にstyled-components ライブラリには、簡単にスタイルのコンポーネントを作るようにテンプレートタグが付属しています.