React content

React Fiber 16 version

The role of registerServiceWorker

PWA progressive web application written phone app application in the case of off network, the second visit caches

ReactDOM.render will mount components on a real DOM node

JSX grammar written inside html + js custom components (custom component name must be uppercase)

bind (this, index) can pass arguments inside the bind

list.splice (index, 1) remove an item

state does not allow any changes do not directly this.state.list.splice (index, 1)

Html parsing possible XSS attack

Click to expand the label area

<Label htmlFor = "inputa"> typing </ label>

Notes and other parts render content can not be a return to the same level

Modify the parent does not permit direct assembly state in a child node

Style introduced on the last plane

the this .setState ((PrevState) => {
  return {value: e.target.value} // need to get the value in advance 
}) or it may be a problem

Direct operating DOM, is imperative programming, the majority are doing DOM manipulation

Declarative encoded data driver

Unidirectional data flow: value passed to the parent component subassembly subassembly can be used without change

Otherwise it will error

Benefits are less prone to error, because it may modify the parent component data in multiple sub-assemblies, may result in an error

Functional programming brings convenience to the test

propTypes和defaultProps

import PropTypes from 'prop-types';

// 规定类型
TodoItem.propTypes = {
    test:PropTypes.string.isRequired,
    content: PropTypes.string,
    handItem: PropTypes.func,
    idx: PropTypes.number
}

// 默认值
TodoItem.defaultProps = {
    test:"hello,world"
}

PropTypes.arrayOf (string, number) of the array the content type 
oneOfType ([string, number]) is one of a plurality of types

Relationship props state and render functions

When the state changes or props assembly directly re-render method

When the assembly is executed render method, it will render method is performed subassembly

Generating DOM DOM will replace the original performance consuming

A little bit of change will lead to a new generation of DOM

Change: The new generation of the original DOM DOM and do comparison find differences

Replace only the changed part of DOM

Defects: performance is not obvious

Improved: generate a virtual DOM (DOM is a virtual js objects, use it to describe the real DOM)

<div id=’abc’>aaa</div>
React.createElement(“div”, {id:’abc’}, abc)

Data has changed, a new generation of virtual DOM

And then do comparison original virtual DOM

By diff algorithm, find different portions, and then partially replaced to change the operation directly DOM

js js objects generate a small price, but the high cost of generating a DOM

As long as DOM and related operations consume a great performance (whether it is more or generation)

Create realistic virtual DOM DOM structure

jsx -> createElement method -> Generate virtual DOM (js Object) -> true DOM

The method underlying bias and <div> aaa </ div> effect is the same just so write relatively simple

jsx grammar is not true DOM, just a template

So even if there is no jsx syntax can also be replaced by createElement

DOM DOM real virtual generated in the previous generation after

Benefits of virtual DOM:

1. Performance improved

2. It is realized that the application across an end (virtual DOM does not generate true DOM) component generates native application

Diff comparison algorithm virtual DOM (js objects)

1. sibling than + key values match

If you continue the same ratio for the second layer

If not carried out it is no longer than the next layer

Benefits are: simple alignment algorithm

Why should setState form of an asynchronous function

Multiple operations may be combined into short-term reduction in the number of DOM contrast to the virtual one operation

Cycle time of key significance than do the values and key association

Why do not key value is set to index

Because the array element insertion div when the index may change to index the other div

Resulting in unstable key value would be meaningless existence

ref react in the use

When in use, can be used directly this.inp

Not recommended ref

Note: When used with the ref and may lead to incorrect results setState

Because setState is asynchronous

this.setState ((prevState) => {}, () => {}) a second parameter means after setState executed, performs certain operations

This will ensure correct implementation of certain operations after the completion of the update data

Periodic function declaration:

componentWillReceiveProps(props)

When a component accepts timing parameters from the parent component ==> executed

As long as the parent component to re-render function is executed, render function sub-assemblies will be executed

Put another way

If this component for the first time the presence of the assembly, will not be executed

If you have a parent present in the assembly before the assembly, will be executed

When a component is not props parent component values will not be performed

shouldComponentUpdate 返回 bool

Only once

componentWillMount / componentDidMount / componentWillUnmount

Life Cycle function of usage scenarios

1. input value is changed, it will lead to state changes the page re-rendering

Wasteful use of performance shouldComponentUpdate

shouldComponentUpdate(nextProps,nxtState){
   return nextProps.content !== this.props.content? true:false;
}

When sending ajax request, render process can not be placed, as may be repeatedly performed render

componentDidMount best

componentWillMount may react native and conflict

Charles interface using simulated data 
componentDidMount () { 
        axios.get ( '/ API / ToDoList' ) 
            .then ((RES) => {
                 the this .setState (() => ({List: [... res.data] })); 
Tools - local Map

css过渡动画
render(){
        return <Fragment>
            <div className={ this.state.isShow? "show":"hide"}>hello,React</div>
            <button onClick={ this.handlerClick }>toogle</button>
        </Fragment>
    }

.show {
    opacity: 1;
    transition: all 1s ease-in;
}

.hide{
    opacity: 0;
    transition: all 1s ease-in;
}

Animation is defined by the animation @keyframes 
.hide { 
    Animation: hide -Item 2S ease- in forwards; 
} plus forwards role is to store the animation CSS style last frame 

@keyframes hide - Item {
     0% { 
        Opacity: . 1 ; 
        Color: Red; 
    }
     50% { 
        Opacity: 0.5 ; 
        Color: Green; 
    }
     100% { 
        Opacity: 0 ; 
        Color: Blue; 
    } 
} 
entry is the same in turn can be a

Use react-transition-group animate yarn add

redux basis

When the component tree complex, cumbersome components by value

Data in public areas, rather than on assembly

Which directly change data store, the component will automatically sense

Redux = Reducer + Flux

Flux is released and react with Flux is not particularly easy to use

Reducers record books

Component --> ActionCreators --> store --> Reducers --> Store --> Components

constructor(props){
        super(props);
        this.state = store.getState();
    }

The restrictions reducer: reducer can receive state, but absolutely do not modify the state

newState returned to the Store

store.subscribe (() => { the this .setState (store.getState ()) 
}) to the component store Feed

handlerChange (E) { 
        const action   = { 
            type: 'change_input_value' , 
            value: e.target.value 
        }; 
        store.dispatch (action); // will be passed to the store action 
    } will then store action automatically forwarded to the reducer 

IF (action.type === 'change_input_value' ) { 
        const newState The = the JSON.parse (the JSON.stringify (State)); 
        newState.inputVal = action.value;
         return newState The; 
    }

will return to return data back to the store and then replace the original data store

Split UI component and container assembly

ui component page rendering just silly page regardless of logic

Regardless of the container assembly clever page just logic

Stateless components higher performance, it is a function

Ordinary life cycle components to perform some function

UI components that can be used

Three principles of design and use of Redux

1.store is the only change in store can only change its content

2. reducer is a pure function (green fixed output fixation input difference, no side effects)

So there can not be time-dependent and asynchronous operations operate

For example: newState.date = new Date () parameters to be modified directly or state.inputValue = action.value

It is the store to get the data reducer and then returned to the store update

Instead reducer revised data, this is why the reducer must not directly change the data inside the store

redux send an asynchronous request to obtain data on the component componentDidMount

Using the asynchronous redux-thunk code DidMount assembly is removed from the inside to the action

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
    applyMiddleware(thunk,…),
    );

const store = createStore(reducer,enhancer);

componentDidMount () { 
    const action = getInitData (); // returns a function 
store.dispatch (action); // this step will send an asynchronous request 
   when the cashback action is a function, then it will look at the implementation of this function 
}

componentDidMount () { 
    const action = getInitData (); // returns a function 
    store.dispatch (action); // this step will send an asynchronous request 
   when the cashback action is a function, then it will look at the implementation of this function 
}

If the method asynchronous requests are placed in the life cycle of the components inside the function, then the content will be more and more, and more convenient test (test function simpler than testing life cycle function)

redux middleware

Middle finger is the middle of the action and store upgrades to the dispatch of just

reset.css added to the global style to go, different forms on different cores label may be different

background-size: contain express normal size so that images in a div

react only to IE8 compatible

create-react-app has a characteristic defined below api public directory can be used as an address request requesting access to the analog back-end

render method can return a string array and

React16.4 abandoned in a number of life cycle functions

componentWillUpdate componentWillReceiveProps

Different res.send / res.json / res.sendfile response content

Top features

window.scrollTo(0,0)

Each component method call connect and store were connected, as long as each data changed

Then each component will be re-rendered not change this data input, for example, inside the box

Performance is very low:

In which all components plus componnentWillUpdate () as long as the relevant data and their own returns true independent will return false

Component PureComponent will inherit all changed with the components you need to manage the use of immutable data or it will pit

Do not use a jump page will load html tags consumption performance

import { Link } from ‘react-router-dom’
<Link to = ‘/detail’>

Obtaining routing parameters
 <Link to = "/ Detail /: ID"> 
<Link to = { "/ Detail /" + "ABC"> 
<the Route path = "/ Detail /: ID">

The second way
 <Link to = { "/ the Detail? The above mentioned id =" + "abc"> 
<Route path = "/ the Detail"> This can be matched to
 the this .props.location.search but also their own to parse the string

styled-component original DOM structure to be obtained by innerRef

Asynchronous component yarn add react-loadable

The first parameter is to load the second parameter is the component assembly shown during loading

axios 拦截器

在使用express中使用 cookie 依赖 cookie-parse

1. swiper loop 设为 true 时，同时有改变了 slidePreview 的值，这时轮播时，按prev按钮到第一个时

会出现空白页解决办法： slidePrerview 设置为 auto loopSliders 设置为你要显示的 slide个数

2. swiper-slide 为动态添加的内容时 swiper的滑动效果会消失

解决办法：初始化中设置 observer 为true observerParent 为true

componentDidCatch(error, errorInfo){} 出错的生命周期函数

Guess you like