「React.js & Next.js超入門」の感想・備忘録2

「React.js & Next.js超入門」の感想・備忘録1の続き

コンポーネント

関数コンポーネント

  • 関数コンポーネントはJSXをreturnする関数である。
  • JSXで<コンポーネント名 />と記述することができる。
  • コンポーネント名はパスカルケースとする。
  • propsを引数として受け取る。
const Welcome = (props) => {
  return <h5>Welcome {props.name}</h5>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Welcome name="hoge"/>);

コンポーネントを別ファイルに切り離す

タグボディはprops.childrenで取得可能、Vue.jsのslotと同じ。

import Hello from './Hello';
const App = () => {
  return (
    <div>
      <h1>React</h1>
      <Hello>タグボディです。</Hello>
    </div>
  );
};
export default App;
const Hello = (props) => {
  return (
    <h2>Hello: {props.children}</h2>
  );
}
export default Hello;

ステート

import {useState} from 'react'

const Hello = () => {
  const [country, setCountry] = useState('');
  const handleSelectChange = (e) => {
    setCountry(e.target.value);
  };
  return (
    <>
    <h2>Hello: {country}</h2>
    <select value={country} onChange={handleSelectChange}>
      <option></option>
      <option>usa</option>
      <option>japan</option>
    </select>
    </>
  );
}
export default Hello;

独自イベントの作成

propsで関数を受け取るだけ。

  • App.js
    <Hello onHoge={()=>alert('onHoge')} />
  • Hello.js
    <button onClick={props.onHoge}>onHoge</button>

コンテキスト

  • React 16.3からReact Context API使えるようになった。
  • コンテキストは全てのコンポーネントで参照可能なグローバル変数のようなもの。
  • 値の共有だけであればコンテキストで十分であり、値を使った処理も共有したい場合はReduxを使えば良い。

ProviderとConsumer

コンテキスト にはProviderとConsumerがある。

  • Provider: コンテキストにデータを置く
  • Consumer : コンテキストからデータを取り出す
  • createContext関数は以下の型のオブジェクトを返す
    {
    Provider: React.Component;
    Consumer: React.Component;
    }
import React, {createContext} from 'react';
import './App.css';
import Hello from './Hello';

export const TestContext = createContext({});

const App = () => {
  return (
    <TestContext.Provider value={{num: 999, msg: 'hogehoge'}}>
      <div>
      <Hello></Hello>
      </div>
    </TestContext.Provider>
  );
};

export default App;
import {TestContext} from './App';

const Hello = () => {
  return (
    <TestContext.Consumer>
      {testContext => {
        return (
          <>
          <p>{testContext.num}</p>
          <p>{testContext.msg}</p>
          </>
        );
      }}
    </TestContext.Consumer>
  );
}
export default Hello;

React.useContext()

React HooksのReact.useContext()を使うとConsumer側の記述をかなり減らすことができる。

import {useContext} from 'react';
import {TestContext} from './App';

const Hello = () => {
  const testContext = useContext(TestContext);
  return (
    <>
    <p>{testContext.num}</p>
    <p>{testContext.msg}</p>
    </>
  );
}
export default Hello;

【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です