Zenn
Open4

純粋関数とReact

純粋関数
不変性
ゆうとゆうと

純粋関数の条件

  • きまった引数にきまった戻り値。
  • 関数外の状態（データ）を参照、変更しない。
  • 関数外に影響を及ぼさない。
  • 引数で渡された値を変更しない。→immutability
  • 上記以外の作用を副作用と呼ぶ。
ゆうとゆうと

immutableな値

immutableな値
文字列、数値、真偽値、undefind、シンボル、BigInt
mutableな値
上記以外、オブジェクト、配列

値の追加

これは参照先が変わっているだけで、値が変更されているわけではない

配列に値を追加

これは参照先が変わらず、元の値に追加されるだけ。

mutableな値をimmurableに扱う（不変性の保持）

const val = [1,2];
<!-- ３を追加 -->
function (val){
 return val = [...val, 3];
};
<!-- 元の配列をコピーして、３を追加しているため、参照先が変わる -->
ゆうとゆうと

Reactでは完全な純粋関数は難しい。
Reactでは引数の他にprops state に戻り値が依存する。　
ほかの純粋関数の条件は守られる。

ゆうとゆうと

immutability
関数型プログラミングではわたってきた引数を変更しない。
useStateを使う際も関数型プログラミングではなるべく純粋関数の思想に沿ってstateを更新する。

const Child =({state, setState}) = > {
const increase = () => {
setState(prev => {
      const newState = { value: prev.value + 1 }
      return newState;
    })
return (
    <>
      <span>{state.value}</span>
      <button onClick={increase}>+</button>
    </>
);
};


import { useState } from 'react';

const Childfs = (props) => {
props.state = { value: 1}
return (
<>
<div> {props.state.value}</div>
</>
);
};

<!-- 以上のような書き方ではなくuseStateを使って値を変更する。 -->
<!--  関数型プログラミングの性質から引数を変更することはエラーになる -->

const Childsec = ({state, setState}) => {
setState({value: 1});
return (
<>
<div>
{state.value}
</div>
</>
);
};

const Example = () => {
const [state, setState] = useState({value: 0});
return (
<Childsec state={state} setState={setState}/>
);
};
<!-- ちなみに現在の状態では画面がエラーになる。 -->
<!-- 繰り返し、Exampleコンポーネントが呼ばれるためである。 -->
<!-- 本来はsetStateはClickイベントなどに他んステ扱うべき -->