React.js

Rookie official explanation:

React JAVASCRIPT is used to build a library user interface.

React mainly used to build the UI, many people think React is in MVC V (view).

React internal project originated in Facebook, and Instagram to set up a website and open in May 2013.

React has a high performance, code logic is very simple, more and more people have started to pay attention and use it

React Features:

1. Declare design -React declarative paradigm, you can easily describe the application.

2. Efficient -React the DOM by simulation, to minimize interaction with the DOM.

3. Flexible -React can work well with known library or framework.

4.JSX - JSX is an extension of JavaScript syntax. React development does not necessarily use the JSX, but we recommend using it.

The assembly - through React building element, such that the code easier to reuse obtained can be well applied in the development of large projects.

6. The one-way data flow response - React achieve a unidirectional response data stream, thereby reducing code duplication, which is why it is simpler than the traditional data binding.

virtual Sun

state creation data
jsx template
Data + template generation Virtual DOM (js virtual node is an object created, the object is a description of the node that contains all the information that node, attrs, content, etc.)
Create realistic virtual DOM DOM, display
state change
+ Template data to generate a new Virtual DOM
Comparing the difference between the old and new Virtual DOM to find the difference.
Direct operating DOM change are different places.

Note: Because when parsing web browser, js and html are separate. The equivalent of two modules, js to operate across the boundaries of other people's things, so that the cost is relatively large. Create a virtual dom makes a great degree of performance improvement, and his cross-end application makes the application proud to achieve React Native. In the end android and ios is one that does not exist dom, so after creating virtual dom, dom will generate a corresponding virtual native of things.

Progressive Web Application

That is the meaning of words: progressive Web applications

PWA What can be achieved?

You can place a shortcut to the desktop app, run full-screen, no different from the native app
Can be used in a variety of network environments, including the network and the difference between broken network conditions, does not appear undefind
The ability to push messages
Which is essentially a web page, there is no native app various startup conditions, the rapid response to user commands

In React.js in. public folder has a folder mainfest.json, the configuration file is used to achieve desktop shortcuts without network situation, when the network conditions or poor, to use the service worker for offline caching.

Service Worker

Offline Web reference solution. After been to refer to the web page, when disconnected from the network, you can still access the page again.

ServiceWorker ability to focus primarily on the web and offline caching proxy. On the specific implementation, it can be understood as a WebWorker ServiceWorker can still run when the page is closed

After you create a project by scaffolding react, under the root directory is a src serviceWorker.js file when the file is used to write the app, provide offline caching technology. Still work for the next line.

Immutable

Ensure that the data state is not modified. When modifying data, data can not this.state.xx respect to specific methods need this.setState ({}); applets can be found and is the same

JSX

Baidu interpretation:

JSX is a JavaScript syntax extensions, applied React architecture, its format more like template language, but in fact is entirely in JavaScript implemented internally. React element is the smallest unit constituting the application, the element is used to declare JSX among React, React JSX used to describe the user interface.

Details Use: JSX

 render() {
     return (
       <div>
         <ul>
           <li></li>
         </ul>
       </div>
     )
 }

The above code is equivalent to the following

 render() {
     return React.createElement('div',{},React.createElement('ul',{},React.craeteElement('li',{})));
 }

His order: jsx => createElement => Virtual Dom => true Dom

Vue rendering and virtual nodes react is actually consistent

className

When you set the style, we found that they were set by adding a class or id corresponding class name used when creating templates react because the class is class, so when rendering templates, style settings can className = "" to set up

Fragment

Each component requires a large package label, but the DOM will be unnecessary, thus react provided Fragment to sit placeholder. This will not produce a new node, and the component does not have any errors.

 import React, { Component,Fragment } form 'react';
 
 class Demo extends Component {
     render() {
         return (
           <Fragment>
           Html content
           </Fragment>
         )
     }
 }

dangerouslySetInnerHTML

If the render make something not escaped.

Then we need to keep the element is not dangerouslySetInnerHTML escaped

 <div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />

React dangerouslySetInnerHTMl is a property tag, similar to the angular ng-bind;
There are 2 {} {}, {} represents a first syntax beginning jsx, dangerouslySetInnerHTML second representative key value received on an object;
May be inserted into the DOM, and the string may be inserted;
But there is a problem, because the use of the label content will convert it, so you probably were XSS attack.

import React,{ Component,Fragment } from 'react';
import './style/todoList.css'

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      list: []
    }
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);      
  }
  render() {
    return (
      <Fragment>
        {/**这里是注释 */}
        <input 
          className="input"
          onChange={this.handleInputChange.bind(this)}
          value={this.state.inputValue} 
        />
        <button className="btn" onClick={this.handleSubmit}>提交</button>
        <ul>
          {
            this.state.list.map((item,index) => {
              return (
                <li 
                  key={index}
                  onClick={this.handleDeleteItem.bind(this,index)}
                  dangerouslySetInnerHTML={{__html:item}}
                >
                </li>
              )
            })
          }
        </ul>
      </Fragment>
    )
  };
  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  };
  handleSubmit() {
    this.setState({
      list: [...this.state.list,this.state.inputValue],
      inputValue: ''
    })
  };
  handleDeleteItem(index) {
    let list = [...this.state.list];
    list.splice(index,1);
    this.setState({
      list: list
    })
  }
}
export default TodoList;

When we enter the input in <h1> the Hello World </ h1> , if used dangerouslySetInnerHTML words, h1 tag will take effect.

htmlFor

When using a label, usually we will be bound by the id for the input. In react, we will need to pass htmlFor = "" to bind input

Components by value

Father to son

Data is transmitted from father to son through property, the need to pass on the sub-assembly is transmitted by way of properties, the subassembly can be acquired by this.props.attr data transmission over the parent component

Parent component:

import TodoItem from './TodoItem'
render() {
    return (
        <ul>
          {
            this.state.list.map((item,index) => {
              return (
                <div>
                  <TodoItem content={item} index={index} />
                  {/*<li 
                    key={index}
                    onClick={this.handleItemDelete.bind(this,index)}
                    dangerouslySetInnerHTML={{__html:item}}
                  >
                  </li>*/}
                </div>
              )
            })
          }
        </ul>      
    )
}

Subassembly to the data content and hanging on the index,

Obtaining sub-assemblies

import React, { Component } from "react";

class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  render() {
    return (
      <div>{this.props.content}</div>
    )
  }
}

export default TodoItem;

You can get to the data transfer from the parent component by this.props.

Parent child transmission

Child pass the Father, then, is not so much vue way here to be passed to the parent component sub-assemblies in the first method.

Call the parent component sub-assembly method to change the data. The method of obtaining the data as a parameter passed to the method invocation can be a parent component.

The method attribute hanging manner to the subassembly, but note that there needs to point to the parent binding assembly

Or just content

import React,{ Component,Fragment } from 'react';
import TodoItem from './TodoItem';
import './style/todoList.css';

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      list: []
    }
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleItemDelete = this.handleItemDelete.bind(this);
  }
  render() {
    return (
      <Fragment>
        <div>
          <label htmlFor="inputArea">输入内容</label>
          <input
            id="inputArea"
            className="input"
            onChange={this.handleInputChange}
            value={this.state.inputValue} 
          />
          <button 
            className="btn" 
            onClick={this.handleSubmit}
          >提交</button>
        </div>
        <ul>
          {this.getTodoItem()}
        </ul>
      </Fragment>
    )
  };
  getTodoItem() {
    return this.state.list.map((item,index) => {
      return (
        <TodoItem
          key={index}
          content={item} 
          index={index} 
          deleteItem={this.handleItemDelete} 
        />
      )
    })
  };
  
  handleInputChange(e) {
    const value = e.target.value;
    this.setState(() => ({
      inputValue: value
    }))
  };
  handleSubmit() {
    this.setState((prevState) => ({
      list: [...prevState.list,prevState.inputValue],
      inputValue: ''
    }))
  };
  handleItemDelete(index) {
    this.setState((prevState) => {
      const list = [...prevState.list];
      list.splice(index,1);
      return {list}
    })
  }
}
export default TodoList;

deleteItem is hanging in the way, for the child component calls

Subassembly

import React, { Component } from "react";

class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  render() {
    const { content }= this.props;
    return (
      <div onClick={this.handleClick}>
        {content}
      </div>
    )
  }
  handleClick() {
    const { deleteItem,index } = this.props;
    deleteItem(index);
  }
}

export default TodoItem;

Note: REACT unidirectional data flow, for an example: 5 referenced parent component subassemblies, each subassembly list references the parent component is not transmitted if a unidirectional data flow, the subassembly of this.props.list. = []; to make changes after the other four sub-components of what will happen?

This is a display bug, and modifying a others are modified. It is clearly a more serious problem. So react in the way data is to solve such a problem.

Transfer data to the parent component sub-assemblies, it is unable to make changes. Data state in a read-only property, is unable to make changes. If you have to modify the parent component required to pass a method subassembly, the subassembly is achieved by calling the data change method.

setState

The method used to update the state data, this method is invoked, even if the data does not make changes in the state, will re-execute the render method.

setState({
    isActive: true,
})
console.log(this.state.isActive)//false

This method is actually a asynchronous operation , so to get the latest state needs in the second argument callback function to obtain or to resolve the matter through async and await

async handleClick() {
    await this.setState({
        isActive: true
    })
    console.log(this.state.isActive);//true
}

This method has two parameters

the setState ((PrevState) => {
     // PrevState old data 
}, () => {
     // this data can be later updated 
})

PropTypes

Pass between components when the value of a data acceptance limit

Details doc can view the official website https://reactjs.org/docs/typechecking-with-proptypes.html

import { PropTypes } from 'prop-types'
class 组件 extends Component {}
组件.propTypes = {
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,  
}

isRequired

This requirement can not be null objects by value, must have a value

组件.propTypes = {
    obj: PropTypes.string.isRequired
}

arrayOf ()

Requirement type can be more

.PropTypes =组件{ 
    obj: PropTypes.arrayOf (PropTypes.number, PropTypes.string) 
}

defaultProps

The default is set between the target value of the transmission assembly

assembly extends Component {} class 
 components .defaultProps = { 
     OBJ1: 'Hello World' 
 }

After setting the default value, when the parent component data is not transmitted, default values will be the default

Follow-up to continue learning update

Preliminary React.js