33 * - components are classes in react js
44 * - All components should start with a capital letter
55 * - Components are functions
6- *
6+ *
77 * Life Cycle State and Methods
8- * - We have 3 states: Mount, Update, Unmount
8+ * - We have 3 states: Mount, Update, Unmount
99 * - Each state has their own methods
1010 * - Mount State
1111 * - componentWillMount Method
1212 * - is invoked once both on the client and on the server
13- * - immediately before the inital render occurs, if you call setState() within this method, render will
13+ * - immediately before the inital render occurs, if you call setState() within this method, render will
1414 * see this updated state and will be excuted only once despite the state change
1515 * - componentDidMount Method
1616 * - is invoked once only on the client, not on the server
1717 * - immediately after the inital render occurs, at this point in the life cycle the component has DOM
1818 * representation which you can access via React.findDOMNode(component)
1919 * - if you want to integrate with other js frameworks, set timers using setTimeout() or setInterval() or
20- * send ajax requests, you can perform those operations in this method. Soon as component is mounted, we can do
20+ * send ajax requests, you can perform those operations in this method. Soon as component is mounted, we can do
2121 * our stuff inside that method.
2222 * - Update State
2323 * - componentWillReceiveProps Method
24- * - is invoked when a component is receiving new properties.
24+ * - is invoked when a component is receiving new properties.
2525 * - this method is not called for the inital render. We can use this as an opportunity to react to a property
2626 * transition before render is called by updating the state using this.setState(). The old properties can be
2727 * accessed via this.props calling this.setState() within this function will not a trigger an additional render
2828 * - shouldComponentUpdate Method
2929 * - is invoked before rendering when new properties or state are being received. This method is not called for the
30- * inital render or than a forced update is used. We can use this as an opportunity to reinforce when you are certain
30+ * inital render or than a forced update is used. We can use this as an opportunity to reinforce when you are certain
3131 * that the transition to the new props and state will not require a component update. Should the component update
32- * returns false, than render will be completely skipped, handling the next state change. In addition
32+ * returns false, than render will be completely skipped, handling the next state change. In addition
3333 * componentWillUpdate and componentDidUpdate will not be called as well. By default shouldComponentUpdate always
3434 * return true to prevent settled bugs and state is mutated in place, but if your careful to always treat state as
3535 * immutable and to read only from properties and state in render. Than you can over ride shouldComponentUpdate with
3636 * a implentation that compares the old properties and state to their replacements
3737 * - componentWillUpdate Method
38- * - is invoked immediately before rendering. When new properties or state are being recieved. This method is not
38+ * - is invoked immediately before rendering. When new properties or state are being recieved. This method is not
3939 * called for the inital render
4040 * - componentDidUpdate Method
4141 * - is invoked immediately after the components updates are flushed to the DOM
42- * - This method is not called for the inital render
43- * - We can use this method to operate on the DOM when the component
42+ * - This method is not called for the inital render
43+ * - We can use this method to operate on the DOM when the component
4444 * has been updated
4545 * - Unmount State
4646 * - componentWillUnmount Method
4747 * - is invoked immediately before a component is unmonted from the DOM. We can perform any necessary clean up in this
48- * method or you can say garbage collection. Such as invalidating timers or clearing up any DOM elements that were
48+ * method or you can say garbage collection. Such as invalidating timers or clearing up any DOM elements that were
4949 * created in componentDidMount
50- *
50+ *
5151 * COMPONENT STATE Methods
5252 * - render
5353 * - only returns one element
54- * - if you do not want to return nothing at all you can simply write null or false to indicate you don't want
54+ * - if you do not want to return nothing at all you can simply write null or false to indicate you don't want
5555 * anything rendered behind the scenes
56- * - the render function should not modify component state. It should always return the same results each time
57- * its invoked and does not read or write to DOM. In case you need to interact with the browser, you need to
56+ * - the render function should not modify component state. It should always return the same results each time
57+ * its invoked and does not read or write to DOM. In case you need to interact with the browser, you need to
5858 * perform your work and methods like componentDidMount or other life cycle methods instead
5959 * - keeping render pure this way makes server rendering more practical and components easier to think
6060 * - getInitialState
61- * - when ever this is invoked, once before the component is mounted, the return value will used
61+ * - when ever this is invoked, once before the component is mounted, the return value will used
6262 * as the inital value of "this.state" property
6363 * - getDefaultProps
64- * - this invoked once and cached when the class is created. This method is invoked before any instances
64+ * - this invoked once and cached when the class is created. This method is invoked before any instances
6565 * are created and thus cannot rely on "this.props"
6666 * - in addition be aware that any complex objects return by getDefaultProps will be shared across instances and
6767 * not copied
7070 * - mixins
7171 * - a mixin is a group of methods that sits on one object that gets copied over to another object
7272 * - a fantastic method react provides us to easily reuse code
73- * - mixins array allows you to use mixins to share behavior amoung multiple components. This will also be apart
73+ * - mixins array allows you to use mixins to share behavior amoung multiple components. This will also be apart
7474 * of reusable components.
7575 * - statics
7676 * - statics object allows you to define static methods that can be called on the component class
7777 * - displayName
7878 * - displayName is a string used in debugging msgs and usually jsx sets this value automatically
79- */
79+ */
0 commit comments