Menu
I was wondering if the window object that is passed into react components synthetic or not.
If it isn't I am presuming I would need the following code to determine the width and height of the viewport
const w = window,
d = document,
documentElement = d.documentElement,
body = d.getElementsByTagName('body')[0],
width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
height = w.innerHeight || documentElement.clientHeight || body.clientHeight
858
The window is the global object in the browser environment. Any property attached to the window object can be accessed from any script on the web page, including the script for the React app. Since window is a global object, the React code can also access its properties, as shown below.
The react event handling system is known as Synthetic Events. The synthetic event is a cross-browser wrapper of the browser's native event. Handling events with react have some syntactic differences from handling events on DOM. These are: React events are named as camelCase instead of lowercase.
Synthetic events are that ReactJS reuses these events objects, by pooling them, which increase the performance.
Both synthetic events and native events can implement the preventDefault and stopPropagation methods. However, synthetic events and native events are not exactly the same thing. For example, SyntheticEvent will point to mouseout for onMouseLeave Event.
The window object is the normal DOM object.
It is always available and safe to use (unless you are server side rendering).
58
Accessing the window object in React is the same as anywhere else. It exists before any of your JavaScript runs. As a test, type about:blank into your location bar, open the console and type 'window'. It's there even with no other JavaScript on the page.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
