- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-07-30T12:40:08+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
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
