|
101 | 101 | |92 | [How to loop inside JSX?](#how-to-loop-inside-jsx) |
|
102 | 102 | |93 | [How do you access props in attribute quotes?](#how-do-you-access-props-in-attribute-quotes) |
|
103 | 103 | |94 | [What is React PropType array with shape?](#what-is-react-proptype-array-with-shape) |
|
104 |
| -|95 | [How conditionally apply class attributes?](#how-conditionally-apply-class-attributes) | |
| 104 | +|95 | [How to conditionally apply class attributes?](#how-to-conditionally-apply-class-attributes) | |
105 | 105 | |96 | [What is the difference between React and ReactDOM?](#what-is-the-difference-between-react-and-reactdom) |
|
106 | 106 | |97 | [Why ReactDOM is separated from React?](#why-reactdom-is-separated-from-react) |
|
107 | 107 | |98 | [How to use React label element?](#how-to-use-react-label-element) |
|
|
1772 | 1772 |
|
1773 | 1773 | 86. ### What are the Pointer Events supported in React?
|
1774 | 1774 |
|
1775 |
| - *Pointer Events* provide a unified way of handling all input events. In the olden days we have a mouse and respective event listeners to handle them but nowadays we have many devices which don't correlate to having a mouse, like phones with touch surface or pens. We need to remember that these events will only work in browsers that support the *Pointer Events* specification. |
| 1775 | + *Pointer Events* provide a unified way of handling all input events. In the old days we had a mouse and respective event listeners to handle them but nowadays we have many devices which don't correlate to having a mouse, like phones with touch surface or pens. We need to remember that these events will only work in browsers that support the *Pointer Events* specification. |
1776 | 1776 |
|
1777 | 1777 | The following event types are now available in *React DOM*:
|
1778 | 1778 |
|
|
1951 | 1951 | }
|
1952 | 1952 | ```
|
1953 | 1953 |
|
1954 |
| -95. ### How conditionally apply class attributes? |
| 1954 | +95. ### How to conditionally apply class attributes? |
1955 | 1955 |
|
1956 | 1956 | You shouldn't use curly braces inside quotes because it is going to be evaluated as a string.
|
1957 | 1957 |
|
|
3008 | 3008 |
|
3009 | 3009 | 159. ### What are the drawbacks of MVW pattern?
|
3010 | 3010 |
|
3011 |
| - 1. The DOM manipulation is very expensive which causes applications behaves slowly and inefficient. |
| 3011 | + 1. DOM manipulation is very expensive which causes applications to behave slow and inefficient. |
3012 | 3012 | 3. Due to circular dependencies, a complicated model was created around models and views.
|
3013 | 3013 | 3. Lot of data changes happens for collaborative applications(like Google Docs).
|
3014 | 3014 | 4. No way to do undo (travel back in time) easily without adding so much extra code.
|
|
3893 | 3893 | React.render(<User age={30} department={"IT"} />, document.getElementById('container'));
|
3894 | 3894 | ```
|
3895 | 3895 | 219. ### Do I need to keep all my state into Redux? Should I ever use react internal state?
|
3896 |
| - It is up to developer decision. i.e, It is developer job to determine what kinds of state make up your application, and where each piece of state should liveSome users prefer to keep every single piece of data in Redux, to maintain a fully serializable and controlled version of their application at all times. Others prefer to keep non-critical or UI state, such as “is this dropdown currently open”, inside a component's internal state. |
| 3896 | + It is up to developer decision. i.e, It is developer job to determine what kinds of state make up your application, and where each piece of state should live. Some users prefer to keep every single piece of data in Redux, to maintain a fully serializable and controlled version of their application at all times. Others prefer to keep non-critical or UI state, such as “is this dropdown currently open”, inside a component's internal state. |
3897 | 3897 |
|
3898 | 3898 | Below are the thumb rules to determine what kind of data should be put into Redux
|
3899 | 3899 | 1. Do other parts of the application care about this data?
|
|
4162 | 4162 | 240. ### What is the main purpose of constructor?
|
4163 | 4163 | The constructor is mainly used for two purposes,
|
4164 | 4164 | 1. To initialize local state by assigning object to this.state
|
4165 |
| - 2. For binding event handler methods to the instatnce |
4166 |
| - For example, the below code covers both the above casess, |
| 4165 | + 2. For binding event handler methods to the instance |
| 4166 | + For example, the below code covers both the above cases, |
4167 | 4167 | ```javascript
|
4168 | 4168 | constructor(props) {
|
4169 | 4169 | super(props);
|
|
4888 | 4888 | 1. Two elements of different types will produce different trees.
|
4889 | 4889 | 2. The developer can hint at which child elements may be stable across different renders with a key prop.
|
4890 | 4890 | 288. ### What are the rules covered by diffing algorithm?
|
4891 |
| - When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements. It covers the below rules during reconsilation algorithm, |
| 4891 | + When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements. It covers the below rules during reconciliation algorithm, |
4892 | 4892 | 1. **Elements Of Different Types:**
|
4893 | 4893 | Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. For example, elements <a> to <img>, or from <Article> to <Comment> of different types lead a full rebuild.
|
4894 | 4894 | 2. **DOM Elements Of The Same Type:**
|
4895 |
| - When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes. Lets take an example with same DOM eleemnts except className attribute, |
| 4895 | + When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes. Lets take an example with same DOM elements except className attribute, |
4896 | 4896 | ```javascript
|
4897 | 4897 | <div className="show" title="ReactJS" />
|
4898 | 4898 |
|
|
0 commit comments