JavaScript/React の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• JavaScript/React へ行く。
• JavaScript/React の差分を削除

#author("2020-01-21T02:11:13+00:00","default:wikiadmin","wikiadmin")
#author("2020-01-21T02:13:53+00:00","default:wikiadmin","wikiadmin")
-これもよくわからん

#contents

*Reactとは [#u1aaf24d]

-状態を持たないコンポーネントをJSXで定義する。状態はpropという形で外部から渡す
-戻りは仮装DOMという名の単なるJSONなので軽い。
-仮想DOMの差分はrenderメソッドで自動で反映してくれる（JQueryのように自分で記述する必要はない！）

https://qiita.com/naruto/items/fdb61bc743395f8d8faf

**react hooks form [#z63664cb]

-useForm

https://github.com/react-hook-form/react-hook-form/tree/master/examples


*用語 [#p1340b06]

|state|コンポーネントが持つ状態。変わるとviewが再レンダリングされる。状態管理が面倒になるのとテストしづらいので必要最小限にせよ|
|props|コンポーネントの外から渡される情報。親が子に渡すなどもあり。コンポーネント内部で不変|


*参考記事 [#j888713f]

https://mae.chab.in/archives/2956#post2956-2

*やってみる [#xaf01302]

 npm install -g create-react-app
 npm install react-redux redux

*コンポーネントの種類 [#a38731f7]

|functional Component|状態を持たない。記述が楽|
|Pure Component|ライフサイクルを持つ。Functionalに比べると同じPropでの再レンダリングを防げる|


*使っているライブラリ [#t086fecf]

**react-router [#dc1ad8c7]

パスで遷移できる様になる

**react-redux [#p3f75ce4]

状態管理をreduxに任せることができる。慣れないとかえって複雑

**redux-form [#j3ca428d]

 import { reducer as formReducer } from 'redux-form'
 const rootReducer = combineReducers({
  form: formReducer
 })

**redux-localstorage [#e647d337]

stateをlocalstorageに保存

*いろいろ調べた [#r6ae2fc6]

**React.Component [#mdb2918f]

-状態を持つ
-ライフサイクルを持つ
-重いらしいので最近はFunctional Component + HOCがおすすめ

**Functional Component [#k5bb6cdf]

-状態を持たない
-ボタンなどの親コンポーネントに組み込む
-Propが変わると再レンダリング

**Pure Component [#m24409dd]

Reactのv15.3から追加されたコンポーネントで基本的な部分はComponentと変わらずライフサイクルメソッドが使えます。Componentとの大きな違いは、デフォルトでshouldComponentUpdateが実装されている所


**Class Component [#qb1a5b03]

-stateを持つ
-ライフサイクルイベントがある
-上記Functional Componentの組み合わせて作る

**引数の入力型指定 PropTypes [#q4364d89]

 Greeting.propTypes = {
   name: PropTypes.string
 };

*テスト [#p22db1bc]

-chai
-enzyme