Reactの基礎知識

4533 ワード
react.js
データの削除reactには、immutableという概念があり、stateに変更が許されないことを意味する.stateを修正すると、react性能の最適化が後で行われると問題があります.
const {list} = [...this.state.list]
list.splice(1, 1)
this.setState({    list })

//    
this.state.list.splice(1, 1)
this.setState({ list: this.state.list })

属性名labelのfor属性は、jsxでforと循環衝突し、reactはhtmlForラベルのlabelの代わりにforを使用します.

親コンポーネントと子コンポーネントの通信
子コンポーネント操作親コンポーネントのデータ:
  • 親コンポーネントがサブコンポーネントにメソッド
    • を渡す
  • サブコンポーネントはこの方法を呼び出し、親コンポーネントのデータ
    • を間接的に操作する.
    class TodoList extends Component {
    deleteItem = (number) => {
        alert(number)
    }
    render() {
        return 
    }
}

class TodoItem extends Component {
    constructor(props){
        super(props)
    }
    
    render() {
        return 
      
    
    }
}

    setState受信関数
    onClick(e) {
    const value = e.target.value
    this.setState(() => ({
        value
    }))
}

onClick() {
    // prevState          
    this.setState((prevState) => ({
        list: [...prevState.list]
    }))
}

    PropTypes
    親コンポーネントから子コンポーネントへの値の伝達を制限するタイプ
    import PropTypes from 'prop-types'
TodoItem.propTypes = {
    test: PropTypes.string.isRequired,
    content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    deleteItem: PropTypes.func,
    index: PropTypes.number
}

    defaultProps
    属性のデフォルト
    TodoItem.defaultProps = {
    test: 'hello world'
}

    バーチャルDOM
    親コンポーネントのrender関数が実行されると、その子コンポーネントのrenderも再実行される.
  • state数データ
  • JSXテンプレート
  • データ+テンプレートは、仮想DOMを生成します(仮想DOMは、正式なDOMを記述するjsオブジェクトです).
    ['div', {id: 'name'}, ['span', {}, 'hello world']]
  • 仮想DOMの構造を用いてリアルなDOMを生成し、
    abc
    • を表示する.
  • stateが変化する(setStateの場合、データが変化する)
  • データ+テンプレート生成新しい仮想DOM(パフォーマンスが大幅に向上)、diffアルゴリズム、reactのdiffは同層比較であり、第1層ノードが変化した場合、以下は比較せず、
    ['div', {id: 'name'}, ['span', {}, 'bye bye']]
    • を直接すべて置き換える.
  • オリジナルの仮想DOMと新しい仮想DOMの違いを比較すると、spanのコンテンツ(パフォーマンスが大幅に向上)
    • が区別されます.
  • はDOMを直接操作し、spanの内容
    • を変更する.
    Ref
    reactはデータ駆動を推奨し、DOMをできるだけ操作しない
     this.input = input} 
/>

onChange = (e) => {
    const value = this.input.value
    //    
    const value = e.target.value
}

    宣言サイクル関数
  • componentWillMount:コンポーネントがページにマウントされる直前に実行(最初のマウント時に実行)
    • .
  • render
  • componentDidMount:コンポーネントはページにマウントされた後に実行され(最初のマウント時に実行される)、ajaxリクエストはここで
    • に送信するのが望ましい.
  • shouldComponentUpdate:コンポーネントが更新される前に実行する(関数内部でtrueを返す必要があり、falseを返すと実行しない)
  • componentWillUpdate:コンポーネントが更新される前に実行されますが、shouldComponentUpdateの後(shouldComponentUpdateがtrueに戻ってから実行されます)
  • componentDidUpdate:コンポーネントの更新が完了すると
    • が実行されます.
  • componentWillReceiveProps:propsパラメータがなく、実行されません
  • 親コンポーネントからパラメータ
    • を受信するコンポーネント
  • 親コンポーネントのrender関数が再実行されると、子コンポーネントのcomponentWillReceivePropsが実行される(子コンポーネントがページに最初に表示された場合は実行されない)
    • .
  • componentWillUnmount:コンポーネントが除去される前に
    • を実行
    shouldComponentUpdate 
    /**
 * nextProps         props        
 * nextState         state        
 */
shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.content !== this.props.content) {
        return true
    } else { 
        return false
    }
}

    アニメーション(Animation)
    取付react-transition-group
    import {CSSTransition} from 'react-transtion-group'


    
    hello
  • fade-enter(アニメーションが前の瞬間に入った)
  • fade-enter-active(アニメーションが入る前の第2の瞬間、アニメーションが完成するまで)
  • fade-enter-done(アニメーション完了時)
  • fade-exit(アニメーションが消える直前の瞬間)
  • fade-exit-active(アニメーションが消える前の第2の瞬間、アニメーションが消えるまで完成)
  • fade-exit-done(消失アニメーション完了時)
  • fade-appear(アニメーションが前の瞬間に入った)
  • fade-appear-active(アニメーションが入る前の第2の瞬間、アニメーションが完成するまで)
    • HTC EVO 4 G LTEプレミアム電源メニューの漢化参考
    linuxプログラム設計SELECTシステム呼び出し