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

@开发者，在后端仅提供原始数据集的情况下，如何让所有搜索逻辑都在前端完成？不仅如此，还要能够实现预测用户输入、忽略错别字输入、快速自动补齐等智能功能？本文的作者就深入 JavaScript 技术特性，谈一谈 React、性能优化以及多线程那些事儿。

render () {
    return (
      <Autocomplete
        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 (
    <div>
      <input
        onChange={ e => this.setState({searchTerm: e.target.value})}
        value={this.state.searchTerm}/>

      <SearchResults
        searchEngine={this.props.searchEngine}
        searchTerm={this.state.searchTerm}/>
    </div> 
  )
}

//searchResults.js

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

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

//autocomplete.js

render () {
  return (
    <div>
      <input
        onChange={ e => this.setState({searchTerm: e.target.value})}
        value={this.state.searchTerm}/>

      <SearchResults
        searchEngine={this.props.searchEngine}
        searchTerm={this.state.searchTerm}/>
    </div> 
  )
}

//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 (
    <div>
      <input
        onChange={ e => this.setState({searchTerm: e.target.value})}
        value={this.state.searchTerm}/>

      <SearchResults
        searchEngine={this.props.searchEngine}
        searchTerm={this.state.searchTerm}/>
    </div> 
  )
}

//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 <ReactVirtualizedList searchResults={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 <ReactVirtualizedList searchResults={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 <ReactVirtualizedList searchResults={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 <ReactVirtualizedList searchResults={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]);
}