Hi, how does React work with other libraries that modify DOM state arbitrarily? How might d3 dom changes or canvas context calls work with React
In the case that a library modifies the DOM, we try to keep React out of it's way. React works best when it has full control of the DOM. In these cases, React components are more of "wrappers" for the 3rd party libraries. Mostly by using the componentDidMount/componentWillUnmount to initialize/destroy the third party library, respectively. And props as a way of giving the parent a way of customizing the behavior of the third party library that the child wraps.
Basically, with GPT you have named slots identified by their DOM element IDs. You can "refresh" a slot any time, which will populate the element if it's empty, or load a different ad.
So we do that when we're mounted. Unfortunately, if the page structure changes, React will re-render the component and blow away the contents -- anything GPT has put in the element is considered alien.
That's fine, we just refresh. The problem is knowing _when_ a render has finished and the ad element is empty. In my testing, React elements would often have a delay after which their changes have been applied to the DOM; so I use setInterval to check repeatedly for an empty element. It seems like a stupid solution, but I couldn't figure out a more solid way; there's no React callback for completed renders.
shouldComponentUpdate() { return false; }
Which would prevent React from re-rendering them after initial mount... any reason why this doesn't work? I do this often when using d3 selections to keep React out of the way and catch incoming props in componentWillReceiveProps instead.
Without the implicitly set key, react creates its own index, so if a change happens in the hierarchy above your component, a new key might be given by react, causing the dom element to potentially be replaced when rendering.
var GoogleAd = React.createClass({
getInitialState: function() {
return {
id: makeUniqueId()
};
},
render: function() {
// Since this is always the same, React won't try to change the contents
return <div id={this.state.id} />;
},
componentDidMount: function() {
googletag.defineSlot('/1234567/sports', [728, 90], this.state.id);
},
componentWillUnmount: function() {
// Clean up the slot and any other resources here
}
});