React provides powerful abstractions that free you from touching the DOM directly in most cases, but sometimes you simply need to access the underlying API, perhaps to work with a third-party library or existing code.
React is very fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM.
render() methods actually return a description of the DOM, and React can compare this description with the in-memory representation to compute the fastest way to update the browser.
Additionally, React implements a full synthetic event system such that all event objects are guaranteed to conform to the W3C spec despite browser quirks, and everything bubbles consistently and efficiently across browsers. You can even use some HTML5 events in IE8!
Most of the time you should stay within React's "faked browser" world since it's more performant and easier to reason about. However, sometimes you simply need to access the underlying API, perhaps to work with a third-party library like a jQuery plugin. React provides escape hatches for you to use the underlying DOM API directly.
To interact with the browser, you'll need a reference to a DOM node. You can attach a
ref to any element, which allows you to reference the backing instance of the component. This is useful if you need to invoke imperative functions on the component, or want to access the underlying DOM nodes. To learn more about refs, including ways to use them effectively, see our refs to components documentation.
Components have three main parts of their lifecycle:
React provides lifecycle methods that you can specify to hook into this process. We provide will methods, which are called right before something happens, and did methods which are called right after something happens.
getInitialState(): objectis invoked before a component is mounted. Stateful components should implement this and return the initial state data.
componentWillMount()is invoked immediately before mounting occurs.
componentDidMount()is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.
componentWillReceiveProps(object nextProps)is invoked when a mounted component receives new props. This method should be used to compare
nextPropsto perform state transitions using
shouldComponentUpdate(object nextProps, object nextState): booleanis invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare
falseif React should skip updating.
componentWillUpdate(object nextProps, object nextState)is invoked immediately before updating occurs. You cannot call
componentDidUpdate(object prevProps, object prevState)is invoked immediately after updating occurs.
componentWillUnmount()is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.
Mounted composite components also support the following method:
component.forceUpdate()can be invoked on any mounted component when you know that some deeper aspect of the component's state has changed without using
At Facebook, we support older browsers, including IE8. We've had polyfills in place for a long time to allow us to write forward-thinking JS. This means we don't have a bunch of hacks scattered throughout our codebase and we can still expect our code to "just work". For example, instead of seeing
+new Date(), we can just write
Date.now(). Since the open source React is the same as what we use internally, we've carried over this philosophy of using forward thinking JS.
In addition to that philosophy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like es5-shim.
es5-shim.js from kriskowal's es5-shim provides the following that React needs:
es5-sham.js, also from kriskowal's es5-shim, provides the following that React needs:
The unminified build of React needs the following from paulmillr's console-polyfill.
When using HTML5 elements in IE8 including
<footer>, it's also necessary to include html5shiv or a similar script.
Although React is pretty good at abstracting browser differences, some browsers are limited or present quirky behaviors that we couldn't find a workaround for.
On IE8 the
onScroll event doesn't bubble and IE8 doesn't have an API to define handlers to the capturing phase of an event, meaning there is no way for React to listen to these events.
Currently a handler to this event is ignored on IE8.
See the onScroll doesn't work in IE8 GitHub issue for more information.