Skip to content

Instantly share code, notes, and snippets.

@nevinm
Forked from monicao/react.md
Created August 29, 2016 17:06
Show Gist options
  • Save nevinm/20016a5ab3c864986838689e11f64f43 to your computer and use it in GitHub Desktop.
Save nevinm/20016a5ab3c864986838689e11f64f43 to your computer and use it in GitHub Desktop.

Revisions

  1. @monicao monicao revised this gist Dec 14, 2015. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions react.md
    Original file line number Diff line number Diff line change
    @@ -9,28 +9,28 @@ React Component Lifecycle
    - componentWillReceiveProps (Update only)
    - render
    - componentDidUpdate (Update only)
    - componentWillUnmount
    - componentWillUnmount/constructor
    - componentDidUnmount

    TIPS

    - Keep state immutable
    - Use React.Children to work with `this.props.children` https://facebook.github.io/react/docs/top-level-api.html#react.children
    - Behaviour duplication in components can be refactored with mixins: https://facebook.github.io/react/docs/reusable-components.html#mixins
    - BUT prefer higher order components to mixins: https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
    - BUT prefer higher order components to mixins https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

    ### getDefaultProps

    The result of getDefaultProps() will be cached and used to ensure that this.props.value will have a value if it was not specified by the parent component.

    ### componentWillMount()

    Triggered before render(). Calling setState here does not trigger an additional render.
    Triggered before render().


    ### componentDidMount

    Can access refs.
    Called after render. Can access refs.
    The componentDidMount() method of child components is invoked before that of parent components.
    This is the place to call external libraries, use setTimeout, make ajax requests

    @@ -52,7 +52,7 @@ Use this as an opportunity to perform preparation before an update occurs.

    ### render

    Triggered when the state or props change.
    Triggered when the state changes.

    ### componentDidUpdate(prevState, prevProps) - Update only

  2. @monicao monicao revised this gist Nov 18, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions react.md
    Original file line number Diff line number Diff line change
    @@ -17,6 +17,7 @@ TIPS
    - Keep state immutable
    - Use React.Children to work with `this.props.children` https://facebook.github.io/react/docs/top-level-api.html#react.children
    - Behaviour duplication in components can be refactored with mixins: https://facebook.github.io/react/docs/reusable-components.html#mixins
    - BUT prefer higher order components to mixins: https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

    ### getDefaultProps

  3. @monicao monicao revised this gist Nov 17, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion react.md
    Original file line number Diff line number Diff line change
    @@ -51,7 +51,7 @@ Use this as an opportunity to perform preparation before an update occurs.

    ### render

    Triggered when the state changes.
    Triggered when the state or props change.

    ### componentDidUpdate(prevState, prevProps) - Update only

  4. @monicao monicao created this gist Nov 17, 2015.
    64 changes: 64 additions & 0 deletions react.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    React Component Lifecycle

    - getInitialState
    - getDefaultProps
    - componentWillMount
    - componentDidMount
    - shouldComponentUpdate (Update only)
    - componentWillUpdate (Update only)
    - componentWillReceiveProps (Update only)
    - render
    - componentDidUpdate (Update only)
    - componentWillUnmount
    - componentDidUnmount

    TIPS

    - Keep state immutable
    - Use React.Children to work with `this.props.children` https://facebook.github.io/react/docs/top-level-api.html#react.children
    - Behaviour duplication in components can be refactored with mixins: https://facebook.github.io/react/docs/reusable-components.html#mixins

    ### getDefaultProps

    The result of getDefaultProps() will be cached and used to ensure that this.props.value will have a value if it was not specified by the parent component.

    ### componentWillMount()

    Triggered before render(). Calling setState here does not trigger an additional render.


    ### componentDidMount

    Can access refs.
    The componentDidMount() method of child components is invoked before that of parent components.
    This is the place to call external libraries, use setTimeout, make ajax requests

    ### shouldComponentUpdate(nextProps, nextState) - Update only

    called when there are new props or state changes. return false to prevent a render. good for performance.

    ### componentWillReceiveProps(nextProps) - Update only

    Called before render when props change. Access to old props.
    It is not triggered after the component is mounted.

    ### componentWillUpdate(nextProps, nextState)

    Invoked immediately before rendering when new props or state are being received.
    Not called for the initial render.
    Cannot use setState in this method. Use componentWillReceiveProps instead.
    Use this as an opportunity to perform preparation before an update occurs.

    ### render

    Triggered when the state changes.

    ### componentDidUpdate(prevState, prevProps) - Update only

    Access to prevState, prevProps
    Use this as an opportunity to operate on the DOM when the component has been updated.


    ### componentWillUnmount

    Clean up event bindings, etc.