More than 5 years have passed since last update.

React.js 三大特徴?を整理

React

Last updated at 2020-02-12Posted at 2020-02-09

References

Share@2020/02/09

特徴

- Just the UI

- Component志向
    - Componentとは
        - Reactコンポーネントへの理解を深める https://codezine.jp/article/detail/9928
            - Props と State を利用している
                - Propsとは、Component生成時に親から渡されるObject。Componentが画面から除去されるまで、不変の値を保持。
                - Stateとは、Component内で保持される、PrivateなObjectで、可変　の　変数　を保持。
                    - 直接更新NG
                    - > this.setState( hash代入 )
                    - アロー演算子の場合
                        - this.setState((prevState, props) => ({   currentTime: props.format + prevState.date }));
            - Component の ライフサイクル
                - React Componentのクラス型で宣言する場合　必ず　React.Componentクラスを継承。
                - Raact.Componentクラス　は　抽象クラス。
                - React.Componentクラス　を　継承した　サブクラス　は　ライフサイクルメソッド　を　利用可能
            - ライフサイクルメソッド
                - Mounting（Componentが生成されてDOMに要素が挿入されるとき）
                    - constructor()
                    - componentWillMount()
                    - render()
                    - componentDidMount()
                - Updating（PropsやStateの値に変更が発生したとき）
                    - componentWillReceiveProps()
                    - shouldComponentUpdate()
                    - componentWillUpdate()
                    - render()
                    - componentDidUpdate()
                - Unmounting（ComponentがDOMから除去されるとき）
                    - componentWillUnmount()

React component ライフサイクル図(kawachi)より

表1　ライフサイクルメソッド一覧


#	メソッド名	引数	概要
1	render()	-	React.Componentクラスに必須のメソッド。単一のReact要素を返す役割をもつが、何も描画する必要が無い場合にはnullやfalseを返すこともできる。
2	constructor()	-	DOM挿入前の初期化時に呼ばれる。
3	componentWillMount()	-	renderメソッドによるDOM挿入直前に呼ばれる。（Mountingフェーズ）
4	componentDidMount()	-	renderメソッドによるDOM挿入直後に呼ばれる。（Mountingフェーズ）
5	componentWillReceiveProps()	nextProps	親コンポーネントから新しいpropsを受け取ったときに呼ばれる。propsが更新されたときのみに呼ばれ、stateが更新されただけでは呼ばれることはない。
6	shouldComponentUpdate()	nextProps,nextState	propsかstateが更新されたときに呼ばれ、初回の描画時（Mountingフェーズ）では呼ばれない。
7	componentWillUpdate()	nextProps,nextState	renderメソッドによるDOM挿入直前に呼ばれる。（Updatingフェーズ）
8	componentDidUpdate()	prevProps,prevState	renderメソッドによるDOM挿入直後に呼ばれる。（Updatingフェーズ）
9	componentWillUnmount()	-	React要素がDOMから取り除かれるときに呼ばれる。

- Virtual DOM

- React.js は JS内にVirtual DOMとしてDOM Treeのような構造体を持つ。
- rerender時、その構造体の前後の差分だけを実際のDOMへ反映。 →高速処理が可能

- Data Flow

- データの流れが一方向
    - アプリのデータを管理するComponent
    - →そのデータを子のComponentに渡す

nextAction
これからReactを勉強する人が最初に見るべきスライド７選

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up