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

React.js＆Next.js超入門第2版

posted with ヨメレバ

掌田津耶乃秀和システム 2021年02月27日頃

コンポーネント

コンポーネント

関数コンポーネント

関数コンポーネントは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;