1 Introduction:
react also using MVVM design pattern is facebook, 2013 Open Source
2. The core is: a package assembly
Each component maintains its own state and UI, when the state changes, automatically re-render the entire assembly
3. The core concept:
assembly, jsx, Virtual, DOM, data , Flow ( stream)
Angular, React, Vue are MVVM frame, are able to achieve data changes automatically change the view. But three of them are entirely different principle:
Angular: dirty checking, lexical analysis, updated view of the invisible;
React: setState () function calls such as the view, with the DIFF algorithm and Virtual DOM DOM to make changes in higher efficiency;
Vue: data hijacking
4.react installation
react.min.js - React core libraries
react-dom.min.js - provide information related to DOM functions
babel.min.js - Babel may be ES6 the code into the code ES5, so that we will be able to currently not supported React code ES6 browser. Babel built support for the JSX. By Babel and babel-sublime package (package) can be used together to make the source code syntax render rise to a whole new level.
redux
Predictable state management unit for VUE , REACT , Angular . In react inside the highest utilization rate
With npm Download redux --save npm i
Three principles
A single data source
The entire application state is stored in an object tree, and the object tree exists only in a single store in.
State is read-only
The only way is to change the state trigger Action , Action is a general object description for events that have occurred.
The use of pure function to perform the modification
In order to describe how action to change the state tree, you need to write reducers .
Resucer is createStore first parameter is a function that is mainly used to generate a new State , accepts two parameters is a State , is a action back newstate
Action
Action is an object, all state changes are user view layer view submitted to the action action is the only change state route
Action = {type: "", payload: ""} type is a cation function name payload is a parameter of the load transfer function associated
Store.dispatch () is the view the only layer emits action method parameter is an action target