The mvc react and vue of mvvm
The two-way binding vue mvvm belongs, view layer, model data layer, vm control layer to realize bi-bound
This model, then some sort of project types have the edge: management systems (OA, ERP, CRM, CMS .....), because there are a large number of form actions
mvc react the way data binding properties, view layer, model layer (data), controller (control layer)
1. Both are manipulating data to affect the view, bid farewell to the era of the traditional operating DOM
Layer model view control layer
- Vue based on data hijacking, interception to the latest data, in order to re-render the view
- React to provide the corresponding API, operating through our API, so that the latest data rendered views
2. There must be all the difference DOM rendering (DOM DIFF)
Each time data changes, only the need to change the view to render part
3.react default only to achieve a one-way control (data only affect the view), while vue based on v-model enables bi-directional control (in fact, in view of the impact of the data the way, we ourselves can achieve that react also to achieve a two-way tie set)
Digression: the structure of the rear end of the entire project forward, vue and react only v layer can be considered that the term (model layer, view layer, mvc is the architecture of the entire project: creating a data model, controller: the business layer to achieve a variety of business logic , view layer, i.e., the front end layer), where vue react and can only be said to be the front end partially in mvc and mvvm
scaffold
Official Scaffolding: create-react-app
$npm i -g create-react-app
$create-react-app xxx 基于脚手架创建项目
$npm start / build 生成项目
$npm eject 暴露webpack配置项There are other popular scaffolding DvaJs, UmiJs (Ali)
Scaffolding is installed by default
-react
-react-dom develop HTML page program (react-native development of native App)
-react-scripts
And Vue Like, React to default scaffolding also configured webpack those things to hide in the node_modules
=> Vue is provided vue.config.js let the user to modify the configuration items (see details vue cli official document)
=> Webpack want to change the configuration items React
1. First CI exposed yarn eject / npm run eject
2. minutiae: irreversible (can not hide the exposed back) + If there must first save the changes git items
config webpack configuration items
|-webpack.config.js
|-webpackDevServer.config.js
| -Path.js store address information file (file entry, etc.) for each configuration
|.....
scripts
| Npm run start at -start.js development environment to execute this file
| Next -build.js production environment npm build the first implementation of this document
|......
1. By default, all the resources we will need to develop the introduction of (Style | picture ...) and so on into modules written in SRC directory (webpack itself is packed src directory, more entry index.js)
2. But some things we still need to write in index.html under the public in
=> Packaged introduced to the last page css / js, because the file after the package is relatively large, the first request for a page takes a little time, this period of time, we see is black and white effect
1) In order to solve the black and white effect, we will set up in the index.html loading effect (the content is on a page is loaded show out) => This has a corresponding plug-in
2) to cache resources to do 304
..........
=> Some modules do not support CommonJs / ES6Module import and export this specification, when we need to script these modules separately introduced in coming index.html
=> Some public resources may also be directly introduced here (such webpack when packaged will not be packaged with the content)
The backward-compatible
- browserList
- Polyfill
JSX advantage JSX basic grammar and syntax
jsx ：javascript and xml
In fact, can also be understood as html xml, html code but here is not directly run more like xml where we define the meaning for the label
jsx的基本使用：
1.最外层只能有一个根节点（一般用空标记，因为如果用div，会真实渲染一个没有真正意义只用来包裹的div）
2.动态数据绑定用 ： {} ，{}中存放js表达式（js执行代码得有返回的结果）
=>{}中可以放数组：把数组中的每一项都呈现，不含逗号
=>{}中一般情况不能放对象，
=> 但是如果是jsx的虚拟DOM对象，是直接可以渲染的
3.设置行内样式，必须是style = {{ color:'red'}} ，设置样式类名需要使用的是className而不是class
4.jsx中进行的判断一般都要基于三元运算符来完成
5.jsx中遍历数组中的每一项，动态绑定多个jsx元素，一般都是基于数组中的map来实现（map迭代数组的同时，支持返回值）(和vue一样，循环的对象也要加key值)
=>我们要在ul li中渲染 let arr= [{name:'张三',age:25},{name:'李四',age:26}]
=>就需要这样：<ul>
{arr.map((item,index)=>{
return <li>
姓名:{item.name}
年龄:{item.age}
})}
<ul>JSX的优点：
1.JSX语法具备很强的编程性，这是vue中模板语法不具备的，所以vue从新版本（v2.xx）开始，支持了jsx语法
=>举例：我们传回一个数据，根据这个数据的不同的，渲染不同的组件，在vue的template语法中，我们要写一堆html代码，每个不同的组件都需要写出来，然后根据if-else来控制display的隐藏于显示来控制具体需要展示哪一个，而在jsx语法中，我们可以使用代码将html结构动态的组建起来，比如'h'+this.i ,这个i就可以控制要使用第几档的标题标签
=>这就是jsx的强编程性和template的弱编程性
2.JSX语法具备过滤效果（过滤非法内容）,有效防止XSS攻击
=>自行了解XSS安全优化The real JSX Syntax => Virtual DOM object => DOM
1.基于babel-preset-react-app把JSX语法变为React.createElement的模式
=>如div标签都会转换成React.createElement("div",null,React.createElement(..))
=>React.createElement的第一个属性为div的标签名，第二个为标签的属性（对象），第三个为子元素
=>每遇到元素标签（或者组件）都要createElement
React.createElement = function (type,props,...children){
let jsxOBJ ={
type:type
props:{}
};
//=>传递了属性，把传递的属性都放置到jsx-OBJ的props中
if(props !==null){
//基于es6实现浅克隆
jsxOBJ.props= {...props}
}
//=>如果传递了子元素，还需要给jsxOBJ的props中设置children属性
if(children.length > 0){
jsxOBJ.props.children = children;
//如果只有一项，则把第一项赋值给jsxOBJ.props.children即可
if(children.length ===1){
jsxOBJ.props.children = children[0]
}
}
return jsxOBJ;
};
2.基于React.createElement方法的执行，创建出虚拟DOM对象（jsx对象）
=>首先是一个对象
=>type属性存储的是标签名（或者组件）
=>props属性：没有传递任何属性，也没有任何的子元素，则为空对象，把传递给createElement的属性，都赋值给props;如果有子元素，则默认新增一个children的属性，可能是一个值，也可能是一个数组
3.基于ReactDOM.render把创建的虚拟DOM对象渲染到页面指定的容器中
=>ReactDOM.render([JSX-OBJ],[container],[callback])
=>参数意义：1.虚拟dom 2.容器 3.回调函数（在这个回调函数中，可以获取到真实的dom，只不过项目中一般不用这个参数）
ReactDOM.render = function render (jsxobj ,container,callback){
let {type ,props}= jsxOBJ;
//=>创建dom元素
if(typeof type === "string"){
//创建dom对象(真实dom)
let element = document.createElement(type);
//给dom设置传入的属性
for(let key in props){
if( !props.hasOwnProperty(key)) break;
if(key === 'className'){
element.setAttribute('class',props[key]);
continue;
}
if(key === 'style'){
let styOBJ = props['style']
for(let attr in styOBJ){
if(!styOBJ.hasOwnProperty(attr)) break;
element.style[attr] = styOBJ;
}
}
//关于子元素的处理
if(key === 'children'){
//统一为数组
let children = props['children'];
!Array.isArray(children) ? children = [children] : null ;
//循环子元素
children.forEach(item=>{
//如果是文本，直接创建文本节点赋值给element即可，如果是新的虚拟dom对象则需要重复调用render方法，把新建的dom对象增加给element（递归）
if(typeof item ==== "string"){
element.appendChild(document.createTextNode(item))
return;
}
render(item,element);
});
continue;
}
element.setAttribute(key,props[key]);
}
//增加到指定容器当中
container.appendChild(element);
//触发回调函数
callback && callback()
};
}