This is the 16th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Explain the standard JavaScript toolchains, translation (via Babel or other compilers), JSX, and the importance of these projects in recent development. What tools do you use during the build step to optimize the compiled output React code?

While a cutting-edge JavaScript toolchain may seem complicated, it’s not hard to get your head around it and see how the pieces fit together.

There are several main pillars in the JavaScript toolchain: dependency management, code formatting, style checking, translation and compilation, code compression, and source-mapping.

Typically, we use build tools such as Gulp, Watchify/Browserify, Broccoli, or Webpack to listen for file events in the file system (such as when adding or editing files). When this happens, the build tool is configured to perform a set of sequential or parallel tasks.

This is the most complex part and the heart of the development process.

The remaining tools belong to this group of sequential or parallel tasks:

  • Style linting – Linters like JSCS are usually used to ensure that the source code follows a specific structure and style
  • Dependency management — For JavaScript projects, most people use NPM’s other packages; Several plug-in generation systems (such as WebPack) and compilers (such as Babel) that allow automatic installation of encapsulation do existimportED orrequire()“D
  • Transcoding – A specific subtype of compilation, transpilation involves compiling code from one source version to another, only to a similar run-time level (for example, ES6 to ES5)
  • Compilation – specifically separate from translating ES6 and JSX into ES5 – is the behavior of including assets, processing CSS files as JSON, or other mechanisms that can load and inject external assets and code into files. In addition, there are various build steps that can analyze your code and even optimize it for you.
  • Shrinking and compressing – usually part of compilation but not entirely controlled by – is the act of shrinking and compressing JS files into fewer and/or smaller files
  • Another optional part of the compilation is to build a Source map, which helps identify the lines in the original Source code that correspond to the lines in the output code (where an error occurred)

For React, there are specific build tool plug-ins, such as the Babel-React-optimize preset, which involves compiling code into the React optimization format, For example, automatically compiling any React. CreateElement () call into a JavaScript object inline directly into the source code:

class MyComponent extends React.Component {
  render() {
    return (
      <div className={this.props.className}>
        <span>Hello World</span>
      </div>); }}Copy the code

become

class MyComponent extends React.Component {
  render() {
    return (
      _jsx('div', { className: this.props.className }, void 0,
        _jsx('span', {}, void 0.'Hello World'))); }}Copy the code

Also check out:

  • How does the compiler help optimize React
  • How do I use the Create React App to guide a modern toolchain
  • The Next. Js and GatsbyJS are built on top of the camp framework

How to create higher-order components in React?

Advanced order component (HOC) is a coined term for accepting custom subcomponents that are dynamically provided. For example, have the
Component mark the children as children, wait for the
Component to scroll into the view, and then load the images they point to in the background (before rendering them to the DOM).

HOC accepts children by props:

DOM.render(
    <LazyLoad>
        <img src="https://media.giphy.com/media/HhvUpQhBWMtwc/200.gif"/>
        <img src="https://media2.giphy.com/media/3oEduUDvycvu3GYkdG/200w.gif"/>
        <img src="https://media0.giphy.com/media/142UITjG5GjIRi/200w.gif" />
    </LazyLoad>,
    document.body)
Copy the code

Creating HOC means that this.props. Children is handled in the component’s code:

class LazyLoad extends Component {
    constructor(p){
        super(p)
        this.state = { loaded:0 }
        this._scroll = this._scroll.bind(this)}_scroll(){
        let el = DOM.findDOMNode(this)
        let {top} = el.getBoundingClientRect()
        let viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
        if(top < (viewportHeight + this.props.top)) {
            window.removeEventListener('scroll'.this._scroll)
            this.setState({loaded:1}}})componentDidMount(){
        window.addEventListener('scroll'.this._scroll)
        this._scroll()
    }
    componentWillUnmount(){
        window.removeEventListener('scroll'.this._scroll)
    }
    render(){
        let {children} = this.props,
            {loaded} = this.state
        return <div>
            {loaded && children}
        </div>
    }
}

LazyLoad.defaultProps = {
    top: 100
}
Copy the code

Please note the following:

  1. wethis.state = {loaded: 0}inconstructor()This will be1Set when the parent container scrolls into the view.
  2. willrender()returnprops.childrenWhen this happens to a child element.srcUse ES6 deconstruction to extract where{props:{src}}createsrcA variable with the appropriate value.
  3. We used the life cyclecomponentDidMount(). We use it because, at mount time, we want the component to determine if HOC is visible.
  4. The maximum value function of our component_scroll()To retrieve the DOM element of the HOC component,DOM.findDOMNode()Then get the element position. This position is compared to the height of the browser window, and if it is less than 100px from the bottom, remove the scroll listener andloadedSet to1.

This technique is called HOC because this.props. Children When we nest these elements within a container component, we pass in the elements:

<HOC>
    <div>some</div>
    <span>children</span>
    <Props/>
</HOC>
Copy the code

All of these nested elements (which can be custom components) are nested under
, so that code in HOC will be able to use this.props. Children.

Reference article:

  • 21 Essential React.js Interview Questions