JavaScript 大揭秘：React、性能优化以及多线程

render?()?{
????return?(
??????????????value={this.state.searchTerm}
????????items={this.getSearchResults()}
????????renderMenu={this.reactVirtualizedList}
????????renderItem={this.renderItem}
????????getItemValue={?item?=>?item.name?}
????????onChange={(e,?value)?=>?this.setState({searchTerm:?value})}
??????/>
????)
??}

getSearchResults?=?()?=>?{
??const?{searchTerm}?=?this.state;
??return?searchTerm???this.searchEngine.search(searchTerm)?:?[]
??//?searchEngine.search?is?the?expensive?search?algorithm
};

//autocomplete.js

render?()?{
??return?(
????

??????????????onChange={?e?=>?this.setState({searchTerm:?e.target.value})}
????????value={this.state.searchTerm}/>

??????????????searchEngine={this.props.searchEngine}
????????searchTerm={this.state.searchTerm}/>
????
?
??)
}

//searchResults.js

componentDidUpdate(prevProps)?{
??const?{searchTerm,?searchEngine}?=?this.props;
??if(searchTerm?&&?searchTerm?!==?prevProps.searchTerm)?{
????this.setState({
??????searchResults:?searchEngine.search(searchTerm)
????})
??}
}

render?()?{
??return?this.state.searchResults}/>
}

//autocomplete.js

render?()?{
??return?(
????

??????????????onChange={?e?=>?this.setState({searchTerm:?e.target.value})}
????????value={this.state.searchTerm}/>

??????????????searchEngine={this.props.searchEngine}
????????searchTerm={this.state.searchTerm}/>
????
?
??)
}

//searchResults.js

componentDidUpdate(prevProps)?{
??const?{searchTerm,?searchEngine}?=?this.props;
??if(searchTerm?&&?searchTerm?!==?prevProps.searchTerm)?{
????/*?stick?the?update?with?the?expensive?search?method?into
????a?promise?callback:?*/
????Promise.resolve().then(()?=>?{
??????this.setState({
????????searchResults:?searchEngine.search(searchTerm)
??????})
????})
??}
}

render?()?{
??return?< ReactVirtualizedList?searchResults={this.state.searchResults}/>
}

//searchResults.js

componentDidUpdate(prevProps)?{
??const?{searchTerm,?searchEngine}?=?this.props;
??if(searchTerm?&&?searchTerm?!==?prevProps.searchTerm)?{
????/*?stick?the?update?with?the?expensive?search?method?into
????a?setTimeout?callback:?*/
????const?setTimeoutCallback?=?()?=>?{
??????this.setState({
????????searchResults:?searchEngine.search(searchTerm)
??????})
????}
????setTimeout(setTimeoutCallback)
??}
}

render?()?{
??return?< ReactVirtualizedList?searchResults={this.state.searchResults}/>
}

//autocomplete.js
render?()?{
??return?(
????

??????????????onChange={?e?=>?this.setState({searchTerm:?e.target.value})}
????????value={this.state.searchTerm}/>

??????????????searchEngine={this.props.searchEngine}
????????searchTerm={this.state.searchTerm}/>
????
?
??)
}

//searchResults.js
componentDidUpdate(prevProps)?{
??const?{searchTerm,?searchEngine}?=?this.props;
??if(searchTerm?&&?searchTerm?!==?prevProps.searchTerm)?{
????const?setTimeoutCallback?=?()?=>?{
??????this.setState({
????????searchResults:?searchEngine.search(searchTerm)
??????})
????}
????setTimeout(setTimeoutCallback)
??}
}

render?()?{
??return?this.state.searchResults}/>
}

app.route('/prep-staging/testSearch')
??.post(bodyParser.json(),?(req,?res)?=>?{

????const?{data,?searchTerm}?=?req.body

????const?engine?=?new?SearchEngine(data)

????const?searchResults?=?engine.search(searchTerm)

????res.send({searchResult})
??})

//searchResults.js

componentDidUpdate(prevProps)?{
??const?{searchTerm,?searchEngine,?data}?=?this.props;
??if(searchTerm?&&?searchTerm?!==?prevProps.searchTerm)?{
????/*?ping?the?search?route?with?the?searchTerm?and?update?state
????with?the?results?when?they?return:?*/
????fetch(`testSearch`,?{
??????method:?'POST',
??????body:?JSON.stringify({data,?searchTerm}),
??????headers:?{
????????'content-type':?'application/json'
??????}
????})
??????.then(r?=>?r.json())
??????.then(resp?=>?this.setState({searchResults:?resp.searchResults}))
??}
}

render?()?{
??return?< ReactVirtualizedList?searchResults={this.state.searchResults}/>
}

//searchResults.js

export?default?class?SearchResults?extends?React.Component?{
??constructor?(props)?{
????super();
????this.state?=?{
??????searchResults:?[],
????}
????//initiate?the?webworker:
????this.webWorker?=?new?Worker('...path?to?webWorker.js')??
????//pass?it?the?13,000?item?search?data?to?initialize?the?searchEngine?with:
????this.webWorker.postMessage({data:?props.data})
????//assign?the?handler?that?will?accept?the?searchResults?when?it?sends?them?back:
????this.webWorker.onmessage?=?this.handleResults
??}

??componentDidUpdate(prevProps)?{
????const?{searchTerm}?=?this.props;
????if(searchTerm?&&?searchTerm?!==?prevProps.searchTerm)?{
??????//change?our?async?search?request?to?a?.postMessage,?the?messaging?API?of?webWorkers:
??????this.webWorker.postMessage({searchTerm})
????}
??}

??handleResults?=?(e)?=>?{
????const?{searchResults}?=?e.data
????this.setState({
??????searchResults
????})
??}

??render?()?{
????return?this.state.searchResults}/>
??}
}

//webWorker.js

self.importScripts('...the?search?engine?script,?provides?the?SearchEngine?constructor');

let?searchEngine;?
let?cache?=?{}?
//thought?I?would?add?a?simple?cache...?Wait?till?you?see?those?deletes?now?:)

function?initiateSearchEngine?(data)?{
??//initiate?the?search?engine?with?the?13,000?item?data?set
??searchEngine?=?new?SearchEngine(data);?
??//reset?the?cache?on?initiate?just?in?case
??cache?=?{};?
}

function?search?(searchTerm)?{
??const?cachedResult?=?cache[searchTerm]
??if(cachedResult)?{
????self.postMessage(cachedResult)
????return
??}
??const?message?=?{
????searchResults:?searchEngine.search(searchTerm)
??};
??cache[searchTerm]?=?message;
??//self.postMessage?is?the?api?for?sending?messages?to?main?thread
??self.postMessage(message)
}

/*self.onmessage?is?where?we?define?the?handler?for?messages?recieved
from?the?main?thread*/
self.onmessage?=?function(e)?{
??const?{data,?searchTerm}?=?e.data;

??/*We?can?determine?how?to?respond?to?the?.postMessage?from?
??SearchResults.js?based?on?which?data?properties?it?has:*/
??if(data)?{
????initiateSearchEngine(data)
??}?else?if(searchTerm)?{
????search(searchTerm)
??}
}

//webWorker.js

self.importScripts('...the?search?engine?script,?provides?the?SearchEngine?constructor');
let?searchEngine;?
let?cache?=?{}

function?initiateSearchEngine?(data)?{
??searchEngine?=?new?SearchEngine(data);
??cache?=?{};
}
function?search?(searchTerm)?{
??const?cachedResult?=?cache[searchTerm]
??if(cachedResult)?{
????self.postMessage(cachedResult)
????return
??}
??const?message?=?{
????searchResults:?searchEngine.search(searchTerm)
??};
??cache[searchTerm]?=?message;
??self.postMessage(message)
}

function?confirmSearchTerm?(searchTerm)?{
??self.postMessage({confirmSearchTerm:?searchTerm})
}

self.onmessage?=?function(e)?{
??const?{data,?searchTerm,?confirmed}?=?e.data;
??if(data)?{
????initiateSearchEngine(data)
??}?else?if(searchTerm)?{
????/*check?if?the?searchTerm?is?confirmed,?if?not,?send?a?confirmSearchTerm?message?
??????to?compare?the?searchTerm?with?the?latest?value?on?the?main?thread?*/
????confirmed???search(searchTerm)?:?confirmSearchTerm(searchTerm)
??}
}

//searchResults.js

export?default?class?SearchResults?extends?React.Component?{
??constructor?(props)?{
????super();
????this.state?=?{
??????searchResults:?[],
????}
????this.webWorker?=?new?Worker('...path?to?webWorker.js')??
????this.webWorker.postMessage({data:?props.data})
????this.webWorker.onmessage?=?this.handleResults
??}

??componentDidUpdate(prevProps)?{
????const?{searchTerm}?=?this.props;
????if(searchTerm?&&?searchTerm?!==?prevProps.searchTerm)?{
??????this.webWorker.postMessage({searchTerm})
????}
??}

??handleResults?=?(e)?=>?{
????const?{searchResults,?confirmSearchTerm}?=?e.data;
????/*?check?if?confirmSearchTerm?property?was?sent,?if?so?compare?it?to?the?
????latest?searchTerm?and?send?back?a?confirmed?searchTerm?message?*/
????if?(confirmSearchTerm?&&?confirmSearchTerm?===?this.props.searchTerm)?{
??????this.webWorker.postMessage({
????????searchTerm:?this.props.searchTerm,
????????confirmed:?true
??????})
????}?else?if?(searchResults)?{
??????this.setState({
????????searchResults
??????})
????}
??}

??render?()?{
????return?this.state.searchResults}/>
??}
}

//searchResults.js

export?default?class?SearchResults?extends?React.Component?{
??constructor?(props)?{
????super();
????this.state?=?{
??????searchResults:?[],
????}
????//initiate?the?worker?array:
????this.workerArray?=?new?WorkerArrayController({
??????data:?props.data,
??????handleResults:?this.handleResults,
??????arraySize:?4
????});
??}

??componentDidUpdate(prevProps)?{
????const?{searchTerm}?=?this.props;
????if(searchTerm?&&?searchTerm?!==?prevProps.searchTerm)?{
??????this.workerArray.search({searchTerm})
????}
??}

??handleResults?=?(e)?=>?{
????const?{searchResults}?=?e.data
????this.setState({
??????searchResults
????})
??}

??componentWillUnmount?()?{
????this.workerArray.terminate();
??}

??render?()?{
????return?this.state.searchResults}/>
??}
}

//workerArrayController.js

export?default?class?WorkerArrayController?{
??constructor?({data,?handleResults,?arraySize})?{
????this.workerArray?=?new?Worker('...?path?to?workerArray.js');
????let?i?=?1;
????this.webWorkers?=?{};

????while?(i?< =?arraySize)?{
??????const?workerName?=?`ww${i}`;
??????this.webWorkers[workerName]?=?new?Worker(`...path?to?ww1.js`);

???????/*?Creates?a?MessageChannel?for?each?worker?and?passes?that?channel's?
???????ports?to?both?workerArray?dispatcher?and?the?worker?so?
???????they?can?communicate?with?each?other?*/
??????const?channel?=?new?MessageChannel();
??????this.workerArray.postMessage({workerName},?[channel.port1]);
??????this.webWorkers[workerName].postMessage({data},?[channel.port2]);
??????i++;
????}

????this.workerArray.onmessage?=?handleResults;
??}

??search?=?(searchTerm)?=>?{
????this.workerArray.postMessage({searchTerm});
??}

??terminate()?{
????this.workerArray.terminate();
????for?(const?workerName?in?this.webWorkers)?{
??????this.webWorkers[workerName].terminate();
????}
??}
}

//workerArray.js

const?ports?=?{};
let?cache?=?{};
let?queue;

function?initiatePort?(workerName,?port)?{
??ports[workerName]?=?port;
??const?webWorker?=?ports[workerName];
??webWorker.inUse?=?false;
??webWorker.onmessage?=?function?handleResults?(e)?{
????const?{searchTerm,?searchResults}?=?e.data;
????const?message?=?{searchTerm,?searchResults};

????/*?If?all?workers?happen?to?be?inUse,?the?message?gets?saved?to?the
????the?queue?and?passed?to?the?first?worker?that?finishes?*/
????if(queue)?{
??????webWorker.postMessage(queue);
??????webWorker.inUse?=?true;
??????queue?=?null;
????}?else?{
??????webWorker.inUse?=?false;
????}

????cache[searchTerm]?=?message;
????self.postMessage(message);
??}
}

function?dispatchSearchRequest?(searchTerm)?{
??const?cachedResult?=?cache[searchTerm];
??if(cachedResult)?{
????self.postMessage(cachedResult);
????return
??}
??const?message?=?{searchTerm};

??for?(const?workerName?in?ports)?{
????const?webWorker?=?ports[workerName];
????if(!webWorker.inUse)?{
??????webWorker.postMessage(message);
??????webWorker.inUse?=?true;
??????return
????}
??}
??queue?=?message;
}

self.onmessage?=?function?(e)?{
??const?{workerName,?searchTerm}?=?e.data;

??if(workerName)?{
????initiatePort(workerName,?e.ports[0]);
??}?else?if(searchTerm)?{
????dispatchSearchRequest(searchTerm);
??}
}

//ww1.js

self.importScripts('...the?search?engine?script,?provides?the?SearchEngine?constructor');

let?searchEngine;
let?port;

function?initiate?(data,?port)?{
??searchEngine?=?new?SearchEngine(data);
??port?=?port;
??port.onmessage?=?search;
}

/*?search?is?attached?to?the?port?as?the?message?handler?so?it
runs?when?communicating?with?the?workerArray?only?*/
function?search?(e)?{
??const?{searchTerm}?=?e.data;
??const?message?=?{
????searchResults:?searchEngine.search(searchTerm)
??};
??port.postMessage(message)
}

/*?self.onmessage?is?the?handler?that?responds?to?messages?from
the?main?thread,?which?only?fires?during?initiation?*/
self.onmessage?=?function(e)?{
??const?{data}?=?e.data;
??initiate(data,?e.ports[0]);
}